Paragraph image URI with image styles in paragraphs-item.tpl

Question

I have Paragraph bundle with Multi Value Image Field which is limit of 3 numbers. i tried to print these three images separately because i want to used different image styles for each images. I tried like this:

<img src="<?php print image_style_url('size_400x600', $node->field_image['und'][0]['uri']); ?>"/>
<img src="<?php print image_style_url('size_750x524', $node->field_image['und'][1]['uri']); ?>"/>
<img src="<?php print image_style_url('size_550x365', $node->field_image['und'][2]['uri']); ?>"/>

In the code it display the uri without the file name like this:

<img src="http://localhost/drupal/sites/default/files/public/styles/size_400x600/public?itok=3dkOjU1O">

What will be the correct way to do this?

Answer 1

Probably your best bet is to have something along the following in the 'paragraph--ptype.tpl.php' file:

<?php print theme('image_style', array('style_name' => 'size_400x600', 'path' => $field_image['und'][0]['uri'])); ?>
<?php print theme('image_style', array('style_name' => 'size_750x524', 'path' => $field_image['und'][1]['uri'])); ?>
<?php print theme('image_style', array('style_name' => 'size_550x365', 'path' => $field_image['und'][2]['uri'])); ?>

Where ptype is obviously the paragraph type that has this field.

I originally answered for Drupal 8 because I missed the D7 tag. Doh! I'm leaving the original answer below for reference.

---

First, a good way to apply an image style in an image field template:

{% for item in items %}
  {{ item.content|merge({'#image_style': 'size_400x600'}) }}
{% endfor %}

For your use case, you could do something like:

{% for item in items %}
  {% set style = 'size_400x600' %}
  {% if loop.index0 == 1 %}
    {% set style = 'size_750x524' %}
  {% elseif loop.index0 == 2 %}
    {% set style = 'size_550x365' %}
  {% endif %}
  {{ item.content|merge({'#image_style': style}) }}
{% endfor %}

However, since the twig code is starting to get complicated, you should probably think about handling it in a preprocess function.

Alternatively, you can do some of this at the paragraph template level (assuming the image field is on the paragraph):

{% if not paragraph.field_image.isEmpty() %}
  {% if not paragraph.field_image[0].entity.uri.isEmpty() %}
    {% set img_url = paragraph.field_image[0].entity.uri.value | image_style('size_400x600') %}
    <img src="{{ img_url }}">
  {% elseif not paragraph.field_image[1].entity.uri.isEmpty() %}
    {% set img_url = paragraph.field_image[1].entity.uri.value | image_style('size_750x524') %}
    <img src="{{ img_url }}">
  {% elseif not paragraph.field_image[2].entity.uri.isEmpty() %}
    {% set img_url = paragraph.field_image[2].entity.uri.value | image_style('size_550x365') %}
    <img src="{{ img_url }}">
  {% endif %}
{% endif %}

You will need the twig_tweak module for that. Some of the safety checks in there may be extraneous. YMMV. As before, the complex twig code means this would be good to put into a preprocess function.

Answer 2

This is working code on how to do this in Twig without contrib. You can change the '#style_name' parameter to play with making this dynamic for a multifield.

  {% for item in content.field_image['#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 %}