0

When WordPress 4.4 was released, it added the ability to make your feature images responsive using the picturefill JavaScript libraries. Is anyone else having problems with the <picture> tag? Sometimes it works, sometimes it doesn't.

Code I'm using for responsive feature images:

<picture>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(max-width: 599px)"></a>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(max-width: 767px)"></a>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg"></a>
<!-- fallback -->
<a href="<?php the_permalink(); ?>"><img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg" alt="alt text"></a>
</picture>

When I copy an example code css-tricks.com, this works:

<picture>
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(min-width: 1000px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(min-width: 800px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg.jpg"> 
<!-- fallback -->
<img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg.jpg" alt="alt text">
</picture>

Then I replace the media elements with the ones from the first example. Any ideas what's causing this to work then not work when I add another post or change the feature image?

Thanks,

1

Got it working by removing the <a href> from the image. This is the proper way of doing a responsive image with a link:

<a href="<?php the_permalink(); ?>">
<picture>
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(max-width: 599px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(max-width: 767px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg">
<!-- fallback -->
<img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg" alt="alt text">
</picture>
</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.