Home › Forums › Air WordPress Theme › Carousel images are not sized properly

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 7, 2017 at 3:10 am #12805
    Priam
    Participant
    Purchased
    Expired

    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!

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 7, 2017 at 8:36 pm #12812
    Priam
    Participant
    Purchased
    Expired

    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.

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 8, 2017 at 4:59 am #12820
    Priam
    Participant
    Purchased
    Expired

    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?

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 8, 2017 at 7:54 am #12829
    SeaTheme
    Keymaster
    Purchased
    Expired

    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;
}

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.