If Implemented successful the srcset
attribute for img
tags regarding this question about responsive images in apostrophe. I followed the suggestion to include only img
elements and not mutliple img and div's with background-image styles. I used the object-position
style to position elements with values from focalPointToBackgroundPosition
that works pretty good for focal points.
Unfortunately I was not able to pass the cropping values to the image url's in srcset
attribute. I mean the numbers and the end of an image name when the image is shown by the default src
attribute with apos.attachments.url
helper.
/uploads/attachments/imagename.93.10.1745.873.full.jpg
As far as I understood the code in apostrophe-images/lib/api.js
it should be possible because you made this function already available with cropRelationship
so I think there is something wrong in my code.
<img data-image
src="{{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }}"
srcset="{{ apos.images.srcset(image.attachment) }}"
sizes="(max-width:600px) 120vw, 58vw"
alt="{{ image.title }}"
{%- if apos.attachments.hasFocalPoint(relationship) -%}
style="object-position: {{ apos.attachments.focalPointToBackgroundPosition(relationship) }}"
{%- endif -%}
>
{{ apos.area(piece, 'content', {
limit: 2,
widgets: {
'card': {
size: 'full'
aspectRatio: [ 2, 1 ],
controls: {
cloneable: false,
removable: true,
position: 'top-right'
}
}
}
}) }}
I figured the solution. So if you want to use cropping for images with srcset you need to add relationship
to srcset
attribute like this:
srcset="{{ apos.images.srcset(image.attachment, relationshiop) }}"