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

---
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>