Skip to content

fix: force all the image in the horizontal scroller to load immediate… #3672

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bfintal merged 3 commits into from
Jan 14, 2026
+10 −112
Merged

fix: force all the image in the horizontal scroller to load immediate… #3672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe6d23c
fix: force all the image in the horizontal scroller to load immediate…
Arukuen Jan 13, 2026
aae022f
fix: also remove lazy loading on carousel images
Arukuen Jan 13, 2026
a59db5e
fix: remove stackable_enable_carousel_lazy_loading setting
Arukuen Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/block/carousel/frontend-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,13 @@ class _StackableCarousel {
this.liveregion.setAttribute( 'class', 'liveregion stk--hidden' )
this.wrapper.appendChild( this.liveregion )

// Get all images and set loading to eager to make the browser
// calculate the grid height correctly
const images = this.el.querySelectorAll( 'img' )
images.forEach( image => {
image.loading = 'eager'
} )

this.fixChildrenAccessibility() // This needs to be first before infinte scrolling clones slides.
this.initProperties()
}
Expand Down
50 changes: 0 additions & 50 deletions src/block/carousel/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,53 +19,3 @@ function stackable_load_carousel_frontend_script() {
}
add_action( 'stackable/carousel/enqueue_scripts', 'stackable_load_carousel_frontend_script' );
}

if ( ! get_option( 'stackable_enable_carousel_lazy_loading' ) && get_option( 'stackable_enable_carousel_lazy_loading' ) !== false ) {
// Lazy loaded images inside carousels make the carousel height buggy and show extra
// spaces because the height isn't available in lazy loaded images. Prevent images from
// hidden slides from lazy loading to prevent this.
if ( ! function_exists( 'stackable_carousel_add_class_images' ) ) {
function stackable_carousel_add_class_images( $block_content, $block ) {
if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
return $block_content;
}

$index = 1;
$slides_to_show = 1;

if ( ! empty( $block ) && isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) {
if ( isset( $block['attrs']['slidesToShow'] ) ) {
$slides_to_show = $block['attrs']['slidesToShow'];
}
}

$html_tag = new WP_HTML_Tag_Processor( $block_content );

while ( $html_tag->next_tag( 'img' ) ) {
$img_classname = $html_tag->get_attribute( 'class' );

// add for images that are not immediately shown
if ( strpos( $img_classname, 'stk-img') !== false && $index > $slides_to_show ) {
$html_tag->add_class( 'stk-img-carousel' );
}
$index++;
}

return $html_tag->get_updated_html();
}

add_filter( 'render_block_stackable/carousel', 'stackable_carousel_add_class_images', 1, 2 );
}

if ( ! function_exists( 'stackable_skip_loading_lazy_carousel_image' ) ) {
function stackable_skip_loading_lazy_carousel_image( $value, $image ) {
if ( ! strpos( $image, 'stk-img-carousel' ) === false ) {
return false;
}

return $value;
}

add_filter( 'wp_img_tag_add_loading_attr', 'stackable_skip_loading_lazy_carousel_image', 10, 2 );
}
}
4 changes: 3 additions & 1 deletion src/block/horizontal-scroller/frontend-horizontal-scroller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ class StackableHorizontalScroller {
// get all links, because we will need to disable them during drag
const children = el.querySelectorAll( '.stk-block-link, a' )

// Get all images and set draggable to false
// Get all images, set draggable to false
// and loading to eager to make the browser calculate the grid height correctly
const images = el.querySelectorAll( 'img' )
images.forEach( image => {
image.draggable = false
image.loading = 'eager'
} )

// prevents redirecting to the inner column link
Expand Down
38 changes: 0 additions & 38 deletions src/block/horizontal-scroller/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,41 +20,3 @@ function stackable_load_horizontalscroller_frontend_script() {
add_action( 'stackable/horizontal-scroller/enqueue_scripts', 'stackable_load_horizontalscroller_frontend_script' );
}

if ( ! get_option( 'stackable_enable_carousel_lazy_loading' ) && get_option( 'stackable_enable_carousel_lazy_loading' ) !== false ) {
// Lazy loaded images inside horizontal scroller make the horizontal scroller height buggy and show extra
// spaces because the height isn't available in lazy loaded images. Prevent images from
// hidden slides from lazy loading to prevent this.
if ( ! function_exists( 'stackable_horizontal_scroller_add_class_images' ) ) {
function stackable_horizontal_scroller_add_class_images( $block_content, $block ) {
if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
return $block_content;
}

$html_tag = new WP_HTML_Tag_Processor( $block_content );

while ( $html_tag->next_tag( 'img' ) ) {
$img_classname = $html_tag->get_attribute( 'class' );

if ( strpos( $img_classname, 'stk-img') !== false ) {
$html_tag->add_class( 'stk-img-horizontal-scroller' );
}
}

return $html_tag->get_updated_html();
}

add_filter( 'render_block_stackable/horizontal-scroller', 'stackable_horizontal_scroller_add_class_images', 1, 2 );
}

if ( ! function_exists( 'stackable_skip_loading_lazy_horizontal_scroller_image' ) ) {
function stackable_skip_loading_lazy_horizontal_scroller_image( $value, $image ) {
if ( ! strpos( $image, 'stk-img-horizontal-scroller' ) === false ) {
return false;
}

return $value;
}

add_filter( 'wp_img_tag_add_loading_attr', 'stackable_skip_loading_lazy_horizontal_scroller_image', 10, 2 );
}
}
13 changes: 0 additions & 13 deletions src/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,18 +170,6 @@ public function register_settings() {
)
);

register_setting(
'stackable_editor_settings',
'stackable_enable_carousel_lazy_loading',
array(
'type' => 'boolean',
'description' => __( 'Disables image lazy loading when using images inside carousel-type blocks to prevent space or layout issues .', STACKABLE_I18N ),
'sanitize_callback' => 'sanitize_text_field',
'show_in_rest' => true,
'default' => true,
)
);

register_setting(
'stackable_editor_settings',
'stackable_enable_text_highlight',
Expand Down Expand Up @@ -273,7 +261,6 @@ public function add_settings( $settings ) {
$settings['stackable_auto_collapse_panels'] = get_option( 'stackable_auto_collapse_panels' );
$settings['stackable_enable_global_settings'] = get_option( 'stackable_enable_global_settings' );
$settings['stackable_enable_block_linking'] = get_option( 'stackable_enable_block_linking' );
$settings['stackable_enable_carousel_lazy_loading'] = get_option( 'stackable_enable_carousel_lazy_loading' );
$settings['stackable_enable_text_highlight'] = get_option( 'stackable_enable_text_highlight' );
$settings['stackable_enable_dynamic_content'] = get_option( 'stackable_enable_dynamic_content' );
$settings['stackable_enable_copy_paste_styles'] = get_option( 'stackable_enable_copy_paste_styles' );
Expand Down
10 changes: 0 additions & 10 deletions src/welcome/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ const SEARCH_TREE = [
id: 'optimizations',
children: [
__( 'Optimize Inline CSS', i18n ),
__( 'Lazy Load Images within Carousels', i18n ),
],
},
],
Expand Down Expand Up @@ -1178,15 +1177,6 @@ const Optimizations = props => {
} }
help={ __( 'Optimize inlined CSS styles. If this is enabled, similar selectors will be combined together, helpful if you changed Block Defaults.', i18n ) }
/>
<AdminToggleSetting
label={ __( 'Lazy Load Images within Carousels', i18n ) }
searchedSettings={ optimizations.children }
value={ settings.stackable_enable_carousel_lazy_loading }
onChange={ value => {
handleSettingsChange( { stackable_enable_carousel_lazy_loading: value } ) // eslint-disable-line camelcase
} }
help={ __( 'Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading.', i18n ) }
/>
</div>
}
</>
Expand Down
Loading