Im working in Drupal 8 and I have a paragraph type that contains a title and an image and I am trying to pass it through the preprocessor hook so I can set it inside a html template. For testing purposes all I have on my template is div that calls the image variable. Im more worried about the pre_processor than I am the html


function theme_preprocess_node(&$variables) {
  if ($variables['node']->getType() == 'landing_page') {
    $paragraphs = $variables['node']->field_section->getValue();
    $section = [];
    foreach ($paragraphs as $key => $paragraph) {
      $p = Paragraph::load($paragraph['target_id']);

      echo "<pre>".print_r($p,TRUE)."</pre>";

      switch ($p->getType()) {
        case 'tabbed_body':
          foreach ($p->field_body_tab_content->getValue() as $tab) {
            $t = Paragraph::load($tab['target_id']);
            $title = $t->field_body_tab_title->getValue();
            $content = $t->field_tab_content->getValue();
            $image = $t->field_body_image->getValue();
            $section[$key]['tabbed_body'][] = [
              'title' => $title[0]['value'],
              'content' => $content[0]['value'],
              'image' => $image[0],
    $variables['sections'] = $section;

Image Settings: Tab_Image Display Settings

  • This might not be the best approach, see the discussions in this threads drupal.stackexchange.com/questions/269468/…
    – 4uk4
    Nov 7, 2018 at 21:17
  • @4k4 I just want the users to be able to provide the images, and text then from there use preprocessor hook to get it to the template so I can format it the way I want. There can be one picture per tab. Is it really that hard to do it that way?
    – B. Cratty
    Nov 7, 2018 at 21:52
  • @4k4 are you saying on the template file I should just do <img src = "{{ content.field_body_image }}"></img>?
    – B. Cratty
    Nov 7, 2018 at 21:55
  • {{ content.field_body_image }} should render to an <img ... tag automatically, based on your field display setting.
    – Kevin
    Nov 7, 2018 at 22:08
  • @Kevin I see no option for field display setting on the page, would you like to see screenshots of what I do see? Currently I am in the following breadcrumb path Home->Administration->structure->paragraph types->Body tab->Body Tab I am currently looking at the edit tab_image settings for Body Tab
    – B. Cratty
    Nov 7, 2018 at 22:16

1 Answer 1


You can pass only the image uri, and render image using it in the twig. Try the following suggestion: In your loop try to get image as the following:

  $image_field_values= $t->field_body_image->getValue();
   * @TODO: if you have multiple values loop through them i will test just by the first
  $image_target_id = $image_field_values[0]['target_id'];
  $image_file = File::load($image_target_id);
  $section[$key]= [
    'image_uri' => $image_file->getFileUri()

In your twig will be something like:

<img src="{{ file_url(section[0]['image_uri'])}}" >

Don't forget use Drupal\file\Entity\File;.

  • This works!! Sorry I wasted my bounty on another question so I dont have enough rep to upvote you
    – B. Cratty
    Nov 9, 2018 at 0:55
  • it's okay, i'm glad that help you. market it as the accepted answer in case someone needs it.
    – berramou
    Nov 9, 2018 at 8:48

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.