1

I have a twig template generated from views-view-list.html.twig!
Its a view uses ECK entities.

Available variables:
- attributes: HTML attributes for the container.
- rows: A list of rows for this list.
  - attributes: The row's HTML attributes.
  - content: The row's contents.
- title: The title of this group of rows. May be empty.
- list: @todo.
  - type: Starting tag will be either a ul or ol.
  - attributes: HTML attributes for the list element.

I would need to access the image field of my eck entity (field_background_image) in this template, because it is necessary for the slideshow logic to display the thumbnail. I tried a lot of different ways.

This is how my template looks like

<div class="slider-container">
  <div class="slider-fullwidth">
    <{{ list.type }}{{ list.attributes }}>

      {% for row in rows %}
      <li{{ row.attributes }}
        data-thumb="{{ row.content['#slider'].field_background_image[0].??? }}"
        data-title="{{ row.content['#slider'].title[0].value }}"
        data-transition="slideup">{{ row.content }}</li>
      {% endfor %}

    </{{ list.type }}>
  </div>
</div>

I can access the title property this way (is there a better way?):

{{ row.content['#slider'].title[0].value }}

I would like to access the field_background_image property of my entity.

row.content['#slider'].field_background_image[0] is a Drupal\image\Plugin\Field\FieldType\ImageItem. I would need to get the uri value of the field_background_image field so that I can use the ImageStyle on it:

ImageStyle::load($imageStyle)->buildUrl($imageField[0]['#item']->entity->uri->value)

I don't find this in the tree..

1 Answer 1

1

Finally this was my solution.

The template:

<div class="slider-container">
  <div class="slider-fullwidth">
    <{{ list.type }}{{ list.attributes }}>

      {% for row in rows %}
      <li{{ row.attributes }}
        data-thumb="{{ row.content['#slider'].field_background_image|imagestyleurl2('slider_thumbnail') }}"
        data-title="{{ row.content['#slider'].title[0].value }}"
        data-transition="slideup">{{ row.content }}</li>
      {% endfor %}

    </{{ list.type }}>
  </div>
</div>

Twig filter:

class ImageStyleTwig extends \Twig_Extension {

/**
 * Generates a list of all Twig filters that this extension defines.
 */
public function getFilters()
{
  return [
    new \Twig_SimpleFilter('imagestyleurl1', array($this, 'imageStyleUrl1')),
    new \Twig_SimpleFilter('imagestyleurl2', array($this, 'imageStyleUrl2')),
  ];
}


/**
 * Gets a unique identifier for this Twig extension.
 */
public function getName()
{
  return 'imagestyle.mymodule_general.twig_extension';
}


/**
 * Get the url of the image by an image style
 */
public static function imageStyleUrl1($imageField, $imageStyle)
{
  return ImageStyle::load($imageStyle)->buildUrl($imageField[0]['#item']->entity->uri->value);
}


public static function imageStyleUrl2($imageField, $imageStyle)
{
  return ImageStyle::load($imageStyle)->buildUrl($imageField->entity->uri->value);
}

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.