1

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>

1 Answer 1

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.