RICG Responsive Images

Description

Bringing automatic default responsive images to WordPress.

This plugin works by including all available image sizes for each image upload. Whenever WordPress outputs the image through the media uploader, or whenever a featured image is generated, those sizes will be included in the image tag via the srcset attribute.

Important notes

• As of WordPress 4.4, images are responsive by default. If you are on WordPress 4.4 or plan to update, you will not need to install this plugin.

If you have had this plugin installed since before version 2.5 but are running version 4.4 of WordPress, it is important that you leave the plugin installed. This is because all versions of the plugin before version 2.5 relied on a data-sizes attribute being present on an image in order to provide the responsive markup needed. If the plugin in this case is removed, then images in posts will be left with invalid markup. We are working to address this issue, and you can keep track of our progress here at https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/issues/178.

You can still use the plugin for advanced image compression support or as a simple way to include the picturefill script. The plugin will fall back to WordPress default functions if responsive image support is detected in your installation.

• Version 3.1.0 includes important changes that make this plugin compatible with WordPress version 4.4. Upgrading is highly recommended.

• As of version 2.5.0, the plugin adds srcset and sizes attributes to images on the front end instead of adding them to the image markup saved in posts.

Full documentation and contributor guidelines can be found on Github

Installation

1. Upload plugin-name.php to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. If you’d like to enable the advanced image compression feature, Please see the instructions at https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/tree/dev#advanced-image-compression

FAQ

Installation Instructions

1. Upload plugin-name.php to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. If you’d like to enable the advanced image compression feature, Please see the instructions at https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/tree/dev#advanced-image-compression

Reviews

++

curvesdesign November 24, 2017

++

Greats

mhutstore September 3, 2016

Thanks….<a href=”https://www.mesinhitunguangtissor.com/blog/harga-mesin-kasir-murah “>Harga Mesin Kasir Murah

Image Bloat

cynematik September 3, 2016 3 replies

I really like the idea of this plugin but my site suffered significant “bloat” because of the variety of image sizes that the plugin made of each upload. Now, I get error warnings when using Duplicator because of the huge image folder. I also disabled the plugin and will go through and try to eliminate the code issues and the many, many sizes of each image.

Yes but no

NightL September 3, 2016 3 replies

I like the idea of this and I believe this plugin would be a benefit for those who wish to place a LOT of large dimension images on their website. For my purposes I will remove the plugin and will have to go through code to remove unnecessary and unwanted code. When I need it, it will be much easier to manually put the code in and utilise the varying sizes WordPress outputs when uploading images. Browser support for the srcset attribute is still limited – initially I thought it still a great idea to benefit those who use browsers that support srcset. But I regularly place small images/thumbnails that link to lightbox versions. The plugin was placing code onto the 150×150 thumbnails – which is pointless and adds code clutter. I deactivated the plugin, deciding only to turn it on for inserting large images. Recently I discovered, on opening up the read more divs on my website that all the images within were now displaying at 100% width. This totally broke the layout of the pages and obviously images of 200px wide now looked horrible when displaying many times bigger than actual resolution. I activated the plugin and the images displayed correctly again – but now I am back with unnecessary code being added to thumbnails. The reason I didn’t notice this earlier was all other images inserted, while plugin was activated, beyond the expanding divs were in max-width containers. I believe a recent Wordpress or plugin update created this display issue. If there were a check box added within the Add Media section that would allow the code only to be placed when checked would make me be happy to have the plugin installed and activated.

The idea is great but…

thatgrrl September 3, 2016 4 replies

I did not like having all the images sizes added to the code in my post. When I went to the post I was getting code errors for images which are not in the post (because they were off sizes from the actual image). Now, after uninstalling the plugin I still have all that extra code in every post. I’m going to have a lot of clean up from this plugin. Of course, I’m not happy with that. I think your idea for this plugin is right on the mark. But, the practical side of making it work needs change. Adding extra code to the post is not something I want to do. I’m leaving this as a review so others will know what to expect and (though it may not seem like it) to encourage the developers. I’m not rating the plugin low because it does what it says it will do.

Contributors & Developers

Changelog

3.1.1

• Fixes a bug where the srcset of images in imported content was missing or broken.
• Improved calculation of ratio difference for images to be included in the srcset.
• Fixes a bug where img tags without ending slash don’t get responsive images.
• Deprecates the helper function tevkori_get_media_embedded_in_content() which is no longer used.
• Makes sure that the setup of default themes doesn’t break the tests.
• Adds more examples to the Hook Reference in readme.md.
• Corrections and improvements to inline documentation.

3.1.0

