By jcrump@tulane.edu on

After several days of spinning my wheels, I'm hoping somebody can tell me how to render an image in the drupal 8 theme preprocess file.

The goal is to insert the image from an image field into the body content of a node. I'd like to take article layout away from the content producers and create the desired layout in preprocess.

I've had no problem manipulating text fields, but images have proven difficult.

function myTheme_preprocess_node(&$variables) {
if(isset($variables['content']['field_image_1'][0]['#item'])){
$body = @$variables['content']['body'][0]['#text'];
$body .= @$variables['content']['field_image_1_caption'][0]['#text'];
unset($variables['content']['field_image_1_caption'][0]['#text']);
@$variables['content']['body'][0]['#text'] = $body;
}
}

Any idea how to access and render an image and then clear it?

Thanks, James

⋅ Categories: Drupal 8.x

Comments

VM’s picture

VM commented

The question posed is better served in the 'module development and code questions' forum. Please edit the opening post and move it. Thanks.

mahpari’s picture

mahpari commented

Hi there,
Is there any solution for this problem!? thanks for sharing any solution

Regards

Jeff Burnz’s picture

Jeff Burnz commented

Honeslty I don't really understand the question.

If you want to just print seperate fields, just print them in the template {{ content.field_image }} etc.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
mahpari’s picture

mahpari commented

Thanks for your reply.
I know how to print single variables using Twig but my problem is how to theme image field with multiple images!? How to make an exclusive image gallery for each node/single article in drupal 8!?

Regards

Jeff Burnz’s picture

Jeff Burnz commented

For me the question is too vague - I could only answer you theme with CSS, and perhaps some JS, to create a gallery. Otherwise check if there is a module that does what you want. If you want instructions, code examples etc you have to be much more specific about what you are trying to achieve, including steps you have taken to achieve it.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
mahpari’s picture

mahpari commented

Okay.
Could you please just tell me what is replacement for below code in drupal 8:

function mytheme_preprocess_node(&$vars) {

$node = $vars['node'];
$node->field_images_gallery['und'][0]['uri'];

}

Jeff Burnz’s picture

Jeff Burnz commented

That has already been answered a number of times both here in this forum and stackexchange (Drupal Answers).

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
mahpari’s picture

mahpari commented

I don't know why I can not find any page that has answered this question. Could you please share a link with me!? Thanks a lot in advance

Jeff Burnz’s picture

Jeff Burnz commented

See this issue http://drupal.stackexchange.com/questions/137319/getting-the-image-url-f...

...two methods are described and both work.

You can do this in twig:

<img src="{{ file_url(node.field_image.entity.fileuri) }}" />

See: https://www.drupal.org/node/1696760 regarding twig functions and filters.

=====================

Second you can do this in preprocess e.g.:

function HOOK_preprocess_node(&$variables) {
  $node = $variables['node'];
  $variables['image_url'] = file_create_url($node->field_image->entity->getFileUri());
}

Then in node template:

<img src="{{ image_url }}" />

However, both these will link to the raw image, no image style, also I tend to think this is theming on the wrong level, i.e. you should be theming the FIELD not the NODE. What I mean is theme at the field preprocess or template level, take a look at this issue regarding field templates and image styles:

http://drupal.stackexchange.com/questions/185532/get-an-image-with-style...

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
mahpari’s picture

mahpari commented

Thanks a lot Jeff for spending time to share some very useful links with me. Really appreciated!

Best Regards,

jlbrewster’s picture

jlbrewster commented

@Jeff Thanks for being a helpful community member.

I know this post is old, but I am trying to do what this code is doing, except with a view (block output).  I have a grid of links that have background image on them.  I tried the background image modules, but those don't seem to do what I need them to.  I have even done this with Paragraphs, using a paragraph hook (code from on of Jim Birch's Paragraph tutorials):

function HOOK_preprocess_paragraph__myparagraphtype(&$variables) {
  $paragraph = $variables['paragraph'];
  if (!$paragraph->field_my_image_field->isEmpty()) {
    $image = $paragraph->field_my_image_field->entity->url();
    $variables['attributes']['style'][] = 'background-image: url("' . $image . '");';
    $variables['attributes']['style'][] = 'background-size: cover;';
    $variables['attributes']['style'][] = 'background-position: center center;';
  }
}
(Which works brilliantly, but this project is not using Paragraphs).

It would seem simple to adapt this function to the proper hook, but I am stuck..(which hook? Do I use a block hook, an entity type hook, or a field hook)?

(I can't use a node hook, because the user must be able to choose their own image (used as background image for the other field in the bundle) dynamically, and have this block display on any page..(with a grid of link/background elements)).