0

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?

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.

  • Note, the OP tagged this as Drupal 7 so I'm not sure your D8 Twig code will apply here. – Danny Englander Sep 19 '18 at 14:02
  • Doh! I missed the D7 tag. Answer has been updated. – Robert Wohleb Sep 20 '18 at 22:49
0

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 %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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