1

Please forgive me if this is an idiot question. How do I obtain 'crop' and 'scale' with Image Optimize?? I would like a page of equally sized images (height & width) which are cropped from the center. This is easy with a Craft transform .url('thumbs'), but what do I need to do to the following code to achieve this?

         {% set optimizedImages = works.artwork.one().fd_optimizedThumbs %}

         <img class="lazyload" src="{{ optimizedImages.placeholderImage() }}"
         data-srcset="{{ optimizedImages.srcset() }}"
         sizes="100vw" />

Many thanks

1

Have you checked the documentation for your plugin? You can configure image variants and force specific aspect ratios in the field settings. If you don't want to configure those sizes for the entire field, but only in a specific place in your template, see dynamically creating optimized image variants in the documentation.

I haven't used this plugin before, but based on your example code and the documentation linked above, something like this should work:

{% set optimizedImages = craft.imageOptimize.createOptimizedImages(
    works.artwork.one(),
    [
        {
            'width': 200,
            'useAspectRatio': true,
            'aspectRatioX': 1.0,
            'aspectRatioY': 1.0,
            'retinaSizes': ['1'],
            'quality': 82,
            'format': 'jpg',
        },
    ]
) %}

2
  • 1
    Hi MoritzLost, Thanks for your reply. I read that creating variants in the template would slow things down. I have read the docs but I was struggling to find how it was done in field settings. I have now realised it's possible to have multiple Image Optimize field types for different jobs (thumbnails, natural...) on the same page. Once I discovered this I got it working.
    – Martin
    Jul 15 at 8:25
  • @Martin Glad I could help! If your issue is solved, would you mind marking my answer as accepted? Thanks.
    – MoritzLost
    Jul 15 at 9:42

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.