Intervention Request JS

Web component for building HTML picture tags using Intervention Request images

Installation

From npm registry

yarn add @rezo-zero/intervention-request

or

npm install @rezo-zero/intervention-request

Framework integration

See details on StencilJS documentation

Usage

<intervention-request
    src="folder/filename.jpg"
    alt="My sample image"
    baseUrl="https://intervention-request.test"
    width="1280"
    height="768"
    formats='{
         "width": 1024,
         "height": 768,
         "media": [
             {"srcset":[{"format":{"fit":"1920x980","quality":80},"rule":"1x"}, {"format":{"fit":"3840x1960","quality":80},"rule":"2x"}], "rule":"(min-width: 1280px)"},
             {"srcset":[{"format":{"fit":"768x320","quality":80},"rule":"1x"}], "rule":"(min-width: 768px)"},
             {"srcset":[{"format":{"fit":"400x280","quality":80},"rule":"1x"}]}
         ]
     }'>
</intervention-request>

Attributes

See all available components attributes here

Styling

CSS variables applied to image

:root {
    --ir-object-fit: fill;
    --ir-object-position: inherit;
    --ir-width: 100%;
    --ir-height: auto;
    --ir-aspect-ratio: inherit;
}

Global configurations & overrides

A common configuration can be defined via the global variable interventionRequestJS as follows

/**
 * Override intervention request default configurations
 * @type InterventionRequestConfigurations
 */
window.interventionRequestJS = {
    /**
     * Enable debug mode
     */
    debug: true,

    /**
     * Default strategy
     * Applied on each element without strategy props provided
     */
    strategy: 'default',

    /**
     * Default loading typee
     */
    loading: 'lazy',

    /**
     * Strategies config overrides
     */
    strategies: {
        default: { baseUrl: 'http://intervention.local/assets' },
        cloudinary: { baseUrl: 'https://res.cloudinary.com/demo/image/upload' }

        /**
         * New strategy can be added here
         * @type InterventionRequestStrategy
         */
    },

    /**
     * Default media options
     * Applied on every media if no props override provided
     */
    mediaOptions: {
        quality: 100,
        progressive: 0
    }
}