SrcSet Responsive Images for Wordpress

SrcSet responsive images for Wordpress allows you to assign a SrcSet group to an image size within Wordpress (e.g. medium or large). Any image within a post or page using that image size will have the SrcSet group's attribute applied to it resulting in responsive images using the srcset attribute. [youtube http://www.youtube.com/watch?v=2JTaunYbt1M] Why use SrcSet? The srcset attribute is fully supported by most modern mobile devices. Where the attribute shines is allowing developers and content creators to eaily create responsive images for Wordpress, swapping out large images for smaller ones more suitable to the size of the devices screen. This allows for less overhead when loading a website, improving load times, and reducing the amount of bandwidth visitors have to consume to view the site. How does TrueNorth SrcSet Plugin Help? SrcSet responsive images for Wordpress automates the generation of the srcset attribute for all images attached to or within a post/page's content. SrcSet groups can be setup for any image size registered with Wordpress and once setup all images using that image size (e.g. 'medium') will have that SrcSet group's attribute added to the img tag. No short codes, in fact no coding required at all! What about all my existing post images? SrcSet responsive images for Wordpress comes with a Regeneration tool which will search all your posts and pages (including custom post types) find any images using sizes which have SrcSet groups and automatically add the srcset attribute to each one! Verified contrib2dev project #d0ba1bfb7d445e852945ceaf0492e4ff. Support this project on contrib2dev.com.

1. Upload to the /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Go to Tools > SrcSet Settings and create a new SrcSet group under the 'General' options tab and click 'save changes'
4. Click the group options tab on the left for your new SrcSet group.
5. You want to create the srcset for all "large" images, so link this group to the 'large' image size be selecting it from the 'Image Size Relationship' drop down menu.
6. We need to tell the browser which image size to use when the browser size changes, start by selecting the 'small' breakpoint from the 'Select Breakpoint' drop down menu.
7. The default browser width for this breakpoint is 640px wide. We can leave this or use the 'Breakpoint Width' slider to customize this.
8. Now we need to tell the browser which image size we want it to display at this breakpoint. Using the 'Breakpoint Image Size' drop down menu we can either select an image size already registered with Wordpress OR we can create a new custom image size.
9. !!Important!! If you create a custom image size for any of your breakpoints you will have to regenerate your image thumbnails using a plugin such as "Regen. Thumbnails"
10. Complete steps 5 & 6 for each breakpoint (small, medium, large, large)
11. Save your SrcSet group options.
12. All existing posts/pages which have "large" images embedded in them will need to be converted to use your new SrcSet group.
13. !!Warning!! Backup your database BEFORE this step as the process is irreversible!! Click the 'Regeneration' tab in the plugin options on the left. Click the 'Regenerate srcset' button and wait for the process to complete. Now all your existing posts using "large" images are now using your SrcSet group!
14. Now whenever a user adds an image using the "large" size into a post/page content, the img html tag will also have your SrcSet group attribute added to it automatically!

Uninstall

1. Go to Tools > SrcSet Settings
2. Click "Regeneration" tab on the left of options page
3. Select "Uninstall srcset" from dropdown option
4. !!Warning!! Backup your database BEFORE this step as the process is irreversible!! Click the 'Regenerate srcset' button
5. You can now uninstall the plugin

1.0 Initial plugin launch. 1.1 Added uninstall option to regeneration tool to remove all instances of srcset from all images in all posts,pages,custom post types. 1.2 Added Picturefill.js expanding srcset support all browsers both desktop and mobile. 1.3 Altered the the filter used to hook into the_post_thumbnail() and get_the_post_thumbnail(). We now support wp_get_attachment_image() and wp_get_attachment_image_src() as well. 1.4 Updated Picturefill.js to v2.3.1, which fixes a JS error in Internet Explorer 8. Fixed some strict standards and notices when passing dimensions to an image call, rather than registered image sizes.