How to render a media entity image (that uses a focal point image style) inside a paragraph twig file?

Question

Originally I used a typical image field in my paragraph, now with the new updates for the media module I would like to use the image library to upload and reuse media entity images. I use focal point for my image styles, in the paragraph I use, the user can choose between a couple of image styles.

preprocess code for passing image styles to twig template:

function tekst_en_afbeelding_preprocess_paragraph__tekst_en_afbeelding(&$variables) {
    if (isset($variables['elements']['field_image']['#items'])) {
      $variables['img_223_x_308'] = ImageStyle::load('223_x_308')->buildUrl($variables['elements']['field_image']['#items']->entity->uri->value);
      $variables['img_326_x_450'] = ImageStyle::load('326_x_450')->buildUrl($variables['elements']['field_image']['#items']->entity->uri->value);
      $variables['img_560_x_308'] = ImageStyle::load('560_x_308')->buildUrl($variables['elements']['field_image']['#items']->entity->uri->value);
      $variables['img_1280_x_703'] = ImageStyle::load('1280_x_703')->buildUrl($variables['elements']['field_image']['#items']->entity->uri->value);
  }
}

This code does not work anymore for the media entity image.what do I need to change for this to work?

Answer 1

You'll run into troubles with this technique, because Media images are entities on their own, and have their own cache settings. So if you change the image style on paragraph level, the embedded media image will not know anything of this and instead returns the first, cached size.

Instead create multiple display view modes for your media entities, and let your editors choose the view mode on paragraph level. Below is the code I'm using in my own projects

function wtfrontend_base_preprocess_paragraph__image(array &$variables) {
  $paragraph = $variables['paragraph'];

  if ($paragraph->hasField('field_image_viewmode_image')) {
    $imageViewMode =  $paragraph->field_image_viewmode_image->value;
    if (isset($variables['content']['field_image']['0']['#view_mode'])) {
      $variables['content']['field_image']['0']['#view_mode'] = $imageViewMode; 
      unset($variables['content']['field_image']['0']['#cache']['keys']);
    }
  }
}

Render the image normally with {{ content.field_image }}

Answer 2

I've found the solution myself:

function tekst_en_afbeelding_preprocess_paragraph__tekst_en_afbeelding(&$variables) {

   if (isset($variables['elements']['field_media_entity_img']['#items'])) {
      $media_field = $variables['elements']['field_media_entity_img'];
      $media_entity = $media_field[0]['#media'];
      $field_media_image = $media_entity->field_media_image;
      $uri = $field_media_image->entity->uri->value;
      $variables['img_223_x_308'] = ImageStyle::load('223_x_308')->buildUrl($uri);
      $variables['img_326_x_450'] = ImageStyle::load('326_x_450')->buildUrl($uri);
      $variables['img_560_x_308'] = ImageStyle::load('560_x_308')->buildUrl($uri);
      $variables['img_1280_x_703'] = ImageStyle::load('1280_x_703')->buildUrl($uri);
    }
}