Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 10, 2021 at 1:08 pm #1305072
    namgyal

    Hi guys,

    I am having a little trouble with the GALLERY..while everything works (masonry or easy slider etc), Whenever I use a gallery, the images are lined up instead of displaying a gallery. Please check the private section for better explanations.

    Thanks,
    Namgyal

    June 12, 2021 at 4:12 am #1305339
    Rikard

    Hi Namgyal,

    Thanks for the screenshot. Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    June 12, 2021 at 12:14 pm #1305399
    namgyal

    Thanks for the reply Rikard. Please check the credentials in the private content.

    June 14, 2021 at 8:03 am #1305541
    Rikard

    Hi,

    Thanks for that. I can’t see any obvious reason as to why this would be happening unfortunately, could you try disabling all plugins to see if that changes anything please? Also please try enabling the parent theme, if disabling plugins doesn’t make any difference. If you don’t want to perform this on your live site, then you might want to consider copying the site to a staging server.

    Best regards,
    Rikard

    • This reply was modified 3 years, 6 months ago by Rikard.
    June 19, 2021 at 2:09 pm #1306507
    namgyal

    HI Rikard,

    Thanks for your reply. However, I did try making all the changes and it didn’t seem to work.

    But I tried this CSS and it is now working. Is there something you can assist with? I gave a CSS class gallery-hotel and used the following…! If this CSS can be changed where instead of specifying the width if would fit then it would be nice!

    .avia_transform .gallery-hotel .avia-gallery-thumb img {
    width: 16.66% !important; /*100% width divided by number of images – no so practical */
    }

    ———————–
    I tried this one too, but it only fits 5 images and displays the other one goes at the bottom (like the attached image in private content)
    .avia_transform .gallery-hotel .avia-gallery-thumb img {
    width: inherit !important; /*tried fit content and all but nothing worked */
    }

    Thank you very much!

    June 21, 2021 at 6:40 am #1306654
    Rikard

    Hi,

    Thanks for the update, it looks good on my end now as well. Are you ok with using your CSS as a solution for now? This is not a general problem with the theme, so it’s likely that something local on your site is causing it.

    Best regards,
    Rikard

    June 21, 2021 at 12:19 pm #1306709
    namgyal

    Hi Rikard,

    I guess that’s what has to implement. What I actually wanted to ask was the CSS code. Like instead of using 16.66% etc is there anything we can use so it automatically adjusts the size available? [I tried width: fit-content, etc but that didn’t work. width: inherit worked but it only displays well for 5 images below]

    So if you can help me with the CSS that could adjust the width as per the size available and NOT specifying %… I can give it a class and apply the same CSS or else there are 40+ pages I will have to go through each page and look for each image used and then apply CSS as per the images…?

    .avia_transform .gallery-hotel .avia-gallery-thumb img {
    width: 16.66% !important; /*100% width divided by number of images – no so practical */
    }

    Thanks,
    Namgyal

    June 26, 2021 at 11:20 pm #1307544
    Mike

    Hi,
    Thank you for your patience and for the link to your site, you could try this script that will count the number of thumbnails in each thumbnail gallery and add a class to that div that represents how many thumbnails there are. Then you could use some css for that class that will set the width for you.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function count_thumbs_script() { ?>
    <script>
(function($) {
var matched = $(".avia-gallery-thumb a");
$('.avia-gallery-thumb').addClass('thumbs-' + matched.length);
}(jQuery));
</script>
    <?php
}
add_action('wp_footer', 'count_thumbs_script');

    This will add the class thumbs-6 if there are six thumbnails on the page.
    For the css note that I specifically targeted your single-hotels pages so other pages would not run the script and cause possible conflicts. Also note that this css rule only sets the width for six thumbnails, you will need to add more for other numbers:

    #top.single-hotels .avia-gallery-thumb.thumbs-6 > a > img {
	    width: 16.66% !important;
}

    Hope this helps.

    Best regards,
    Mike

    July 4, 2021 at 4:09 pm #1308647
    namgyal

    Thanks Mike :)

    July 4, 2021 at 4:31 pm #1308649
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Gallery displaying images vertically instead images with thumbnails’ is closed to new replies.