0

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) }}" />

2 Answers 2

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 }}">
4
  • Thank you so much
    – CocoSkin
    Feb 5 at 16:42
  • The code works as expected. However, it gives an error when the image style setting is None (Original image). Is there a way to prevent that issue? The error message is "The website encountered an unexpected error. Try again later."
    – CocoSkin
    Feb 6 at 15:05
  • I will open another question regarding this error.
    – CocoSkin
    Feb 6 at 16:53
  • The new question can be found here drupal.stackexchange.com/questions/318336/…
    – CocoSkin
    Feb 6 at 17:10
0

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.

5
  • thank you for your response. It does render the right image. How can I get the image URL?
    – CocoSkin
    Jan 31 at 21:05
  • As per description & title you want to render the img along with style set in the manage display from backend correct?
    – mini
    Feb 1 at 5:30
  • As far as If it is concerned related to to get url of img i.e is already you are getting with this code: {{ file_url(paragraph.field_IMAGE_MACHINE_NAME.0.entity.uri.value) }}
    – mini
    Feb 1 at 5:34
  • My code renders the URL of the original image, and your code renders the styled image but not the URL. I need the styled image URL, the same style in the Manage Display.
    – CocoSkin
    Feb 2 at 14:40
  • I have added generic example to get style image url in twig separately, did not remove above ans sometime only need to get configured style name , want to render img in twig that can be helpful
    – mini
    Feb 3 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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