Theme Developer
This documentation needs work. See "Help improve this page" in the sidebar.
As a Theme Developer I would,
- like to avoid delivering over-sized images as it effect client side performance
- like to have some predictable image sizes to work with for a given context so that they can theme them appropriately with less effort
Defining Image breakpoints (screens)
These sizes will be used to generate resized and optimized versions of an image (for example, with the sizes modifier).
There is no user interface for editing breakpoints in Drupal 8. Due to the fact that breakpoints are defined in configuration files, it's not possible to provide a UI in contrib either.
RIFT Module defines a custom configurations for defining and using breakpoints.
Defining Sizes
This is a space-separated list of screen size/width pairs.
Defining Aspect Ratios
This is a space-separated list of screen <width>x<height> pairs.
Usage of Twig Filter "rift_picture"
Usage of twig filter is discouraged as it doesn't play well with caching. One should strive to use field formatters provided by RIFT module for media entities for optimal performance.
The filter is provided for some extreme cases where you know how Caching and Templates works in Drupal, and how to handle them.
You can use this filter to figure out the optimal configuration and later apply to RIFT view modes and consume via RIFT field formatters.
Filter Name: rift_picture
Accepted parameters:
$media- MediaInterface - Required - The media entity for which the responsive picture needs to be generated for.
$config- String - Required - RIFT Configuration.
- Example usage
Example 1: Minimal
Note the usage of node.field_common_image.0.entity to access the media entity instead of content.field_common_image.0. This is because, the filter requires a Media Entity as first parameter. The sizes and aspect_ratios are mandatory parameters.
Read more about available options in this detailed configuration reference.
<!-- In node.html.twig -->
node.field_common_image.0.entity|rift_picture({
sizes: 'xs:100vw sm:100vw md:50vw lg:50vw xl:50vw',
aspect_ratios: "1x1 16x9 1x1 1x1 1x1",
})
Example 2: Advanced configurations
<!-- In node.html.twig -->
node.field_common_image.0.entity|rift_picture({
sizes: 'xs:100vw sm:100vw md:50vw lg:50vw xl:50vw',
aspect_ratios: "1x1 16x9 1x1 1x1 1x1",
quality: {
"1x": "80",
"2x": "40",
},
url_generation_strategy: "dummyimage",
formats: ['webp', 'avif', 'jpeg'],
})
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion
