Image cropRelationship for srcset

Question

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'
        }
      }
    }
}) }}

score 0 · Accepted Answer · answered Jun 02 '20 at 09:29

0

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) }}"

answered Jun 02 '20 at 09:29

Felix

154
10

If you find gaps in the documentation, please create an issue (or PR) in the documentation repo so we can be sure to clear that up. The core team should be doing a bunch of documentation work fairly soon. – alexbea Jun 02 '20 at 13:34

Image cropRelationship for srcset

1 Answers1