Please fix your WP.org Plugin screenshots

This is a mistake committed even by people I consider the Gods of WordPress (as you’ll see in the screenshot below) and plugins with a million downloads. Even the plugin’s created by the plugin reviewers weren’t spared. Rather than a mistake I would say they all overlooked this minor setting that can ruin a plugin hunter’s experience.

The WordPress.org plugin repository has (or rather had) an annoying feature, when you click on a plugin screenshot on the hopes of viewing it larger the browser pops up the download box like this:

I sent a HEAD request to the screenshot’s link using curl and got the following reply:

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Type: application/octet-stream
Date: Wed, 31 Dec 2014 16:22:53 GMT
Etag: "680057//wordpress-seo/assets/screenshot-1.png"
Last-Modified: Mon, 11 Mar 2013 21:59:57 GMT
Server: ECS (sin/EC29)
X-Cache: HIT
X-Pad: avoid browser bug
Content-Length: 195554

The Content-Type header is set to application/octet-stream which is why Firefox opened the download dialog box.

I’m not an expert in SVN or Git and thought this was how the plugin repo worked until I landed on this article by Sarah Gooding on WPTavern. It explained the importance of having screenshots for plugins but what caught my eye was a comment by Samuel Wood (aka Otto).

And set their mime type correctly in svn. Helps a lot. 🙂

I quickly googled “svn set mime type” and came up with the following solution. Users of TortoiseSVN please follow this documentation.

Enter the plugin directory:

cd your-plugin-dir

Check the status of the local copy to make sure there are no changes after the last check in.

svn stat

Check the existing MIME type of the image files.

svn propget svn:mime-type assets/*

It is most probably “application/octet-stream” which is why the images are being downloaded. Set their MIME type appropriately.

svn propset svn:mime-type image/jpeg assets/*.jpg
svn propset svn:mime-type image/jpeg assets/*.jpeg
svn propset svn:mime-type image/png assets/*.png

Check for differences now.

svn diff

You’ll see something like this for each image file:

Property changes on: assets/screenshot-1.png
___________________________________________________________________
Modified: svn:mime-type
- application/octet-stream
+ image/png

Check in the changes to the WP.org plugin repository.

svn ci -m "Modify mime-type of screenshots"

That’s it, wait for a few minutes and try clicking on the images under the “Screenshots” tab.

You can enable “auto-props” for subversion so that all files created in the future have their MIME type automatically set based on their extension.