responsive_image.style.html.twig

Same filename in other branches
  1. 10 core/modules/responsive_image/help_topics/responsive_image.style.html.twig
  2. 11.x core/modules/responsive_image/help_topics/responsive_image.style.html.twig
---
label: 'Configuring a responsive image style'
related:
  - core.media
  - field_ui.manage_display
  - layout_builder.overview
  - image.style
  - breakpoint.overview
---
{% set media_topic = render_var(help_topic_link('core.media')) %}
{% set image_style_topic = render_var(help_topic_link('image.style')) %}
{% set breakpoint_overview_topic = render_var(help_topic_link('breakpoint.overview')) %}
{% set styles_link_text %}{% trans %}Responsive image styles{% endtrans %}{% endset %}
{% set styles_link = render_var(help_route_link(styles_link_text, 'entity.responsive_image_style.collection')) %}
<h2>{% trans %}Goal{% endtrans %}</h2>
<p>{% trans %}Configure a responsive image style, which can be used to display images at different sizes on different devices. See {{ media_topic }} for an overview of responsive image styles, and {{ breakpoint_overview_topic }} for an overview of breakpoints.{% endtrans %}</p>
<h2>{% trans %}Steps{% endtrans %}</h2>
<ol>
  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <em>Configuration</em> &gt; <em>Media</em> &gt; <em>{{ styles_link }}</em>.{% endtrans %}</li>
  <li>{% trans %}Click <em>Add responsive image style</em>.{% endtrans %}</li>
  <li>{% trans %}Enter a descriptive <em>Label</em> for your style.{% endtrans %}</li>
  <li>{% trans %}Select a <em>Breakpoint group</em> from the groups defined by your installed themes and modules.{% endtrans %}</li>
  <li>{% trans %}Select a <em>Fallback image style</em> to use when none of the other styles apply. See {{ image_style_topic }} if you need to add a new style.{% endtrans %}</li>
  <li>{% trans %}Click <em>Save</em>.{% endtrans %}</li>
  <li>{% trans %}On the next page, locate the fieldsets for the breakpoints provided by the selected <em>Breakpoint group</em>.{% endtrans %}</li>
  <li>{% trans %}For each breakpoint that you want to use, expand the corresponding fieldset. Select the <em>Select a single image style.</em> radio button under <em>Type</em> for the breakpoint, and select the <em>Image style</em> to use for images when that breakpoint is in effect. Repeat this step for the rest of the breakpoints you want to use.{% endtrans %}</li>
  <li>{% trans %}Click <em>Save</em>{% endtrans %}</li>
  <li>{% trans %}You can now use this responsive image style to format a field containing an image, in your layouts or traditional field displays. See related topics below for more information.{% endtrans %}</li>
</ol>

File

core/modules/help_topics/help_topics/responsive_image.style.html.twig

View source
  1. ---
  2. label: 'Configuring a responsive image style'
  3. related:
  4. - core.media
  5. - field_ui.manage_display
  6. - layout_builder.overview
  7. - image.style
  8. - breakpoint.overview
  9. ---
  10. {% set media_topic = render_var(help_topic_link('core.media')) %}
  11. {% set image_style_topic = render_var(help_topic_link('image.style')) %}
  12. {% set breakpoint_overview_topic = render_var(help_topic_link('breakpoint.overview')) %}
  13. {% set styles_link_text %}{% trans %}Responsive image styles{% endtrans %}{% endset %}
  14. {% set styles_link = render_var(help_route_link(styles_link_text, 'entity.responsive_image_style.collection')) %}
  15. <h2>{% trans %}Goal{% endtrans %}</h2>
  16. <p>{% trans %}Configure a responsive image style, which can be used to display images at different sizes on different devices. See {{ media_topic }} for an overview of responsive image styles, and {{ breakpoint_overview_topic }} for an overview of breakpoints.{% endtrans %}</p>
  17. <h2>{% trans %}Steps{% endtrans %}</h2>
  18. <ol>
  19. <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <em>Configuration</em> &gt; <em>Media</em> &gt; <em>{{ styles_link }}</em>.{% endtrans %}</li>
  20. <li>{% trans %}Click <em>Add responsive image style</em>.{% endtrans %}</li>
  21. <li>{% trans %}Enter a descriptive <em>Label</em> for your style.{% endtrans %}</li>
  22. <li>{% trans %}Select a <em>Breakpoint group</em> from the groups defined by your installed themes and modules.{% endtrans %}</li>
  23. <li>{% trans %}Select a <em>Fallback image style</em> to use when none of the other styles apply. See {{ image_style_topic }} if you need to add a new style.{% endtrans %}</li>
  24. <li>{% trans %}Click <em>Save</em>.{% endtrans %}</li>
  25. <li>{% trans %}On the next page, locate the fieldsets for the breakpoints provided by the selected <em>Breakpoint group</em>.{% endtrans %}</li>
  26. <li>{% trans %}For each breakpoint that you want to use, expand the corresponding fieldset. Select the <em>Select a single image style.</em> radio button under <em>Type</em> for the breakpoint, and select the <em>Image style</em> to use for images when that breakpoint is in effect. Repeat this step for the rest of the breakpoints you want to use.{% endtrans %}</li>
  27. <li>{% trans %}Click <em>Save</em>{% endtrans %}</li>
  28. <li>{% trans %}You can now use this responsive image style to format a field containing an image, in your layouts or traditional field displays. See related topics below for more information.{% endtrans %}</li>
  29. </ol>

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.