I have an Twig extension that applies image style to an image and provides a URL for the processed image. The extension looks like this:

protected function setImageStyleUrl($url_field_value, $image_style) {
  $url = ImageStyle::load($image_style)->buildUrl($url_field_value);
  return $url;

And I am using it in the template this way:

<img src="{{ set_image_style_url(paragraph.field_image.entity.fileuri, ‘500x200’) }}" alt="{{ paragraph.field_image.alt }}"/>

However, since the image style is defined in the template in my example it is not possible to change it via the menus in the display settings anymore (Structure > Paragraph types > Manage display). So the only way to change it is to edit the twig extension again.

Finally, I want that it will become possible to change the image style from the menus and I am wondering if it is possible to get the image style programmatically from configuration settings instead of writing, for example, ‘500x200’ in my sample? Or maybe does another approach exist?

Important conditions:

  • I cannot use Twig Tweak, Bamboo Tweak and another similar modules.
  • I cannot use {{ content.field_image }} approach (though it works)
  • Welcome to Drupal Answer :) What do you mean by the image style is hardcoded therefore you can not access it in the display settings? Please update your question for clarification. Many thanks – leymannx Sep 10 at 4:28
  • @leymannx Thank you very much for your reply. I have edited my question. Regarding the topic, I mean that after I define the image style in the template it becomes impossible to change it from the administrative menus. So instead of defining it in the template (instead of writing ‘500x200’ in my case), I want to put the value that I set in the administrative menu. So I need that a user can change it without editing the template. I hope I could explain my problem. – Sergey Sep 10 at 5:28
  • The entity paragraph and its field values don't contain any information about the field formatter settings. Normally you would use {{ content.field_image }}. If you don't want to use it, for whatever reasons, load the display mode and look for the setting image_style, see drupal.stackexchange.com/questions/281836/… – 4k4 Sep 10 at 6:33
  • @4k4 Thank you very much. I think that the solution you offered in the attached link is good for me. – Sergey Sep 10 at 7:51

This is a code snippet from one of my template preprocess hooks, I think this should work for you too:

function THEME_preprocess_ENTITY(array &$variables) {
  $display = \Drupal::entityTypeManager()
  $displayComponents = $display->getComponent('FIELD_FOO');
  // here we're fetching the image style from the field
  $viewMode = $displayComponents['settings']['view_mode'];
  // and here we're passing the variable to the template
  $variables['MY_IMAGE_STYLE'] = $viewMode;
  // do somehting like this in your Twig template
  // {{ set_image_style_url(ENTITY.FIELD_FOO.entity.fileuri, MY_IMAGE_STYLE) }}

Replace the uppercase words with your values

  • Can you please extend your answer a bit and explain how adding this bare preprocess function might solve OP's issue? – leymannx Sep 10 at 7:26
  • @Hudri I will take a look at your code, but I think that I will use the solution offered by 4k4 earlier. Thank you. – Sergey Sep 10 at 7:55
  • added some comments to the code – Hudri Sep 10 at 8:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.