How do I get the image URL with the same style setting in Manage Display?

Question

I'm creating a paragraph template. It renders images and other fields to create a layout design. While I can successfully render all fields, the challenge is to render the style applied in the Manage Display. I don't want to give a specific style name, which might change over time.

Here is my code to render the image URL. I would like to know how to render an image URL with the same style in the Manage Display setting.

<img src="{{ file_url(paragraph.field_IMAGE_MACHINE_NAME.0.entity.uri.value) }}" />

Answer 1

If you only want to get style img url can use paragraph preprocess hook like this:

  use Drupal\Core\Entity\Entity\EntityViewDisplay;
  use Drupal\image\Entity\ImageStyle;

  function Mymodulename_preprocess_paragraph(&$vars) {
    $paragraph = $vars['paragraph'];
    if($paragraph->field_img[0]){
      // Get image style name
      $component = EntityViewDisplay::load('paragraph.sing.default')->getComponent('field_img');
      $img_style = $component['settings']['image_style'];
      $img = $paragraph->field_img[0]->entity->getFileUri();
      $style_img_url = ImageStyle::load($img_style)->buildUrl($img);
      $vars['style_img_url'] = $style_img_url;
    }
  }

Note: In this paragraph.sing.default: paragraph denotes: paragraph entity, sing denotes: machine name of paragraph, default denotes: view mode

Then simply need to add style_img_url in override paragraph.html.twig like this :

<img src="{{ style_img_url }}">

Answer 2

You need to get image style in paragraph preprocess hook:

use Drupal\Core\Entity\Entity\EntityViewDisplay;

function Mymodulename_preprocess_paragraph(&$vars) {
  $component = EntityViewDisplay::load('paragraph.sing.default')->getComponent('field_img');
  $image_style = $component['settings']['image_style'];
  $vars['img_style'] = $image_style;
}

Note: In this paragraph.sing.default: paragraph denotes: paragraph entity, sing denotes: machine name of paragraph, default denotes: view mode

Then need to add following snippet code in override paragraph.html.twig as per drupal standard

    {% set image = {
      '#theme':      'image_style',  
      '#style_name': img_style, 
      '#uri': paragraph.field_img.0.entity.uri.value, 
      '#alt': paragraph.field_img.0.alt, 
      '#attributes': { class: img_style },
      } 
    %}

    {# now print the image style, it display image with respective img style configured from mange display. #}
    <div>{{ image }}</div> 

Note: Here you can see img_style variable set in paragraph preprocess hook because field format display options are components of view modes, stored in the config entity EntityViewDisplay, that can not be accessed from field in paragraph twig directly.

So to fetch the value of image style configured in manage display at the backend , added paragraph hook.