-
Notifications
You must be signed in to change notification settings - Fork 0
responsiveImageSrcset
Introduced 3.2.0
Outputs HTML srcset string, with default sizes. Intended use case is Imgix or similar image service URLs.
Defaults to outputting images of width 200, 400, 600, 1000, 1600, 2200 and 2800 - which can be overridden.
Has some default settings:
{
q: 75,
fm: 'auto',
auto: 'compress,format',
fit: 'min',
}These can be switched off, or overridden. The defaults won't remove any rect crops.
Can overrite params attached to the base image or optionall preserve them.
- nothing
- str - required - base url of image
- object - optional - options - output options
- string for image
srcsetattribute
Basic example, with a base url with no parameters:
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg');
// 'https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=2800&width=2800 2800w'The default q (quality), format, auto and fit parameters along with the w and width parameters have been added.
Example with base url with params ?px=10&q=90&w=1480.
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1480');
// 'https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=200&fm=auto&auto=compress%2Cformat&fit=min&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=400&fm=auto&auto=compress%2Cformat&fit=min&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=600&fm=auto&auto=compress%2Cformat&fit=min&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=1000&fm=auto&auto=compress%2Cformat&fit=min&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=1600&fm=auto&auto=compress%2Cformat&fit=min&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=2200&fm=auto&auto=compress%2Cformat&fit=min&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=2800&fm=auto&auto=compress%2Cformat&fit=min&width=2800 2800w'This time the px param is maintained, the q param is overridden with the default, the w param has been overridden with the widths from the source set. And the format, auto and fit parameters have been added.
If you want to specify a different array of sizes:
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg', { sizes: [50, 100] });
// 'https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=50&width=50 50w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=100&width=100 100w'Which generates src urls based on your passed sizes.
If you want to override the defaults you can add params:
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg', {
params: {
q: 60
}
});
// 'https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=2800&width=2800 2800w';This time the format, auto and fit parameters along with the w and width parameters have been added and the q param is set to sent through 60.
Sending overwrite:false stops any sent params, or the defaults from over writing params on the sent image url:
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1480', {
overwrite: false,
params: {
q: 75,
blur: 20,
}
});
// 'https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=2800&width=2800 2800w';The default parameters can be switched off by sending defaultParams: false in the options;
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg', { defaultParams: false });
// 'https://area17.imgix.net/0000/image.jpg?w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?w=2800&width=2800 2800w';This time, only the w and width params have been added.
This will also leave any params with the image url:
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1480', { defaultParams: false });
// 'https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=2800&width=2800 2800w';If you want to send your own defaults, but not override existing params - you can send defaultParams: false along with overwrite: false and your params:
responsiveImageSrcset('https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1480', {
defaultParams: false,
overwrite: false,
params: {
q: 75,
blur: 20,
}
});
// 'https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=2800&width=2800 2800w';This will add any new params but not over write existing params.