Search code examples
apostrophe-cms

Image cropRelationship for srcset


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

Solution

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