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?

  • I'm using Drupal 8.6.3 Nov 21, 2018 at 8:35

2 Answers 2


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; 

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


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);

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.