image.style.html.twig

---
label: 'Adding an image style'
related:
  - core.media
  - field_ui.manage_display
  - layout_builder.overview
---
{% set media_topic = render_var(help_topic_link('core.media')) %}
{% set styles_text %}{% trans %}Image styles{% endtrans %}{% endset %}
{% set styles_link = render_var(help_route_link(styles_text, 'entity.image_style.collection')) %}
<h2>{% trans %}Goal{% endtrans %}</h2>
<p>{% trans %}Add a new image style, which can be used to process and display images. See {{ media_topic }} for an overview of image styles.{% 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; {{ styles_link }}.{% endtrans %}</li>
  <li>{% trans %}Click <em>Add image style</em>.{% endtrans %}</li>
  <li>{% trans %}Enter a descriptive <em>Image style name</em>, and click <em>Create new style</em>.{% endtrans %}</li>
  <li>{% trans %}Under <em>Effect</em>, choose an effect to apply and click <em>Add</em>.{% endtrans %}</li>
  <li>{% trans %}Configure the effect on the next page. Most effects require some additional configuration after they are added.  For example, for the <em>Crop</em> effect, enter the <em>Width</em> and <em>Height</em> to crop the image to, and choose the <em>Anchor</em> point. Click <em>Add effect</em>.{% endtrans %}</li>
  <li>{% trans %}Repeat the previous two steps until all of the effects have been added.{% endtrans %}</li>
  <li>{% trans %}Drag to change the order of the effects. Then click <em>Save</em> to save the new order.{% endtrans %}</li>
  <li>{% trans %}The image style can now be used to format a field containing an image in your layouts or traditional field displays. It can also be used as part of a responsive image style. See related topics below for more information.{% endtrans %}</li>
</ol>

File

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

---
label: 'Adding an image style'
related:
  - core.media
  - field_ui.manage_display
  - layout_builder.overview
---
{% set media_topic = render_var(help_topic_link('core.media')) %}
{% set styles_text %}{% trans %}Image styles{% endtrans %}{% endset %}
{% set styles_link = render_var(help_route_link(styles_text, 'entity.image_style.collection')) %}
<h2>{% trans %}Goal{% endtrans %}</h2>
<p>{% trans %}Add a new image style, which can be used to process and display images. See {{ media_topic }} for an overview of image styles.{% 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; {{ styles_link }}.{% endtrans %}</li>
  <li>{% trans %}Click <em>Add image style</em>.{% endtrans %}</li>
  <li>{% trans %}Enter a descriptive <em>Image style name</em>, and click <em>Create new style</em>.{% endtrans %}</li>
  <li>{% trans %}Under <em>Effect</em>, choose an effect to apply and click <em>Add</em>.{% endtrans %}</li>
  <li>{% trans %}Configure the effect on the next page. Most effects require some additional configuration after they are added.  For example, for the <em>Crop</em> effect, enter the <em>Width</em> and <em>Height</em> to crop the image to, and choose the <em>Anchor</em> point. Click <em>Add effect</em>.{% endtrans %}</li>
  <li>{% trans %}Repeat the previous two steps until all of the effects have been added.{% endtrans %}</li>
  <li>{% trans %}Drag to change the order of the effects. Then click <em>Save</em> to save the new order.{% endtrans %}</li>
  <li>{% trans %}The image style can now be used to format a field containing an image in your layouts or traditional field displays. It can also be used as part of a responsive image style. See related topics below for more information.{% endtrans %}</li>
</ol>