Advanced Search

Posted By

metisonline on 10/30/12

Tagged

Versions (?)

Last Edited at 10/30/12 05:40pm

Statistics

Viewed 35 times
Favorited by 0 user(s)

Picturefill Implimentation

/ Published in: PHP
Save to your folder(s)
Using the Picturefill and our custom post thumbnails

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?php if (has_post_thumbnail( $post->ID ) ): ?>
  2.  
  3. <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'responsive-small' );
  4. 	  $image2 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'responsive-medium' );
  5. 	  $image3 = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'responsive-large' ); ?>
  6.  
  7. <picture alt="Picture fill for Wordpress using post thumbnail sized images">
  8. 				<!-- <source src="external/imgs/small.jpg"> -->
  9. 				<source src="<?php echo $image[0]; ?>">
  10. 				<!-- <source src="external/imgs/medium.jpg" media="(min-width: 400px)"> -->
  11. 				<source src="<?php echo $image[0]; ?>" media="(min-width: 400px)">
  12. 				<!-- <source src="external/imgs/large.jpg" media="(min-width: 800px)"> -->
  13. 				<source src="<?php echo $image2[0]; ?>" media="(min-width: 800px)">
  14. 				<!-- <source src="external/imgs/extralarge.jpg" media="(min-width: 1000px)"> -->
  15. 				<source src="<?php echo $image3[0]; ?>" media="(min-width: 1000px)">
  16.  
  17. 				<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
  18. 				<noscript><img src="<?php echo $image2[0]; ?>" alt="Picture fill for Wordpress using post thumbnail sized
  19.                                 images"></noscript>
  20. </picture>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.