srcset 的图像裁剪关系

Question

如果实施成功，img 标签的 srcset 属性关于此撇号中的响应图像。我按照建议仅包含 img 元素，而不包含多个带有背景图像样式的 img 和 div。我使用 object-position 样式来定位具有来自 focalPointToBackgroundPosition 的值的元素，这对于焦点非常有效。

不幸的是，我无法将裁剪值传递给图像 url 的 srcset 属性。我的意思是当图像由默认 src 属性和 apos.attachments.url 助手显示时图像名称的数字和结尾。

/uploads/attachments/imagename.93.10.1745.873.full.jpg

据我对 apostrophe-images/lib/api.js 中代码的理解，它应该是可能的，因为你已经使这个函数在 cropRelationship 中可用，所以我认为我的代码有问题。

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

Answer 1

我想出了解决办法。因此，如果你想使用 srcset 对图像使用裁剪，你需要将 relationship 添加到 srcset 属性，如下所示：

srcset="{{ apos.images.srcset(image.attachment, relationshiop) }}"

srcset 的图像裁剪关系

Image cropRelationship for srcset

apostrophe-cms