Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

Picture Element Thumbnails

Get a picture element instead of an image tag for responsive images on your WordPress site.

This plugin introduces a couple of nifty functions to replace the_post_thumbnail() & get_the_post_thumbnail() in exchange for the responsive picture element. Use:

get_the_post_picture(
    $fallback_image_size,
    array(
        $breakpoint_1=>$image_size_1,
        $breakpoint_2=>$image_size_2
    )
    [, $id, $atts]
);

For example:

<?php echo get_the_post_picture(
    'single-featured-sm',
    array(
        '(min-width:768px)'=>'single-featured-md',
        '(min-width:992px)'=>'single-featured-lg',
        '(min-width:1200px)'=>'single-featured'
    )
); ?>

While this says 4.0 for minimum version, I would wager it'll be fine on most older installations.

Author Ethan Clevenger
Profile
Contributors eclev91
Tags thumbnails
  1. Install via the WordPress Plugin directory or upload this to your plugins folder.

  2. Activate from the Plugins screen on your Dashboard.

1.0

  • Initial launch!

1.0.2

  • Added get_the_attachment_picture() as an alternative to wp_get_attachment_image()

1.0.3

  • Resolve some notices regarding static functions

1.0.4

  • Resolve another static notice

What?

Adds the functions the_post_picture() and get_the_post_picture(). See the description for an example.

Why?

This is really a bigger question than the scope of this plugin, but see here.

Oh, you weren't talking about the picture element as a whole. There exists at least one plugin that will out-of-the-box replace all <img> tags with "picture" elements and set breakpoints based on the image sizes. But if you need art direction, you need the HTML5 <picture> element. This plugin gives you control over A. Which elements are replaced and B. What your breakpoints are.

Does the order of my sizes array matter?

Yup. Pass them smallest image to largest.

Browser Support?

The plugin includes PictureFill.js. This should polyfill most browsers. If you have an issue, please report it!

Can I use my custom image sizes?

Yessir.

Can I contribute?

PRs are welcome! See GitHub.

Share  
Download
Version 1.0.4

Requires WordPress version: 4.0 or higher

Compatible up to: 4.4.7

Last Updated 04 Oct 2016

Date Added: 16 Jun 2015

Evaluation
star1
star2
star3
star4
star5

0 stars
0 ratings
329 downloads

Compatibility

Not Enough Data

Reports:
Works: 0
Broken: 0