ladybugg333
ladybugg333

Reputation: 29

Bootstrap Carousel in Kentico - Mobile images

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

Answers (1)

Brenden Kehren
Brenden Kehren

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

Related Questions