how to get uri of an image field in a views_view_list twig template using drupal 8?

Question

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..

Answer 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);
}

}