Carousel 2x workaround – is this OK?

[undavide]

Hi,
waiting for Carousel to support 2x images (prettyplease! ), I’m adding this in the generated html:

was:

<div class="carousel-item"><img class="d-inline-block w-100" src="img/open-book-2.jpg"/><div class="carousel-caption"></div></div>

is:

<div class="carousel-item"><img class="d-inline-block w-100" src="img/open-book-2.jpg" srcset="img/open-book-2@2x.jpg 2x"/><div class="carousel-caption"></div></div>

I.e., I’m adding the srcset prop pointing to the 2x image with the 2x spec. Is just this OK?
Thank you!

Davide

[Blocs_User]

Hi @undavide welcome back,

I’m adding this in the generated html

You can use img + srcset along with the size attribute:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-srcset

Or since Blocs is already using lazySizes.js you could use its inherent abilities alternatively:

• https://github.com/aFarkas/lazysizes

---

EDIT: I forgot our conversion from … a year ago (thread from 2 years ago).

Carousel image size options

Hi Davide, welcome to the Blocs forums, I believe that remains correct concerning the built-in carousel features. That there is still no controls via the UI like there are for regular images for adding 2x and 3x images for carousels. Carousel Bloc or Bric: [carousel bloc or bric] Regular Image / Bric: [regular image bric]

waiting for Carousel to support 2x images (prettyplease! )

@norm, yes support directly built into the carousel brics by default would be nicer though.