0

I have a two-column custom block type that has two fields field_content_left and field_content_right which are entity reference revisions to allow the use of my other paragraph types.

One of my referenced paragraph types is a media one which allows for your standard media.

For my particular case, when I create a twig template file for this specific block (block--homepage-blk-1.html.twig) and use {{ content.field_content_left }}, the image that I placed in my left column is placed and that's great.

My only issue is that it's displaying it in the default media/image format of Large (480x480).

Is there a way from within this custom block twig template for me to grab the image data and then override it with my other custom image format of homepage? I've tried different things with kint like {{ kint(content.field_content_left[0]['#paragraph'].field_media[0]) to try and access the image but can't seem to get there.

Any suggestions? Am I looking at this the wrong way? Let me know if there is a better way to go about this or if I can access all the data I need (the image/alt/image URL + overriding image style).


My code in that part of the block currently looks like this but want to override that left section in order to customize how the image will look on the homepage.

<div class="row">
    <div class="col-lg-5 mb-3 mb-lg-0">
        {{ content.field_content_left }}
    </div>
    <div class="col-lg-6 offset-lg-1 mx-auto my-auto">
        <h2 class="mb-4">{{ content.field_block_title }}</h2>
        {{ content.field_content_right }}
    </div>
</div>
2
  • Instead of using code, you could try to create a special homepage view mode for the media entity. This new view mode uses the homepage image format for the image field. After that, on the parent entity, change the view mode on the referencing field to use the homepage viewmode on the media.
    – Hudri
    Commented Sep 21, 2022 at 9:59
  • As a general scheme, in all my projects there I have lot of media entity view modes, which all have the same machine name as a corresponding (responsive) image format, and use exactly that image format as image field formatter setting. So e.g. if I create a hero_banner responsive image format, I also create a corresponding hero_banner media entity view mode. In paragraphs or custom content blocks, I select those view modes for the media field.
    – Hudri
    Commented Sep 21, 2022 at 10:03

1 Answer 1

1

Better start with the block_content entity to get the paragraph entity and then the media entity:

{% set paragraph = elements.content['#block_content'].field_content_left.entity %}
{% set media = paragraph.field_media.entity %}

Now you can render the image:

<img src="{{ file_url(media.field_media_image.entity.uri.value) }}">

For image styles you need the module Twig Tweak:

{% set image_uri = media|file_uri %}
{% if image_uri is not null %}
  {% set alt = media.field_media_image.alt %}
  {% set title = media.field_media_image.title %}
  <p>Image rendered via image.html.twig:
  {{ drupal_image(image_uri, 'thumbnail', {alt: alt, title: title}) }}
  </p>
  <p>Image tag placed directly in the block template:
  <img src="{{ image_uri|image_style('thumbnail') }}" alt="{{ alt }}" title="{{ title }}">
  </p>
{% endif %}
1
  • Thank you @4uk4! I did have the twig tweak module installed so this is exactly what I was looking for. Works exactly as needed and thanks for the multiple options. Commented Sep 21, 2022 at 14:37

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.