1

Have read this article, but still having issues.

Craft 3.0.4 Imager 2.0.0

My template code is:

{% set image = block.image.one() %}
{% set focalPoint = image.focalPoint | default("50% 50%") %}

{# 
  // set transform for floated images
  // override in full width
#}
{% set transformedImages = craft.imager.transformImage(image,
    [
        { width: 400, ratio: 4/3, jpegQuality: 85 },
        { width: 640, ratio: 4/3, jpegQuality: 85 },
    ],
    {
        format: 'jpg',
        allowUpscale: false,
        mode: 'crop',
        jpegQuality: 80,
        interlace: true,
        position: focalPoint,
    }
) %}


{# determine if image floats or not #}
{% if block.imageFormat == "left" %}
  {% set imageClass = "floated-left" %}
{% elseif block.imageFormat == "right" %}
    {% set imageClass = "floated-right" %}
{% else %}
    {# full width #}
    {% set imageClass = "full-width" %}
{% endif %}
{# end floats or not #}

{# full width image here #}
{% if block.imageFormat == "fullWidth" %}

{% else %}
{# floated images here #}
  <img 
    src="{{ craft.imager.base64Pixel(16, 9) }}" 
    sizes="(max-width: 640px) 640w, (min-width:641px) 400w" 
    srcset="{{ craft.imager.srcset(transformedImages) }}" 
    class="{{ imageClass }}"
    >
{% endif %}

What I expect to happen is that at widths smaller than 640px an image with a width of 640px is served up, at widths 641px and larger and image of 400pxs is served up.

However at large widths I see the 640px width image.

The outputted code on the front end is:

<img 
  src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%279%27%20style%3D%27background%3Atransparent%27%2F%3E"

  sizes="(max-width: 640px) 640w, (min-width:641px) 400w" 

  srcset="/imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_d5a1008e3f8fb9f7c44fa92474183c3e.jpg 400w, /imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_3edaa49114a08f6f3438bb6daad2e68a.jpg 600w, /imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_7c3d51f40436135917e37f29c276802d.jpg 640w"

  class="floated-left">

Not sure what I'm doing wrong. Please advise.

1

It looks like the sizes attribute needs to be tweaked. Absolute image sizes need to be specified in px units, not w.

<img src="{{ craft.imager.base64Pixel(16, 9) }}" 
     sizes="(min-width:641px) 400px, 100vw" 
     srcset="{{ craft.imager.srcset(transformedImages) }}" 
     class="{{ imageClass }}">

The way the browser reads sizes is left to right and picks the first match. So the assumption would be that if the viewport width isn't greater or equal to 641px, then it must be smaller than 641px. So there's no need for (max-width: 640px). The last value is the default size.

Alternately, this could be expressed by declaring the smallest viewport size to largest like this:

sizes="(max-width:640px) 100vw, 400px"

Also, instead of saying "when the viewport is smaller than 640px, use the 640px image", e.g. (max-width: 640px) 640px, what you probably want is 100vw. I'm assuming the image doesn't always stay 640px even when the screen gets smaller. If your design is responsive, the image will scale down with the screen width.

Using 100vw means that when your viewport is 400px wide or smaller, the browser can now choose to download the 400px wide image version. Or if the viewport is 640px wide, the 640px wide image is a better match.

Here's an example on Codepen: https://codepen.io/alexroper/pen/VxGgLj

Another possible reason you're not seeing the 400px size is if you're using a hi-dpi, "Retina" display or similar 4k monitor. The browser picks the best image to display from the available ones in srcset. If you specified the target image size as 400px (CSS reference pixels), but you're display is 2x "Retina" display, the browser will favor using the higher resolution image. The high pixel density of a 2x display can fit 800 pixels in a 400-pixel space. 640px isn't as large as 800px, but it's better than 400px so the browser would choose that image.

So even tho an iPhone 5 has a screen size of 320 × 568 in css reference pixels, the physical pixels are double that (640×1136). Safari will prefer to download the higher res 640px image over the 400px one in the img tag example above.

| improve this answer | |

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.