Skip to content

Instantly share code, notes, and snippets.

@jerbob92
Created October 28, 2015 13:22
Show Gist options
  • Save jerbob92/dda50c579d2fcb31cecd to your computer and use it in GitHub Desktop.
Save jerbob92/dda50c579d2fcb31cecd to your computer and use it in GitHub Desktop.
Render responsive image into a block Drupal 8 Example
<?php
/**
* @file
* Contains Drupal\mymodule\Plugin\Block\ImageRenderExampleBlockResponsive.
*/
namespace Drupal\mymodule\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\file\Entity\File;
/**
* Provides a 'ImageRenderExampleBlockResponsive' block.
*
* @Block(
* id = "mymodule_imagerenderexampleblockresponsive",
* admin_label = @Translation("MyModule Image Render Example Responsive"),
* )
*/
class ImageRenderExampleBlockResponsive extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
// Load file with file id 1.
$file = File::load(1);
if ($file) {
$variables = array(
'responsive_image_style_id' => 'responsive_thumbnail',
'uri' => $file->getFileUri(),
);
// The image.factory service will check if our image is valid.
$image = \Drupal::service('image.factory')->get($file->getFileUri());
if ($image->isValid()) {
$variables['width'] = $image->getWidth();
$variables['height'] = $image->getHeight();
}
else {
$variables['width'] = $variables['height'] = NULL;
}
$logo_build = [
'#theme' => 'responsive_image',
'#width' => $variables['width'],
'#height' => $variables['height'],
'#responsive_image_style_id' => $variables['responsive_image_style_id'],
'#uri' => $variables['uri'],
];
// Add the file entity to the cache dependencies.
// This will clear our cache when this entity updates.
$renderer = \Drupal::service('renderer');
$renderer->addCacheableDependency($logo_build, $file);
// Return the render array as block content.
return [
'logo' => $logo_build,
];
} else {
// Image not found, return empty block.
return [];
}
}
}
@frob
Copy link

frob commented Feb 26, 2016

This is a very fragile way of doing this. For example, even if the image comes back as inValid you will still attempt to build the image. This will cause the site to throw an error and not work.

@kamalkech
Copy link

render $logo_build in twig ?

@4aficiona2
Copy link

4aficiona2 commented Oct 4, 2016

if you return the array without an identifier like below:
return array( $logo_build );
the render array gets output directly and in my case the picture element gets rendered where I placed it within my Display Suite (DS) layout.

The context where I use this is also in the build function but in the realm of DsFieldBase. Because I need the randomness (multivalue image field where I pick a random one on each request) a can not use the cacheability stuff.

class TeaserboxRandomImage extends DsFieldBase {
    public function build() { 

    ...

    // return responsive image array
    return array(
      $random_teaser_image
    );
  }
}

The full class is available as a gist over at my gists

@ichionid
Copy link

In order to retrieve the html:
$responsive_image = $renderer->renderRoot($logo_build);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment