Information about srcset#275
Information about srcset#275kafkiano wants to merge 1 commit intoapostrophecms:mainfrom kafkiano:patch-1
Conversation
Added information about srcset helper
| > | ||
| ``` | ||
|
|
||
| The `apos.images.srcset` helper even offers cropping. If you add `relationship` you can use `apostrophe-attachment` cropping functions effectively. |
There was a problem hiding this comment.
Is this really necessary? It is not necessary for the src attribute. For convenience the relationship is automatically propagated to a property of the attachment as long as it is found properly with images.first or similar, and then attachments.url automatically knows what to do with it. Unless this dance is coming apart somewhere in srcset.
There was a problem hiding this comment.
This isn't incorrect, but you're right, Tom. Using apos.images.first would packaged this information up for the user. Unfortunately we aren't using that for most of the examples here. Fortunately this is the only place in the docs where we get the image attachment this way, rather than using the first() method.
@felixlberg Would you change this example to use that method instead? The note would then say something like "the apos.images.srcset maintains cropping when you pass in an image object using apos.images.first() or apos.images.all()". Thanks for the contribution.
There was a problem hiding this comment.
The best place to explain the second argument to srcset() would be in the apostrophe-images module reference. Otherwise we want to guide people to the best way to do something.
| {% endif %} | ||
| ``` | ||
|
|
||
| You should decide if you want to show you image as `background-image` or in an img tag with `src` and `srcset`. |
There was a problem hiding this comment.
This needs more thinking about and a solid recommendation that is reasonable for accessibility.
There was a problem hiding this comment.
I'm not sure I fully understand what the message is here. If you aren't using background-image and background-position you would need to be using object-fit and object-position to use the focal point information. If that is what you are getting at it should be more clear.
| ```django | ||
| {# 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 }}"> | ||
| <img |
| > | ||
| ``` | ||
|
|
||
| The `apos.images.srcset` helper even offers cropping. If you add `relationship` you can use `apostrophe-attachment` cropping functions effectively. |
There was a problem hiding this comment.
This isn't incorrect, but you're right, Tom. Using apos.images.first would packaged this information up for the user. Unfortunately we aren't using that for most of the examples here. Fortunately this is the only place in the docs where we get the image attachment this way, rather than using the first() method.
@felixlberg Would you change this example to use that method instead? The note would then say something like "the apos.images.srcset maintains cropping when you pass in an image object using apos.images.first() or apos.images.all()". Thanks for the contribution.
| > | ||
| ``` | ||
|
|
||
| The `apos.images.srcset` helper even offers cropping. If you add `relationship` you can use `apostrophe-attachment` cropping functions effectively. |
There was a problem hiding this comment.
The best place to explain the second argument to srcset() would be in the apostrophe-images module reference. Otherwise we want to guide people to the best way to do something.
| {% endif %} | ||
| ``` | ||
|
|
||
| You should decide if you want to show you image as `background-image` or in an img tag with `src` and `srcset`. |
There was a problem hiding this comment.
I'm not sure I fully understand what the message is here. If you aren't using background-image and background-position you would need to be using object-fit and object-position to use the focal point information. If that is what you are getting at it should be more clear.
3 participants
Added information about srcset helper