2

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

2 Answers 2

2

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

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 }}
5
  • 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.
    – Kevin
    Nov 1, 2022 at 12:37
  • 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 ...
    – Vitaliy K
    Nov 1, 2022 at 13:12
  • 1
    You just add a twig file for the field and media type that has no extraneous markup then.
    – Kevin
    Nov 1, 2022 at 13:13
  • @Kevin it will change all media files ... which i no need ... but this is usable for other tasks ... you are right :)
    – Vitaliy K
    Nov 2, 2022 at 12:39
  • If you want to translate in twig, just add |t and use {{ content.field_media_image[0]['#media'].field_media_image[0].alt|t }}
    – mbomb007
    Aug 29, 2023 at 19:36

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.