Stefan Ledin

Responsify WP 1.6.4

Responsify WP 1.6.4 has been released and it’s a really good update. As usual, it contains bugfixes and improvements under the hood. It also has one new feature that is the ability to ”turn off” Picturefill and enter a native mode. But most importantly, RWP has finally gotten a suite of unit tests.

The sizes attribute on the <img> tag has had a default value of 100vw. That means that an 500 pixel wide image will be used as long as the viewport is 500 pixels wide or less.

No more 100vw

Well, that’s what I though. In browsers like Safari and Firefox, that still lacks support of the new responsive image solutions, that was the result. But in Chrome, which has support, this was not the behavior.
An 1024 pixels wide image always became as wide as the viewport, even if it was wider than the actual image.
This actually turned out to be an bug in Picturefill. The solution is to specify breakpoints based on all image sizes. Similar to what you would to with the <picture> element.

<img srcset="thumbnail.jpg 150w, medium.jpg 300w, large.jpg 1024w" sizes="(min-width: 300px) 1024px, (min-width: 150px) 300px, 150px">

From now on, RWP will work as expected in browsers with and without support for the new image solutions.

Native mode

Speaking on browsers that doesn’t need Picturefill. After receiving multiple requests from users that wanted the ability to use the plugin without Picturefill, I added that feature to my todo list.
Even though it was a fairly easy feature to add, it wasn’t as easy as just don’t enqueue the picturefill.js file. The markup was required to change just a little bit.
For example, the <img> tag should have the src attribute.

<img src="thumbnail.jpg" srcset="medium.jpg 300w, large.jpg 1024w" sizes="(min-width: 300px) 1024px, (min-width: 150px) 300px, 150px">

Why is this missing in the ”picturefill mode”, you might wonder? The reason is that browsers that doesn’t understand what srcset and sizes means, will always start to download the image that src is pointing to. That’s because the browser starts to download images before the picturefill script has been loaded and can prevent that.

Unit tested

The biggest news, at least according to me, is that RWP finally has a suite of unit tests. Test Driven Development really makes the process of adding new features faster! You don’t have to constantly check that other, older things still works. When the tests are green, you are done and you don’t have to worry about shipping new bugs.
Unit testing a WordPress plugin is quite tricky though, at least before you figure out how to do it. Expect a blog post about this subject in a few weeks.

1K and the feature

RWP finally became a plugin that has been downloaded over 1000 times the other day. It took somewhere between five to six months getting to this milestone. I didn’t know what to expect when releasing it, so I’m quite happy with how things developed.
But now, when it really has become a mature plugin, I would like to increase the number of users in a faster rate.
Beside of that, my goals for the near feature is to add these features: