Statamic Responsive Images Addon Demo
Basic Example
Basic example, will output the images as they are, but in a picture tag.
{{ resp:url }}
Ratio Example
It is possible to define different aspect ratios for different breakpoints.
- Mobile: 16/9
- LG: 4/3
{{ resp:url ratio="16/9" lg:ratio="4/3" }}
Col Span Basic Example
The col_span defines the width of the image in the layout.
- Mobile: 12 columns
- LG: 4 columns
{{ resp:url col_span="12" lg:col_span="4" }}
Col Span Fullwidth Layout Example
The col_span defines the width of the image in the layout.
- Mobile: 12 columns
- LG: 12 columns
{{ resp:url col_span="12" container_full_width="true" class="w-full" ratio="16/5" }}
Alt tag example
The image uses the assets `alt` field by default, it is possible to overwrite this with a custom value.
{{ resp:url alt="We want cookies" col_span="12" lg:col_span="3" }}
Crop to faces
Only works with imgix, not with glide. Sets the center of the cropping to faces detected in the image.
{{ resp:url crop="faces" ratio="4/3" col_span="12" lg:col_span="3" }}
Col Span and Ratio Example
Mix and match ratios and col_span as you like. Those two params support breakpoints. `alt` and `container_full_width` do not support breakpoints.
- Mobile: 12 columns - 16/9
- LG: 4 columns - 4/3
{{ resp:url col_span="12" lg:col_span="4" ratio="16/9" lg:ratio="4/3" }}
Provided Class Example
It is possible to set a custom class on the `img` tag.
{{ resp:url class="your-class" ratio="4/3" col_span="12" lg:col_span="3" }}
