2

I have a content block in a matrix field where I'm trying to output a loop of three sub images.

enter image description here

I can get it to work using the following code:

{% case "secondaryImage" %}
<div class="container">
  <div class="row">
    {% set image = block.image.first() %}
    {% if image | length %}
    <ul class="clearfix">
    {% for image in block.image %}
      <li>
        <img class="img-responsive" src="{{ image.getUrl() }}" alt="{{ image.title }}">
      </li>
    {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>

However, I want to output responsive sizes and like to use the Imager-Craft plugin with the Craft-FocusPoint plugin for this on my other images which works really well. But, I'm running into an issue whereby it's only outputting the first image three times with the following code:

enter image description here

{% case "secondaryImage" %}
<div class="container">
  <div class="row">
    {% set image = block.image.first() %}
    {% set transformedImages = craft.imager.transformImage(image,
      [
          { width: 1440, ratio: 6/4 },
          { width: 1024, ratio: 6/4 },
          { width: 750, ratio: 4/3, jpegQuality: 60 },
      ],
      {
          format: 'jpg',
          allowUpscale: false,
          mode: 'crop',
          jpegQuality: 100,
          position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%',
          interlace: true
      }
    ) %}
    {% if image | length %}
    <ul class="clearfix">
    {% for image in block.image %}
      <li>
        <img class="img-responsive"
             src="{{ transformedImages[1].url }}"
             sizes="33vw"
             srcset="{{ craft.imager.srcset(transformedImages) }}"
             alt="{{ image.title }}"
             width="100%">
      </li>
    {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>

I think the issue is on the line src="{{ transformedImages[1].url }}" but I can't find what to change it to, to output the different images. The first thing I tried was removing the [1], but that doesn't work and gives an error of Key "url" for array with keys "0, 1, 2" does not exist.

Hopefully someone can help, otherwise I'll have to take it out of the matrix field and create a field for each image. But would prefer to keep it in the matrix if possible?

  • I should try not to use "image" in your first set as you are using it in your for loop aswell (might already do the trick) – Justin Dekkers Jun 16 '17 at 12:02
  • No, unfortunately not, but thanks for trying – mention79 Jun 16 '17 at 12:04
3

You’re currently passing in the image model you queried for using first() into the craft.imager.transformImage function, but you actually need to pass in the models that you get when looping through all images added to your block’s field.

There’s no reason to do the first() at all, and it would add additional queries.

{% if block.image|lenght %}
    {% for image in block.image %}
        {% set transformedImages = craft.imager.transformImage(image, transforms, options) %}

        <img src="{{ transformedImages[1].url }}"
            sizes="33vw"
            srcset="{{ craft.imager.srcset(transformedImages) }}">
    {% endfor %}
{% endif %}
| improve this answer | |
  • Yep worked a treat. Thanks for your help as always :) – mention79 Jun 16 '17 at 13:40

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.