1

I have some question regarding apostrophes apostrophe-images-widgets and its srcset functionality. It's explained in you Documentation under Responsive Images. I've implemented this solution but i think I misunderstood something becuase the delivered image is still one-half size as background of the parent div focal-point-test.

I mean this:

So the actual img with srcset attribute:

{# lib/modules/my-image-widget/views/widget.html #}
<img src="{{ apos.attachments.url(data.widget._image.attachment, { size: data.options.size or 'full' }) }}" srcset="{{ apos.images.srcset(data.widget._image.attachment) }}" sizes="{{ data.options.sizesAttr or '100vw' }}" alt="{{ data.widget._image.description or data.widget._image.title }}">

Is in the the image but there is also a background defined for the parent focal-point-test with:

{% set image = apos.images.first(data.page.main) %}
{% if image %}
  <div class="focal-point-test" style="
    {%- if apos.attachments.hasFocalPoint(image) -%}
      background-position: {{ apos.attachments.focalPointToBackgroundPosition(image) }};
    {%- endif -%}
    background-image: url({{ apos.attachments.url(image, { size: 'one-half' }) }})"></div>
{% endif %}

In this case two images will overlap one correct defined image with focalPoint cropping and the actual img element which has the srcset attribute but no background-size: cover;

I found out that you are hiding the img in your image widget:

apos-slideshow .apos-slideshow-item img {
    visibility: hidden;
    width: 100%;
    height: auto;
}

So then the actual img with srcset would be hidden and the parent div in this case .apos-slideshow-item will deliver the image still in full size.

So I wanted to ask for some clarification what I have misunderstood in this case?

Felix
  • 154
  • 10

1 Answers1

1

The apostrophe-images-widgets module uses that double image technique specifically for when it contains multiple images and is acting as a slide show. That technique helps to maintain image appearance when the images are different sizes. That is why the apos-slideshow .apos-slideshow-item img CSS selector is hidden. The intention was that only the background-image would be visible.

As an aside, and as a member of the Apostrophe core team, I can tell you that this is an outdated strategy that we don't use anymore ourselves very often, if at all. But it's hard to remove or significantly change things like this once hundreds of sites are using it.

If you are making your own images widget (which would be a good idea), I would not use both the background-image wrapper and a normal img tag. Decide on which works best for your use case. There are still good reasons to use both (maybe other variations on a slider), but that depends on the project.

If your goal is to use the focal point tool, a normal img tag with a normal src attribute won't be enough. One way is to use a background-image attribute on an element that you have set the size for some other way (e.g., width and height styles) with the background-position using the focal point values. Another way is to use object-fit instead, with the focal point values in an object-position style.

alexbea
  • 1,311
  • 14
  • 25
  • 1
    Thank you very much for the clarification! That was exactly what I was wondering about. You suggested solution with `object-position` is definitely worth a try. I stumbled upon [this](https://css-tricks.com/responsive-images-css/) on my search. I think It would be possible to ad an helper to get the same values from `srcset` as `image-set` css rule. – Felix May 28 '20 at 21:34
  • Very interesting. I wasn't familiar with `image-set`. It looks like it still needs more browser support before being used in production, but it looks like a great new tool. – alexbea May 29 '20 at 12:56