Viewing 30 results - 1 through 30 (of 10,101 total)
  • Author
    Search Results
  • #1496961

    Hey Erwin,

    Thank you for the inquiry.

    The no-scaling option is really meant for cases where you need pixel-perfect originals, so 800kb thumbnails with 100 posts will definitely cause performance issues. The best approach here is to resize your images before uploading them to WordPress. For a masonry gallery, images don’t need to be wider than 1200px or so, and at that size you can usually get them well under 150kb without any visible quality loss.

    After resizing, run them through a compression tool like TinyPNG or Squoosh before uploading. If you’ve already uploaded the originals, a plugin like Imagify or ShortPixel can bulk-compress your existing media library.

    For the gallery setting itself, you can then switch back to one of the standard cropping options in the masonry element, which will let WordPress serve correctly sized thumbnails automatically.

    https://tinypng.com
    https://squoosh.app

    Let us know if you have more questions.

    Best regards,
    Ismael

    #1496949
    Erwin
    Participant

    Hi,

    I’m using an masonry gallery to show posts with images. Because I would like the images to shot at the original ratio, I’ve set it to set your own format and use no-scaling. But, the no-scaling causes large thumbnails as 800kb. With 100 posts to show, this is becoming a big page to load. See the private content field for a link to this page.
    Can you recomment me another way to achieve this layout? Or another setting for the post-images?

    Regards,
    Erwin

    Shoot I’m seeing now the thumbnails when vertical re extending down into the next post as well. What I want to do is have the thumbnails have a consistent space above and below for each post that pulls in. It seems to be the tt=heme is controlling the size and spacing I just am having trouble figuring out this tweak, thanks.

    tonyiatridis
    Participant

    Hello,
    I am using the feeds plugin to pull in posts from Substack. I have modified the feed with this css. The first two increments format the text as you can see. By default the theme seems to make the thumbnails square so I added the third increment in the css to preserve the original aspect ratio of each of the thumbnails. You can see the result here: https://sethledermanmd.com/opinion-pieces/

    But…I need the spacing above and below the individual poqststo be consistent, you can see that the sauce below the thumbnails is larger on the ones which have thumbnails which are horizontal because the grid seems to have the same overall depth for each post. Is there a way to have them pull in with a consistent amount of space below the thumbnails and also make he spacing above a little less in height?

    Thanks so much.

    /* Feedzy RSS post titles */
    .feedzy-rss .rss_item .title a {
    font-size: 20px !important; /* Adjust the size */
    color: #3b68bb !important; /* Optional: title color */

    }

    /* Hover effect for titles */
    .feedzy-rss .rss_item .title a:hover {
    color: #0073aa !important; /* Optional hover color */
    text-decoration: underline !important;
    }

    .post-entry img {
    width: 100%;
    height: auto !important;
    display: block;
    }

    #1496552
    bilithul
    Participant

    Enfold 7.1.4
    Wordpress 6.9.4
    Block Editor

    Hi team, I think I found an uncaught issue created by wrong user input. If I insert a youtube block at a page and type in this wrong URL https://www.youtube.com/embed/u0ynt7CK2og , then wordpress converts the block to an usual embed block, but without enfold there are no display issues. With Enfold active, the video thumbnail looks only half-height, and a space to the bottom end of the block. At the rendered page, there is a huge space at the bottom of the video.
    The solution is to use the correct link https://www.youtube.com/watch?v=u0ynt7CK2og
    I don’t need support here, only FYI.
    best regards

    • This topic was modified 2 weeks, 6 days ago by bilithul.
    • This topic was modified 2 weeks, 6 days ago by bilithul. Reason: Added some notes

    Hey Valerie,
    Your woo shortcode to display the products was using cropped images
    [products=3]
    I added this to your child theme to use the uncropped images:

    add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
    function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
        return 'woocommerce_thumbnail';
    } 

    Best regards,
    Mike

    #1496154

    In reply to: Unable to edit page

    Hi,

    Thank you for the update.

    To check your theme version, go to Appearance > Themes and click the Enfold theme thumbnail. The version number should appear there. Please make sure you are on the latest version (7.1.4).

    qjElh42.md.png

    Looks like your site has two-factor authentication enabled — asking for a 9-digit code. Could you temporarily disable that so we can log in, or alternatively clone the site to a staging environment and share the staging URL and credentials instead?

    Let us know once that’s done and we’ll investigate further.

    Best regards,
    Ismael

    #1495441

    i guess you only want to influence the lightbox images source. And because Enfold uses on default the large image. This does not always uses the original aspect ratio.

    I would not influence the thumbnail sizes of the gallery. Only the lightbox source image.
    If you are usiing the gallery element try:

    function custom_alb_lightbox_image_size( $size, $context ){
      if( $context == ('av_gallery' || 'avia_masonry') ){
        return 'original';
      }
      return $size;
    }
    add_filter( 'avf_alb_lightbox_image_size', 'custom_alb_lightbox_image_size', 10, 2 );

    Thanks mike, that looks great… any idea why the thumbnails are initially “whited out”? page is published so you can see it now. Thank you!

    There is no way around side positioning. The large image will always take up so much space that you will always find scenarios where you can only see very little of the thumbnails scrolling underneath.
    iPad landscape etc.

    Hi Mike, actually I dont want to large image to be as large as possible, just larger than the thumbnails, in a 3/5 layout. Your solution looks great. Thanks! See private details in case you want to try on test page on my site.

    Best,
    Rob

    Hi,
    Thanks for your patience, I only asked for access to your test page so we would be looking at the same thing and so I would  not need to recreate your layout on my site, nonetheless I created 1/5 + 3/5 + 1/5 columns with a gallery with large image on top and thumbnails below, and a color section with 100% min-height below that to simulate the rest of the page.
    qFouAOl.png
    My sticky header is 90px, although I see yours is 157px.
    My first impression of the layout is that the large gallery image on top is almost the full height of the screen, so the thumbnails are not really seen, I added 50px right & left padding to the 3/5 column and that helped a little
    qFoE6fR.png
    Adding 150px right & left padding to the 3/5 column was better
    qFoWUkN.png
    but I get the feeling that you want the large image to be as large as possible, and not so much empty space on the sides, so having it sticky would make the thumbnails hard to see. I tested Guenni007’s solution at: https://webers-testseite.de/ajax-gallery/#av_section_2 and other than adjusting the top: 70px to match my header it seems to work well.
    But ypur current masonry layout https://www.thomashenthorne.com/26-mooring-road-san-rafael-ca/#av_section_42
    seems much better because the user can see the thumbnails, it fills the page and the user can easily navigate the lightbox images (slideshow).

    Best regards,
    Mike

    #1495152

    Hi,

    Thank you for the inquiry.

    We replaced the iframe with the video tag, which should display a thumbnail or video cover by default using the poster attribute and have the video controls enabled automatically.

    <video width="100%" height="1000" controls poster="https://www.timm-tiegelkamp.de/wp-content/uploads/2026/02/Danny-Videocover-Foto_Web.jpg">
        <source src="https://2026-02-eins.s3.eu-north-1.amazonaws.com/Ronald-Video.MP4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    

    Best regards,
    Ismael

    #1495120

    Thanks a lot, Ismael. How can we change the code so that the column height is only the same as the video size? At my end, you see black bars above and below the video.

    e.g. like 100% instead of 1500px did not work,

    Now `ve added a second column with 1000 px height:

    <iframe src=”https://2026-02-eins.s3.eu-north-1.amazonaws.com/Ronald-Video.MP4&#8243; width=”100%” height=”1000px” scrolling=”no” allowfullscreen=”allowfullscreen”></iframe&gt

    -> but maybe there is a code to have dynamicly a correct height?

    And 2 reamining questions if we do it via a.m. code and not video element:
    a) is it possible to add a play button above the video?
    b) and how to implement/show a start pic / thumbnail?

    Thanks again for your continuous support, and best regards, Tilman.

    • This reply was modified 2 months ago by oestersund.
    • This reply was modified 2 months ago by oestersund.

    Hi Mike! Yes, that is the layout I was going for, but as you saw we ran into some problems, and then also I found out that lazy load has not yet been added to the performance settings of gallery element, and since we are having some bandwidth issues, I returned to Masonry block. I actually would prefer the “hero” photo of Gallery on top with thumbnails below, and the hero to be sticky as user scrolls through thumbnails because sometimes there can be 60-90 photos in one gallery. I would also need to figure out how to lazy load it…

    Thanks!
    Rob

    Hi,

    Did you add the intermediate_image_sizes_advanced filter? All we added to the functions.php file is the avf_alb_lightbox_image_size filter, which replaces the thumbnail with the full or original image.

    If you add the intermediate_image_sizes_advanced filter, no thumbnails will be generated for uploaded images and all elements will use the full size regardless of the viewport size or device.

    Installing an image compression plugin, such as WP Smush, should help optimize file generation.

    Best regards,
    Ismael

    #1495046

    Hey es.design.ma,

    Thank you for the inquiry.

    The first post is currently showing a thumbnail instead of the original image. Did you install any image or media library plugins? Please provide the login details in the private field so we can check further.

    Best regards,
    Ismael

    Hi,

    Thank you for the information.

    On the “logos-3-2” page, the images seem to be displaying at their original size. If you’re referring to the images inside the lightbox or image modal, you can add the following code to the functions.php file to display the original image instead of the default “large” thumbnail.

    function avf_alb_lightbox_image_size_mod( $size, $context ){
      if( $context == ('av_gallery' || 'avia_masonry') ){
        return 'full';
      }
      return $size;
    }
    add_filter( 'avf_alb_lightbox_image_size', 'avf_alb_lightbox_image_size_mod', 10, 2 );
    

    If the issue persists, please provide a screenshot of the issue using platforms like FreeImage, ImgBB, PostImages or Dropbox to upload and share the screenshot. Here are the steps to follow:

    1.) Visit the website of your chosen platform, such as Savvyify, ImgBB, PostImages or Dropbox.
    2.) Locate the option to upload a file or an image.
    3.) Select the screenshot file from your computer or device and upload it to the platform.
    4.) After the upload is complete, you will be provided with a shareable link or an embed code.
    5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

    Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

    Best regards,
    Ismael

    Hi,

    Thank you for the update.

    Please note that thumbnail generation is primarily handled by WordPress core, not the theme itself. WordPress automatically creates multiple intermediate image sizes upon upload. While themes (including Enfold) can register additional image sizes or adjust quality settings, the actual generation process is managed by WordPress.

    If you would like to disable the creation of thumbnails or other image sizes, you can add the following filter to the child theme’s functions.php file. Please make sure to create a full site backup before proceeding:

    add_filter('intermediate_image_sizes_advanced', '__return_empty_array');
    

    Best regards,
    Ismael

    Hey Dave Chapple,

    Thank you for the inquiry.

    The theme actually increases the compression quality compared to the default, which can sometimes result in heavier thumbnails or thumbnails with a larger file size than the original images. This is not intentional, but it can happen from time to time.

    Please create a test page and provide the URL in the private field so we can check the issue — screenshots would also be helpful.

    To adjust the default quality, try to add this filter in the functions.php file, then regenerate the thumbnails.

    add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1); 
    add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1); 
    function avf_set_quality_mod($quality) { $quality = 60; return $quality;}
    

    Use this plugin to regenerate the thumbnails, but make sure to create a site backup first.

    https://wordpress.org/plugins/regenerate-thumbnails/

    Best regards,
    Ismael

    test :

    /* 1. GLOBAL STICKY PERMISSION */
    html.html_stretched, 
    html.html_stretched body#top,
    #top #wrap_all, 
    #top #main {
        overflow: visible !important;
    }
    
    @media only screen and (min-width: 768px) {
    
        /* 2. MAIN CONTAINER 
           We use CSS Grid for the 65% / 1fr split */
        #top .avia-gallery.av-gallery-sticky-scroll {
            display: grid !important;
            grid-template-columns: 65% 1fr !important;
            gap: 30px !important;
            align-items: start !important; /* Crucial: prevents big-wrapper from stretching to full height */
            overflow: visible !important;
            position: relative !important;
            width: 100% !important;
        }
    
        /* 3. STICKY WRAPPER (Left Column) */
        #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big-wrapper {
            grid-column: 1 !important;
            position: -webkit-sticky !important;
            position: sticky !important;
            top: 100px !important; /* Adjust based on your header height */
            z-index: 100 !important;
            height: auto !important;
            margin: 0 !important;
            background: #ffffff !important;
        }
    
        /* 4. IMAGE ELEMENT */
        #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big {
            position: relative !important;
            display: block !important;
            height: auto !important;
        }
    
        #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big img {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            max-height: 80vh;
            object-fit: contain;
        }
    
        /* 5. THUMBNAILS (Right Column) */
        #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-thumb {
            position: relative !important;
            z-index: 10 !important;
            padding: 0 !important;
            width: 100% !important;
          min-height: 100vh;  /*** we need the gallery thumbs container bigger than the big image *** /
        }
    }

    the min-height option is necessary only because my thumbs container is less high than the big image – guess your

    And change the 65% to your needs in : grid-template-columns: 65% 1fr !important;

    Yes—now your page is opening. Now please explain to me how this is supposed to work with such large images above the thumbnails—it’s obvious that these images will cover the thumbnails below.
    How about if the thumbnails scroll up to the side of the large sticky image?

    Cloudflare Ray ID: 9cac7fcdcced65d6
    change the animation at advanced tab:

    It’s exactly the problem you can see on my page now, where I’ve widened the gallery. At some point, the sticky large image is so big that you can’t see much of the thumbnails scrolling underneath it.
    Therefore, it’s really only suitable if the column with the gallery is narrower.

    If yo ucan give the ray ID from the cloudflare error (at bottom) we can fix.

    Re the image, here you go… basically the thumbnails are against the bottom of the screen and dont start to display nicely until user hovers. We are 99% there, just need some padding between bottom of thumbnails and bottom of page.

    thumbnails

    Sorry Guenni, WP Engine seems to insist on geoblocking my website even though i have told them to disable it. Can you try again? You can also see the behavior on your preview page. The thumbnails are right against the bottom of the container / page. it would be great if the container had some padding around it just under the thumbnails.

    Thank you!
    Rob

    Wow Guenni, that is a lovely piece of code!! Thank you!! Enfold should consider adding this to core functionality as it is a huge upgrade to the Gallery element.

    One question – how do I adjust the preview photo size and/or how much room the thumbnails have at the bottom of the sticky container?

    Gallery with your css is now live on this page, towards the bottom:

    https://www.thomashenthorne.com/26-mooring-road-san-rafael-ca/

    Thank you!
    Rob

    goldengate415
    Participant

    Hi Enfold team,

    I’m using the Enfold Gallery element in WordPress (Avia Layout Builder). I’m trying to achieve a CSS-only UX like this:

    The large preview image stays at the top and is sticky while the user scrolls down through the thumbnails below it.

    Once the thumbnails end, the page continues scrolling normally to the next section.

    I’m not using any JS. I added a custom class to the Gallery element and tried multiple CSS approaches. I can sometimes get sticky to work, but then the layout breaks (preview shifts left / preview becomes tiny / thumbnails become huge or microscopic / only a few thumbs show per row). When I fix thumbnail sizing, the sticky behavior stops working.

    What I’m using

    Enfold theme (latest) + WordPress

    Gallery element style: big preview + thumbnails (the normal preview-on-top layout)

    I added a custom class on the Gallery element: av-gallery-sticky-scroll

    What I want (exact behavior)

    Keep Enfold’s default layout: big image on top, thumbnails below

    Make only the big preview sticky (position: sticky; top: …)

    Thumbnails should remain a normal-sized grid below

    No inner scrolling container — I want normal page scroll, with preview sticking until the thumbnail list ends

    CSS attempts (examples)

    I tried sticky on .avia-gallery-big and also .avia-gallery-big-inner (in case the inner wrapper is needed), plus forcing overflow: visible on likely parents. I also tried overriding thumbnail widths using flex/grid.

    Example of my latest attempt:

    @media (min-width: 990px){
    .av-gallery-sticky-scroll{
    –stickyTop: 120px;
    –thumbSize: 140px;
    }

    .av-gallery-sticky-scroll .avia-gallery-big,
    .av-gallery-sticky-scroll .avia-gallery-big .avia-gallery-big-inner{
    position: sticky;
    top: var(–stickyTop);
    z-index: 50;
    }

    .av-gallery-sticky-scroll,
    .av-gallery-sticky-scroll .avia-gallery,
    .av-gallery-sticky-scroll .avia-gallery-big{
    overflow: visible !important;
    }

    .av-gallery-sticky-scroll .avia-gallery-thumb{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, var(–thumbSize));
    gap: 12px;
    margin-top: 14px;
    justify-content: start;
    }

    .av-gallery-sticky-scroll .avia-gallery-thumb li{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    }

    .av-gallery-sticky-scroll .avia-gallery-thumb img{
    width: 100% !important;
    height: auto !important;
    display: block;
    }
    }

    Result: thumbnail sizing becomes unpredictable (either microscopic or huge), and sticky often stops working.

    My questions

    Is it possible CSS-only to make the Gallery element’s big preview sticky (preview on top, thumbs below) without breaking Enfold’s internal thumb sizing/layout rules?

    Is there a recommended selector/wrapper inside the Gallery element that is safe to apply position: sticky to?

    If sticky fails because of an Enfold container overflow rule, which wrapper should I override (and is there an Enfold setting that influences this)?

    If this isn’t feasible with the Gallery element, is there a recommended Enfold-native alternative (e.g., specific element/layout pattern) that support suggests?

    Thanks,
    Rob

    Still not working as It did before before upgrade

    POSTS USED TO WORK HERE — this earlier Enfold install

    Nicer small preview image to left of Blog Excerpt

    and no featured image

    Now Grey Box shows without pencil icon…would rather see pencil or no grey box at all

    Preview images are smaller than 180 x 180 selected thumbnail — not the size selected in Post Element

    Preview images on blog listing Do not show up at all in Safari

    #1494755

    Hi,

    Thank you for the update.

    Please note that 300x300px will not be the exact size at which the thumbnails are generated. The resizing process also takes the image’s aspect ratio into account, so if the image is not perfectly square or has a different aspect ratio, it will not be resized to exactly 300x300px. This is why you’re seeing images with different dimensions.

    If you want to display a grid with uniform image sizes, you will need to upload images with the same dimensions and aspect ratio. Hope this clear things up a bit.

    Best regards,
    Ismael

    #1494642

    Hey daninap,

    Thank you for the inquiry.

    You can change the size of the thumbnails used in the gallery by adjusting the Styling > Gallery > Gallery Preview Image Size setting. Please refer to the screenshot below.

    ftVtpMQ.md.png

    Best regards,
    Ismael

Viewing 30 results - 1 through 30 (of 10,101 total)