• Adds special handling of GIFs in srcset attributes to preserve animation.
• Makes internal srcset/sizes functions more consistent.
• Fixes a bug where functions hooked into tevkori_image_sizes_args were not firing.
• Fixes a bug where custom sizes attributes added via the post editor were being overwritten.
• Deprecates hook wp_get_attachment_image_sizes.
• Fixes a bug where the_post_thumbnail() would fail to add srcset/sizes attributes.
• Several improvements to internal inline documentation.
• Major improvements to function/hook documentation in readme.md after 3.0.0 changes.

3.0.0

• Deprecates all core functions that will be merged into WordPress core in 4.4.
• Adds compatibility shims for sites using the plugin’s internal functions and hooks.
• Adds a new display filter callback which can be use as general utility function for adding srcset and sizes attributes.
• Fixes a bug when wp_get_attachment_metadata() failed to return an array.
• Update our tests to be compatible with WordPress 4.4
• Upgrade to Picturefill 3.0.1
• Clean up inline docs.

2.5.2

• Numerous performance and usability improvements
• Pass height and width to tevkori_get_sizes()
• Improved regex in display filter
• Avoid calling wp_get_attachment_image_src() in srcset functions
• Improved coding standards
• Removed second regular expression in content filter
• Improved cache warning function
• Change default $size value for all functions to ‘medium’

2.5.1

• Query all images in single request before replacing
• Minor fix to prevent a potential undefined variable notice
• Remove third fallback query from the display filter

2.5.0

• Responsify all post images by adding srcset and sizes through a display filter.
• Improve method used to build paths in tevkori_get_srcset_array()
• Added Linthub config files
• Returns single source arrays in tevkori_get_srcset_array()
• Add tests for PHP7 to our Travis matrix
• Add test coverage for tevkori_filter_attachment_image_attributes()

2.4.0

• Added filter for tevkori_get_sizes, with tests
• Added Composer support
• Compare aspect ratio in relative values, not absolute values
• Cleanup of code style and comments added
• Added PHP 5.2 to our Travis test matrix
• Fixed unit test loading
• Preventing duplicates in srcset array
• Updated docs for advanced image compression
• Formatting cleanup in readme.md
• Bump plugin ‘Tested up to:’ value to 4.3
• Remove extra line from readme.txt
• Added changelog items from 2.3.1 to the readme.txt file
• Added ‘sudo: false’ to travis.ci to use new TravisCI infrastructure
• Removing the srcset and sizes attributes if there is only one source present for the image
• Use edited image hash to filter out originals from edited images
• Make output of tevkori_get_srcset_array filterable

2.3.1

• First char no longer stripped from file name if there’s no slash
• Adding test for when uploads directory not organized by date
• Don’t calculate a srcset when the image data returns no width
• Add test for image_downsize returning 0 as a width

2.3.0

• Improved performance of get_srcset_array
• Added advanced image compression option (available by adding hook to functions.php)
• Duplicate entires now filtered out from srcset array
• Upgrade Picturefill to 2.3.1
• Refactoring plugin JavaScript, including a switch to ajax for updating the srcset value when the image is changed in the editor
• Now using wp_get_attachment_image_attributes filter for post thumbnails
• Readme and other general code typo fixes
• Gallery images will now contain a srcset attribute

2.2.1

• Patch fixing missing JavaScript error

2.2.0

• The mandatory sizes attribute is now included on all images
• Updated to Picturefill v2.3.0
• Extensive documentation included in readme
• Integrated testing with Travis CLI
• Check if wp.media exists before running JavaScript
• Account for rounding variance when matching ascpect ratios

2.1.1

• Adding in wp-tevko-responsive-images.js after file not found to be in WordPress repository
• Adjusts the aspect ratio check in tevkori_get_srcset_array() to account for rounding variance

2.1.0

• This version introduces a breaking change: There are now two functions. One returns an array of srcset values, and the other returns a string with the srcset=".." html needed to generate the responsive image. To retrieve the srcset array, us tevkori_get_srcset_array( $id, $size )
• When the image size is changed in the post editor, the srcset values will adjust to match the change.

2.0.2

• A bugfix correcting a divide by zero error. Some users may have seen this after upgrading to 2.0.1

2.0.1

• Only outputs the default WordPress sizes, giving theme developers the option to extend as needed
• Added support for featured images

2.0.0

• Uses Picturefill 2.2.0 (Beta)
• Scripts are output to footer
• Image sizes adjusted
• Most importantly, the srcset syntax is being used
• Works for cropped images!
• Backwards compatible (images added before plugin install will still be responsive)!