How to use in a picture tag for responsive images.

[tomasts248]

It works on regular images, buy I'm unable to get it to work with

<picture>
                    <?php $image2xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'orginal'); ?>
                    <?php $image1xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'orginal'); ?>
                      <source srcset="<?php echo $image2xretina[0]; ?>" media="(min-width: 1600px)">
                      <source srcset="<?php echo $image1xretina[0]; ?> 1x, <?php echo $image2xretina[0]; ?> 2x">
                      <img class="thumbnail img-fluid imagen-fondo" srcset="<?php echo $image2xretina[0]; ?>" alt="<?php the_title(); ?>">
                   </picture>

[geosigno]

It should work on picture tags. Could you please share a Codepen with proper HTML and no PHP so it's easier to find what is wrong here.

[tomasts248]

This is the code output of the same code from above
<picture> <source data-srcset="https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-650x650.jpeg" media="(min-width: 1600px)" srcset="https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-650x650.jpeg"> <source data-srcset="https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-325x325.jpeg 1x, https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-650x650.jpeg 2x" srcset="https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-325x325.jpeg 1x, https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-650x650.jpeg 2x"> <img class="thumbnail lazyloaded" data-srcset="https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-650x650.jpeg" alt="Programa de Formación Budista: Bardo Thodrol – Entendiendo la Vida y la Muerte Parte II" loading="lazy" srcset="https://www.otzerling.com/wp-content/uploads/2020/09/WhatsApp-Image-2020-09-23-at-19.51.04-650x650.jpeg"> </picture>

[geosigno]

Could you please share the JS code that you are using to init simpleParallax?

[tomasts248]

sure
I tried this

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js"></script>
<script>
var image = document.getElementsByClassName('img-fluid');
new simpleParallax(image, {
	scale: 1.1});
</script>

and this as well

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js"></script>
<script>
var images = document.querySelectorAll('img');
new simpleParallax(images, {
	scale: 2});
</script>

In this one works but only for regular non images in picture tags

var images = document.querySelectorAll('picture');
new simpleParallax(images, {
	scale: 2});

and also with this (didnt work)

[tomasts248]

Hi question is there a beta version I can try with the bug fixed?

[iWangJiaxiang]

Hi, is the bug fixed now? because I am using picture tag now