{"id":36980,"date":"2015-06-16T12:56:22","date_gmt":"2015-06-16T12:56:22","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/picture-element-thumbnails\/"},"modified":"2016-10-04T14:37:21","modified_gmt":"2016-10-04T14:37:21","slug":"picture-element-thumbnails","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/picture-element-thumbnails\/","author":13919797,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.4","stable_tag":"1.0.4","tested":"4.4.34","requires":"4.0","requires_php":"","requires_plugins":"","header_name":"Wordpress Picture Elements","header_author":"Ethan Clevenger","header_description":"","assets_banners_color":"","last_updated":"2016-10-04 14:37:21","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"http:\/\/ethanclevenger91.github.io","rating":0,"author_block_rating":0,"active_installs":10,"downloads":1770,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.2","1.0.3","1.0.4"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[2956],"plugin_category":[50],"plugin_contributors":[95852],"plugin_business_model":[],"class_list":["post-36980","plugin","type-plugin","status-closed","hentry","plugin_tags-thumbnails","plugin_category-media","plugin_contributors-eclev91","plugin_committers-eclev91"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/picture-element-thumbnails.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"\n

This plugin introduces a couple of nifty functions to replace the_post_thumbnail()<\/code> & get_the_post_thumbnail()<\/code> in exchange for the responsive picture<\/code> element. Use:<\/p>\n\n

get_the_post_picture(\n    $fallback_image_size,\n    array(\n        $breakpoint_1=>$image_size_1,\n        $breakpoint_2=>$image_size_2\n    )\n    [, $id, $atts]\n);\n<\/code><\/pre>\n\n
For example:<\/p>\n\n
<?php echo get_the_post_picture(\n    'single-featured-sm',\n    array(\n        '(min-width:768px)'=>'single-featured-md',\n        '(min-width:992px)'=>'single-featured-lg',\n        '(min-width:1200px)'=>'single-featured'\n    )\n); ?>\n<\/code><\/pre>\n\n
While this says 4.0 for minimum version, I would wager it'll be fine on most older installations.<\/p>\n\n\n
    \n
  1. Install via the WordPress Plugin directory or upload this to your plugins folder.<\/p><\/li>\n
  2. Activate from the Plugins screen on your Dashboard.<\/p><\/li>\n<\/ol>\n\n\n
    \n
    What?<\/dt>\n
    Adds the functions the_post_picture()<\/code> and get_the_post_picture()<\/code>. See the description for an example.<\/p><\/dd>\n
    Why?<\/dt>\n
    This is really a bigger question than the scope of this plugin, but see here<\/a>.<\/p>\n\n
    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><\/code> tags with \"picture\" elements and set breakpoints based on the image sizes. But if you need art direction, you need the HTML5 <picture><\/code> element. This plugin gives you control over A. Which elements are replaced and B. What your breakpoints are.<\/p><\/dd>\n
    Does the order of my sizes array matter?<\/dt>\n
    Yup. Pass them smallest image to largest.<\/p><\/dd>\n
    Browser Support?<\/dt>\n
    The plugin includes PictureFill.js<\/a>. This should polyfill most browsers. If you have an issue, please report it!<\/p><\/dd>\n
    Can I use my custom image sizes?<\/dt>\n
    Yessir.<\/p><\/dd>\n
    Can I contribute?<\/dt>\n
    PRs are welcome! See GitHub.<\/a><\/p><\/dd>\n\n<\/dl>\n\n\n
    1.0<\/h4>\n\n
      \n
    • Initial launch!<\/li>\n<\/ul>\n\n
      1.0.2<\/h4>\n\n
        \n
      • Added get_the_attachment_picture()<\/code> as an alternative to wp_get_attachment_image()<\/code><\/li>\n<\/ul>\n\n
        1.0.3<\/h4>\n\n
          \n
        • Resolve some notices regarding static functions<\/li>\n<\/ul>\n\n
          1.0.4<\/h4>\n\n
            \n
          • Resolve another static notice<\/li>\n<\/ul>","raw_excerpt":"Get a picture element instead of an image tag for responsive images on your WordPress site.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/36980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=36980"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/eclev91"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=36980"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=36980"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=36980"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=36980"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=36980"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=36980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}