Carousel 2x workaround – is this OK?


#1

Hi,
waiting for Carousel to support 2x images (prettyplease! :slight_smile: ), 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


#2

Hi @undavide welcome back,

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

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


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

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