1

I have a portfolio page for a client that has a simple two column grid of images. However, I'd like to set it up so that it creates responsive images via the excellent Imager plugin.

I have the following code below so far. However, it's only outputting the first image from the Matrix. So I need it to output all the images the client drops in.

So need a little bit of help to tweak the code to output all images please?

{% for block in entry.portfolio %}
    {% switch block.type %}

    {% case "images" %}
    {% set image = block.portfolioImage.first() %}
    {% set transformedImages = craft.imager.transformImage(image,
      [
          { width: 1200, ratio: 4/3 },
          { width: 992, ratio: 4/3 },
          { width: 768, ratio: 4/3, jpegQuality: 60 },
      ],
      {
          format: 'jpg',
          allowUpscale: false,
          mode: 'crop',
          jpegQuality: 80,

          interlace: true
      }
    ) %}
    {% if image | length %}
    <img class="img-responsive"
         src="{{ transformedImages[1].url }}"
         sizes="50vw"
         srcset="{{ craft.imager.srcset(transformedImages) }}"
         alt="{{ image.title }}">
    {% endif %}

    {% endswitch %}
{% endfor %}
2

Assuming it's the field portfolioImage that can have multiple assets, try this:

{% for block in entry.portfolio %}
    {% switch block.type %}

    {% case "images" %}

    {% for image in block.portfolioImage %}
        {% set transformedImages = craft.imager.transformImage(image,
            [
                { width: 1200, ratio: 4/3 },
                { width: 992, ratio: 4/3 },
                { width: 768, ratio: 4/3, jpegQuality: 60 },
            ],
            {
                format: 'jpg',
                allowUpscale: false,
                mode: 'crop',
                jpegQuality: 80,
                interlace: true
            }
        ) %}
        <img class="img-responsive"
             src="{{ transformedImages[1].url }}"
             sizes="50vw"
             srcset="{{ craft.imager.srcset(transformedImages) }}"
             alt="{{ image.title }}">
    {% endfor %}

    {% endswitch %}
{% endfor %}
| improve this answer | |
  • Thanks André, seems obvious now I see it. As I'd forgot to put in the for loop. Appreciate the help. – mention79 Jun 9 '17 at 11:07

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.