Reputation: 29
I have a Bootstrap Carousel working nicely in Kentico CMS, except for the mobile view. Despite adding the tag of img-fluid, the image on mobile is just a sized down version of the banner on the desktop view. What I would really like to do is to add a separate image for smaller screens.
Any ideas?
<div class="item <%# Eval("HomeSliderActive")%>">
<img src="<%# Eval("HomeSliderImage") %>" alt="<%# Eval("HomeSliderHeading")%>" class="img-fluid "/>
<div class="carousel-caption no-mobile headings">
<a href="<%# Eval("HomeSliderURLTarget") %>">
<div class="outer">
<div class="inner-absolute-top">
<h3><%# Eval("HomeSliderHeading")%></h3>
</div>
<div class="inner-absolute-bottom">
<p><%# Eval("HomeSliderCaption")%> <span><%# Eval("HomeSliderButton")%></span></p>
</div>
</div> </a>
</div>
</div>
Upvotes: 1
Views: 184
Reputation: 6117
You have a few options.
in version 10 they introduced a responsive image module. This allows the user to upload one image (usually the biggest, best one) and the code you write creates images specific to your site design. https://docs.kentico.com/k12/developing-websites/managing-responsive-images
on the page type definition, add multiple fields for desktop, tablet and mobile and add them in code.
have the user upload optimized large images and use a single image.
preload or lazy load the images with JavaScript
Upvotes: 1