6 replies · opened Nov 24, 2019
Dear Canvas team,
i try to load different gallery images for desktop (including tablets) and mobile view.
Here the html:
<div class="col_full clearfix">
<div class="masonry-thumbs grid-3" data-lightbox="gallery" data-animate="fadeInLeft">
</div>
</div>
Can you help me with the css-code to load eg. a mobile version of wok-garden-gallery2-01-kl.jpg and wok-garden-gallery2-01-full etc. ?
<div class="col_full clearfix">
<div class="masonry-thumbs grid-3" data-lightbox="gallery" data-animate="fadeInLeft">
</div>
</div>
Hello,
This is Definitely Possible!
You will need to use multiple Masonry Gallery codes (.masonry-thumbs) and then display/hide them using the Bootstrap Display Utilities: https://getbootstrap.com/docs/4.3/utilities/display/ .
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
It Works, thanx a lot :)
But this solution works with "display: none", is this right? And does this mean, it loads both pictures and than hide one of it?
If its so, is there a solution to load only one picture?
Hello,
Typically, the Hidden Images by the CSS are not loaded by the Browsers on Mobile Devices to save bandwidth and load the Pages faster. However, you can consider using Image scrset to load Different Images on Different Devices. Example:
This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Great :) i think this is the best way. Thanx a lot.
Hello,
Very Happy to Help! :)
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard