Score:2

How to display Media image with alt attribute in paragraph twig template

tr flag

I'm trying to access alt attribute as in given example Get Media Image URL in Paragraphs Twig Template - Drupal 8

But there is an example how to access alt and title...

That's easy, too. You should use the following syntax, switching out the bold for the machine name of your image field: {{ content.field_custom_image['#items'].alt }}

this is not worked for me

Score:2
ve flag

Digging in Twig certainly works, though it does have limitations (such as translation support).

If you need custom output, you could try:

function getMediaFieldImage($mediaField = NULL, $imageStyle = NULL) {

  if ($mediaField && $mediaField->entity) {

    $langcode = \Drupal::languageManager()->getCurrentLanguage()->getId();

    // Get image.
    $mediaImage = $mediaField->entity
      ->get('field_media_image');

    // Check for translation.
    if ($mediaField->entity->hasTranslation($langcode)) {

      // Get translated image field.
      $mediaImage = $mediaField->entity->getTranslation($langcode)->get('field_media_image');
    }

    // Get image attributes.
    $alt = $mediaImage->alt;
    $width = $mediaImage->width;
    $height = $mediaImage->height;
    $title = $mediaImage->title;

    // Get image entity.
    $mediaImageEntity = $mediaImage->entity;

    // Get image mime type.
    $mediaImageMimeType = $mediaImageEntity->getMimeType();

    // Get image file URI.
    $mediaImageEntityUri = $mediaImageEntity->getFileUri();

    // Set image URL.
    $url = \Drupal::service('file_url_generator')->generateString($mediaImageEntityUri);

    // Set image style URL if not .svg.
    if ($imageStyle && $mediaImageMimeType !== "image/svg+xml") {
      $url = \Drupal::service('entity_type.manager')
        ->getStorage('image_style')
        ->load($imageStyle)
        ->buildUrl($mediaImageEntityUri);
    }

    return [
      'url' => $url,
      'alt' => $alt,
      'width' => $width,
      'height' => $height,
      'mimeType' => $mediaImageMimeType,
      'title' => $title,
    ];
  }

  return NULL;
}

Set it like:

function MYTHEME_preprocess_paragraph(&$variables) {
  $variables['mediaImage'] = getMediaFieldImage($paragraph->get('field_name'), 'medium');
}

And in Twig:

<img src="{{ mediaImage.url }}" width="{{ mediaImage.width }}" height="{{ mediaImage.height }}" alt="{{ mediaImage.alt }}" />
Score:1
tr flag

I have worked out this i have access to alt in my case its:

 {% if paragraph.field_media_image is not empty %}
    <img src="{{
      file_url(
        paragraph.field_media_image.entity.field_media_image.entity.fileuri
      )
      }}"
      alt="{{
      content.field_media_image[0]['#media'].field_media_image[0].alt
      }}" />
  {% endif %}

So solution is:

{{ content.field_media_image[0]['#media'].field_media_image[0].alt }}
Kevin avatar
in flag
You should just render the media item properly and all of this will 'just work'. `{{ content.field_media_image }}` - the rest is controlled from Manage Display on this particular media type. There is no need to manually write out img tags.
Vitaliy K avatar
tr flag
Thank you @Kevin In my case i need to do in that way. Also it renders lots undesirable divs as fields templates in action when you use {{ content.field_media_image }} in my project i need to avoid this ...
Kevin avatar
in flag
You just add a twig file for the field and media type that has no extraneous markup then.
Vitaliy K avatar
tr flag
@Kevin it will change all media files ... which i no need ... but this is usable for other tasks ... you are right :)
mbomb007 avatar
nl flag
If you want to translate in twig, just add `|t` and use `{{ content.field_media_image[0]['#media'].field_media_image[0].alt|t }}`
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.