1.3.2 • Published 8 months ago
@rezo-zero/intervention-request v1.3.2
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;
}
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
}
}
1.3.2
8 months ago
1.3.1
8 months ago
1.3.0
8 months ago
1.2.0
3 years ago
1.1.0
3 years ago
1.2.6
3 years ago
1.2.5
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago