RICG-Responsive-Images Plugin

For the last few months, several members of the WordPress core team, Mat Marquis of the RICG, and I have been hard at work building a WordPress plugin. While this may not initially sound like very exciting news, the purpose of the plugin is to bring responsive images to the WordPress platform, with absolutely no effort needed by the user. And we think that’s pretty exciting. The plugin can be found here and you can contribute on Github here.

We all have some pretty big plans for this plugin, which means that we will continue to maintain and add features as needed. While the plugin can be viewed and installed by everyone, please consider it to be in beta for the time being. That being said, we would love to hear your feedback, so please feel free to use the Github repo for all questions, comments, and concerns.

How It Works

After installing the plugin and adding an image through the WordPress media uploader, a srcset attribute will be included in the html whenever that image is dropped into a post. This process is designed to be backwards compatible, meaning that it will work for new and old images alike. The same happens for featured images as well, meaning that <?php the_post_thumbnail(); ?> will also return a responsive image!

If you’re a theme developer, you can output a responsive image anywhere you’d like by using the following syntax:


<img src="pathToImage" <?php echo tevkori_get_src_sizes( TheIdOfYourImage, theLargestImageSizeNeeded ); ?> />

e.g)


<img src="myimg.png" <?php echo tevkori_get_src_sizes( 11, 'tevkoriMedium-img' ); ?> />

This plugin is a fork of wp-tevko-responsive-images, which is now deprecated, so please be sure to update!

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

Tim Evko

I'm a front end web developer from New York, with a passion for responsive web development, Sass, and JavaScript. I live on coffee, CodePen demos and flannel shirts. I can also be found on Twitter - @tevko.

5 Comments

  1. Great plugin, is it going to crop the image for thumbnail view or just reduce the quality ?

    • Thanks Abital! As it currently stands, the thumbnail image won’t be altered.

  2. Nice! How does the plugin deal with images intended to be used with uncommon ratios? For example something as 320x90px in the original thumbnail size.

  3. Really well done,
    Have been using the old wp-tevko stuff for a good while now. Cant wait to replace it with this!

  4. Hi!

    Since iOS 8 only supports the x2,x3 and x4 syntax, do you plan to implement that?

This post currently has 5 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *