Web component for building HTML picture tags using Intervention Request images
yarn add @rezo-zero/intervention-requestor
npm install @rezo-zero/intervention-requestSee details on StencilJS documentation
<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>See all available components attributes here
CSS variables applied to image
:root {
--ir-object-fit: fill;
--ir-object-position: inherit;
--ir-width: 100%;
--ir-height: auto;
}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
}
}