How to set responsive images with custom fields

In this bit’o code, I’m getting an image from an ACF field and building an <img tag for it, using a responsive srcset.

https://github.com/sterndata/wagw3/blob/master/content-grid.php#L28

Thanks! And what about using something like this? should it work as well?

<?php echo wp_get_attachment_image( get_field('imagen'), large,false, array('alt' => the_title(), 'class' => 'center-block aniview sizes-img-act lazyload') ); ?>

I’m doing something wrong as it is displayed then disappears

  • This reply was modified 6 days, 1 hour ago by snippet24.

That won’t add the srcset. You need to add that. See https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

mmmm then why this code is actually working?
https://drive.google.com/file/d/1RbdaFoyxjVBtwkOiAS6KNpwS-B335TwH/view?usp=sharing
that is the output of this and contains all the srscset versions as far as I can tell.

<?php echo wp_get_attachment_image( get_field('imagen'), full,"", array('alt' => 'holaa', 'class' => 'center-block sizes-img-act') ); ?>

The reason I couldn’t display it before was because I had the aniview class and for it to that css animation to work I need to insert somehow an image tag atributte (which is this one: data-av-animation=”fadeIn”) No idea how to add that to “wp_get_attachment_image”


<?php $image = wp_get_attachment_image_src(get_field('imagen'), 'full'); ?>
      <img alt="<?php the_title(); ?>" data-src="<?php echo $image[0]; ?>" class="center-block aniview sizes-img-act lazyload" data-av-animation="fadeIn"/>

EDIT:It was easier than I thought solved…

  • This reply was modified 6 days ago by snippet24.
  • This reply was modified 6 days ago by snippet24.
  • This reply was modified 6 days ago by snippet24.



Source link