Loading...

Generating Image URLs in Drupal | Unleashed Technologies

Generating Image URLs in Drupal

Using a background image can be a great way to style hero banners or grid elements that need to resize based on content. However, with the introduction of the Media module, accessing the image file path has become difficult, since the images are rendered as media entities instead of a simple file.

There is a way, however, to generate image URLs in Drupal by using the preprocess that we have provided below:

The Preprocess

// Creating a background image URL

// Classes we will need to extend.
use Drupal\media\Entity\Media;
use Drupal\file\Entity\File;
// Only add if you need to generate an image URL with an image style
use Drupal\image\Entity\ImageStyle;
function theme_preprocess_node(&$variables) {
// Check that you are on the correct node.
if ($node_type == 'my_content_type'){
 // Check if your image field has content.
 if(isset($variables['node']->get('field_cover_image')->getValue()[0]['target_id'])){
   // Get the reference id of the media object ID.
   $media_id = $variables['node']->get('field_cover_image')->getValue()[0]['target_id'];
   // Load the media object.
   $media = Media::load($media_id);
   // Get the ID of  the media object image field. My machine name is "image", but yours could be different.
   $media_field = $media->get('image')->getValue()[0]['target_id'];
   // Load the image file.
   $file = File::load($media_field);
   // Get URI of the image file.
   $file_uri = $file->getFileUri();
   // With the URI, generate a url for non-image style background image.
   $image_path = file_url_transform_relative(file_create_url($file_uri));
   // Create the twig variable to be used in the node.html.twig template file as the background image inline style.
   $variables['background_image_url'] = $image_path;

 }
}
}

It is important to note that the code above will give you an image without any image styles. If you would like the image style applied to the image, you would need to replace the $image_path variable with the following code:

$url_with_style = ImageStyle::load('magazine_cover_large')->buildUrl($file_uri);

Twig Template

In your node.html.twig file, add an inline style for the background image URL.

<div class="background-image" style="background-image: url({{ background_image_url }})"></div>

Responsive Background Image URLs

Generating a responsive background image URL is difficult, you need to generate both a media query in the <head> as well as the image URL. Because of this, I would recommend using the Background Image Formatter module (be sure to enable the Responsive Background Image) submodule. This module will allow you to attach a responsive background image to a twig template, while it generates the media query in the <head> of your site.

There are two ways to use this module:  

Use the Drupal admin to configure where the background image will appear: https://www.drupal.org/project/bg_image_formatter

Use a preprocess to generate the URL and the media query: https://www.drupal.org/docs/8/modules/responsive-background-image/how-to-use-the-responsive-background-image-module