Home Forums Air WordPress Theme Carousel images are not sized properly

This topic contains 3 replies, has 2 voices, and was last updated by  BWSM 2 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #12805

    Priam
    Participant

    The gallery carousel (aka “slider”) embeds 1000px width versions of the images uploaded to the gallery. Unfortunately if you are viewing the slider on any kind of HD monitor, these images stretch out larger than their native resolution and look pixelated.

    The slider needs to load the larger or full sized versions of the images by default, or choose the necessary size dynamically based on the width of the browser window. At the very least, images should have a defined max width so that the slider doesn’t try to size them larger than their native resolution.

    Is it possible to get this problem fixed?

    Thanks!

    #12812

    Priam
    Participant

    I fixed this problem by adding an inline style to the “portfolio-slider.php” template. I added

    style="max-width:1000px;height: auto;"

    to the line

    $image_lazyload_img_style = 'src="' .esc_url($thumb_url). '"';

    so that the image doesn’t scale larger than the medium thumbnail width. The theme’s medium thumbnails are scaled based on a maximum width, not height, so it’s not necessary to also specify a max height. This css solution seems to do the trick. If you have a better suggestion for how this can be implemented, let me know.

    Thanks.

    #12820

    Priam
    Participant

    On second look, this is not working. It breaks the responsive sizes of the images. Is there a solution through the Javascript of the Owl Carousel?

    #12829

    BWSM
    Keymaster

    1) Please try to replace this file
    download the file, unzip it
    – upload / replace by FPT: /template/single/gallery/portfolio-slider.php

    2) Please paste the style code to Custom Css(Appearance / Theme Options / Custom Css):

    .single-portfolio-fullwidth-slider .owl-carousel,
    .single-fullwidth-slider-carousel-img,
    .single-portfolio-fullwidth-slider .size-all,
    .owl-carousel .owl-item img.single-fullwidth-slider-carousel-img,
    .owl-carousel .owl-item img.size-all,
    .single-portfolio-fullwidth-slider .owl-prev, 
    .single-portfolio-fullwidth-slider .owl-carousel .owl-controls .owl-nav .owl-next {
      height: 400px; height: calc(100vh - 220px);
    }
    .single-portfolio-fullwidth-slider .owl-carousel {
      overflow: hidden;
    } 
    .single-fullwidth-slider-carousel-img,
    .single-portfolio-fullwidth-slider .size-all {
      opacity: 0; width: auto; 
    }
    .owl-carousel .owl-item img.single-fullwidth-slider-carousel-img,
    .owl-carousel .owl-item img.size-all {
      width: auto; 
    }
    .owl-carousel.owl-loaded .owl-item .single-fullwidth-slider-carousel-img,
    .owl-carousel.owl-loaded .owl-item .size-all {
      opacity: 1;
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.