如何在 Drupal 8 树枝模板中使用图像样式？

Question

I am trying to print an image using an image style that I've created in my drupal 8 theme.

I can print an image in a template by doing {{ content.banner }} but how do I apply the image style to that image? I tried looking for documentation but there doesn't seem to be any out there.

Answer 1

Currently drupal 8 doesn't have special filter for applying image style. Instead you can set new attribute for your image like this:

{% set image = image|merge({'#image_style': 'thumbnail'}) %}

Then simply output your updated image:

{{ image }}

PS . You can do {{ dump(image) }} to see what attributes you can update

Answer 2

I resolve this by creating my own Twig Filter .

You can do the same by creating your own module exposing this Filter .

Feel free to re-use it.

Code

namespace Drupal\twig_extender\TwigExtension;

use Drupal\node\Entity\Node;
use Drupal\Core\Link;
use Drupal\Core\Url;

use Drupal\file\Entity\File;
use Drupal\image\Entity\ImageStyle;

class Images extends \Twig_Extension {
     /**
     * Generates a list of all Twig functions that this extension defines.
     */
     public function getFunctions(){
         return array(
             new \Twig_SimpleFunction('image_style', array($this, 'imageStyle'), array('is_safe' => array('html'))),
         );
     }

    /**
    * Gets a unique identifier for this Twig extension.
    */
    public function getName() {
        return 'twig_extender.twig.images';
    }


     /**
      * Generate images styles for given image
      */
      public static function imageStyle($file_id, $styles) {
          $file = File::load($file_id);
          $transform = array();
          if (isset($file->uri->value)) {
              $transform['source'] = $file->url();
              foreach ($styles as $style) {
                  $transform[$style] = ImageStyle::load($style)->buildUrl($file->uri->value);
              }
          }
         return $transform;
      }
}

Usage

{% set transform = image_style(image.entity.fid.value, ['thumbnail', 'large']) %}

Then you have access to the source image & styles

{{ transform.source }}
{{ transform.thumbnail }}
{{ transform.large }}

Hope it will help you guy !

Answer 3

How to do this without contrib module: make it your own render array.

{% for item in content.field_images['#items'] %}
  {% set image = {
    '#theme':      'image_style',
    '#style_name': 'medium',
    '#uri':        item.entity.uri.value,
    '#alt':        item.alt,
    '#width':      item.width,
    '#height':     item.height
  } %}
  {{ image }}
{% endfor %}

Answer 4

It's probably worth mentioning, that it's useful to first question your assumption. Do you really need to do this in Twig? If you can just configure a view-mode (or Views field) to render the image field with the appropriate (responsive) image style, that would be much simpler.