-
Search Results
-
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,
RobLooking for a snippet to show a deafult image in blog views – but NOT Single view (there only images should be shwon, which are uplaoded with the post).
I tried it like this:function enfold_fallback_thumb_url( $size = ‘enfold-blog-thumb’ ) {
// Deine Fallback-ID (anpassen!)
$fallback_id = 4283;
return wp_get_attachment_image_url( $fallback_id, $size );
}// Enfold-kompatibler Filter: Nur Übersicht, kein Single
function enfold_fallback_thumbnail_html( $html, $post_id, $post_thumbnail_id ) {
global $post;// Admin/Single/hat Bild: überspringen
if ( is_admin() || is_singular() || $post_thumbnail_id ) {
return $html;
}// Nur Posts in Übersichten
if ( ! is_home() && ! is_archive() || $post->post_type !== ‘post’ ) {
return $html;
}// Fallback-Bild rendern (Enfold-Size)
$fallback_html = ‘<img src=”‘ . enfold_fallback_thumb_url( ‘enfold-blog-thumb’ ) . ‘”
alt=”‘ . esc_attr( get_the_title( $post_id ) ) . ‘”
class=”attachment-enfold-blog-thumb wp-post-image fallback-thumb” />’;return $fallback_html;
}
// Filter aktivieren
add_filter( ‘post_thumbnail_html’, ‘enfold_fallback_thumbnail_html’, 10, 3 );But it doesn’t work. Any advices? Thakns
TimHi
We are updating a site for our client and he wants enlarged images to display at full size (1500px) wide in lightbox when a smaller image element is clicked upon.
We were advised to add the following into the functions.php file. However, I think this only works in an image gallery?
function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){
$link = wp_get_attachment_image_src($attachment->ID, “full”);
return $link;
}
add_filter(‘avf_avia_builder_gallery_image_link’, ‘avia_change_gallery_thumbnail_link’, 10, 4);Is there a way of forcing enlarged images to display full size when clicking smaller or thumbnail elements?
Thanks in advance
Steve





