I am building an image module and want to give editors the possibility to choose a fullscreen or split layout. Adding a class for the styling is not the issue, but I am struggling to set the sizes
attribute for srcset
. I imagine it’s a relatively easy if-statement. So that the sizes is set to either 100vw or 50vw, depending on the selected class (or any other admin panel control).
Here’s my twig
<section class="image {{ page.header.imagelayout.class }}">
{% for image in page.media.images %}
<div class="projectimage projectimage__half">
{% set service_image = image.derivatives(750,2900,700).enableProgressive().sizes('100vw') %}
<img
data-src="{{ service_image.url(false) }}"
data-srcset="{{ service_image.srcset(false) }}"
sizes="{{ service_image.sizes(false)}}">
</div>
{% endfor %}
</section>
Here’s a added class I was trying to use to “convert” to either 50vw or 100vw
header.imagelayout.class:
type: select
label: Layout
size: medium
default: Side by Side
help: 'Image layout next or below to each other'
options:
image__layout--half: Side by Side
image__layout--full: Below each other