How to fix layout shift with images lodad via custom fields
-
So setting data-sizes=”auto” doesn’t seem to help…
I’m using this structure. And also set the plugin to lazyload custom fields which is working.<picture> <?php $xoriginalximage2xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'original'); ?> <?php $xoriginalximage1xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'original'); ?> <?php $xmediumximage2xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'medium_large'); ?> <?php $xmediumximage1xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'medium'); ?> <source media="(max-width: 768px)" data-srcset="<?php echo $xmediumximage1xretina[0]; ?> 1x, <?php echo $xmediumximage2xretina[0]; ?> 2x"> <source media="(max-width: 1000px)" data-srcset="<?php echo $xlargeximage1xretina[0]; ?> 1x, <?php echo $xlargeximage2xretina[0]; ?> 2x"> <img height="500px" class="thumbnail img-fluid imagen-fondo lazyload" data-srcset="<?php echo $xoriginalximage2xretina[0]; ?>" alt="<?php the_title(); ?>"> </picture>
Edit the problem could be related to these other images
<picture> <?php $image2xretina = wp_get_attachment_image_src(get_sub_field('imagen'), 'medium_large'); ?> <!--<?php $image1xretina = wp_get_attachment_image_src(get_sub_field('imagen'), 'medium_large'); ?> <source data-srcset="<?php echo $image2xretina[0]; ?>" media="(min-height: 1600px)"> <source data-srcset="<?php echo $image1xretina[0]; ?> 1x, <?php echo $image2xretina[0]; ?> 2x">--> <img class="img-fluid thumbnail custom-img-fluid lazyload" srcset="<?php echo $image2xretina[0]; ?>"> </picture>
- This topic was modified 4 years ago by .
- This topic was modified 4 years ago by .
- This topic was modified 4 years ago by .
The page I need help with: [log in to see the link]
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘How to fix layout shift with images lodad via custom fields’ is closed to new replies.