Avada Forums Community Forum Image Carousel custom height

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • DAV-Erlangen
    Participant
    Post count: 11

    I am using image carousel with ‘Picture Size’=’fixed’ which crops the images magically in case they have different aspect ratios, which is great. Unfortunately, their height is too small. It is roughly 125 pixels in my case (this might depend on other page settings/sizes ?). The width is also fixed. Therefore, in case there is more horizontal space available, large horizontal voids appear.

    Does anyone understand, how the height/width is determined/set?
    Is there a chance that I set the image height locally or globally? I cannot find any options for that. On the other side, there seems to be a solution since the very first example on avada.theme-fusion.com/image-carousels/ has a larger image size (or is that with the ‘Auto’-option, i.e., these images are provided with proper aspect ratio?

    In terms of a starting point for a solution, I found theme-fusion.com/documentation/avada/special-features/image-size-guide/ but this is very general and there is no section that seems to fit the image carousel.

    Thank you in advance for any help.

    bigpicturecommunication
    Participant
    Post count: 9

    I too have this issue, and have wondered about it for a while.

    As well, when you’re using the carousel with non-rectangular graphics (logos of varying heights and widths) it’d be great to know how to set a “max height” and “max width” so that it re-sizes to a set of constraining proportions without cropping. Setting it to “fixed” crops them, and in “auto” the changing heights makes the content below bounce up and down.

    DAV-Erlangen
    Participant
    Post count: 11

    Yes, I agree this would be great.

    Meanwhile I could narrow down the problem a bit. It seems that the Image Carousel has a features a strange behaviour compared to the image gallery.
    When I use the image gallery with ‘fixed’ size, the images basically use all space that is available in the current collumn. Otherwise, when I use the image carousel with ‘fixed’ size, the images are always really small and there are huge spaced between them. The size is reasonable for a small column , e.g. a 1/4 column, but not approiate for a 1/1 column in my case.

    bigpicturecommunication
    Participant
    Post count: 9

    I was advised by an Avada dev to add the following CSS in theme options to lock in a minimum height and not have the content below the carousel “bounce” up and down. For my case, using logos of various widths and heights, this locks in the height of the carousel.

    .fusion-carousel-wrapper {
    min-height: 100px !important;
    }

    DAV-Erlangen
    Participant
    Post count: 11

    Thank you for sharing this advise. Combined with the ‘auto’-Option, this is somewhat useable for the reasons you describe. Additionally, also the Navigation-Arrows do not bounce up and down.

    For my application, I meanwhile use a gallery (here, the ‘fixed’ option works the way one should expect it and resizes the images to a good size. I also need to only show two images while the gallery features more images. In https://theme-fusion.com/forums/topic/lightbox-gallery-with-only-two-feature-images/ I found a solution to hide all but the first n images.

    Darren McWilliam
    Participant
    Post count: 1

    Hi DAV-Erlangen,

    I don’t know if this will help but I was having a similar issue to you, in that my images were displaying more white space than actual images when using the image carousel. I used the below customised CSS with the image carousel set to “auto” and it appears to have worked! You can change the height to something more suitable for your application if need be.

    .fusion-carousel .fusion-carousel-item img {
    height: 400px;
    object-fit: cover
    }

    Hope this helps.

    michael_35
    Participant
    Post count: 10

    Hello everyone,
    I resume this thread as the last css code is working:

    .fusion-carousel .fusion-carousel-item img {
    height: 400px;
    object-fit: cover
    }

    Mine question is how to change image loaded by the woo product carousel, because even the thumbnail size are now higher it use a smaller image as shown in the html:

    <img src="...wp-content/uploads/2019/07/1417539864-5419-177x142.jpeg" class="attachment-portfolio-five size-portfolio-five wp-post-image" alt="" width="177" height="142">

    Thanks and regards

    kurnikoff
    Participant
    Post count: 3

    Hi!

    I’m working on my website and I have the same problem. List of logos display in all sorts of weird sizes.
    Here is how it looks now.

    I tried adding this CSS code, but it is not working.

    .fusion-carousel-wrapper {
    min-height: 100px !important;
    max-height: 200px !important;
    }

    Carousel is set to image: auto.

    Any idea how this can be fixed? I’m surprised there is no setting that I can find, to set image size from Options menu.

    inPROJECT
    Participant
    Post count: 2

    Hi Guys
    For the recent avada 7.4.1 i got a problem that images sometimes was small – until you click to see the next image or the auto-play trigger the next image… but this css fix worked OK for my problem:

    .fusion-carousel-wrapper {
    height: auto !important;
    }
    .fusion-carousel-holder {
    position: inherit !important;
    }

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