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 [];
}
}
}
@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