Making Better Banners for your Plugins

With the plugin directory now being converted to use language packs, it’s more and more likely that your plugin will be translated by others and available in our various international plugin directories. But banners are kind of a problem for a few of those directories.

Compare the Hebrew plugin directory to the English plugin directory. One thing you’ll probably notice right away is that the icons are on the other side. Hebrew is a Right to Left language, so the design for it is flipped. Click through to any of the plugin and you’ll notice something else: The banner image is the same, but the title is now on the opposite side of the page.

For some plugins, especially those who designed banners thinking that the title was in a fixed place, this can present a problem.

Probably the best solution is simply to make your banner work with either method. Compare Ninja Forms old banner vs. their new banner:

Old:

ninja-forms-plugin-hebrew-old

New:

ninja-forms-plugin-hebrew-new

For another example, take a look at Yoast’s SEO plugin.

Old:

yoast-seo-plugin-hebrew-old

New:

yoast-seo-plugin-hebrew-new

It’s an interesting stylistic difference, but the point is that they simply made the banner work for either case of title positioning. That’s honestly the best solution, IMO, because it also eliminates something from the banner that shouldn’t be there to begin with: Text.

Text in images is bad. It’s non-accessible. Screen-readers can’t read it. It’s non-translatable to other languages. It’s a pain. Avoid it.

However, sometimes people really like their designs. The design of a banner says a lot about the plugin, even though it’s just a big image. Some authors may want to be able to adjust their banner designs to adapt to the RTL language pages.

For this reason, a couple of weeks ago, we added RTL support to the banners. I’ve been holding off on announcing this here to make sure it worked okay, and it appears to work fine, so, here’s the announcement. 🙂

How to do it? There’s no magic to it. Just make your new banner, and name it with -rtl at the end of the name. Banner images live in the same directory as always, /assets. Nothing else changes.

An example if you want to see how this looks in the SVN: https://plugins.svn.wordpress.org/pluginception/assets/

And how it looks on the plugin page:

https://wordpress.org/plugins/pluginception/

pluginception-banner-ltr

https://he.wordpress.org/plugins/pluginception/

pluginception-banner-rtl

Strictly speaking, the banner on Pluginception didn’t need to be reversed. I only did so as a demonstration, to show you how it’s done. Nothing tricky to it.

In the future, adding support for specific locales may or may not happen. It is undecided if it is necessary, because, frankly, there’s a LOT of locales we have. Who wants to make individual banner images for 80+ languages? Best to just leave the text out of the banner instead.

Note that while the RTL banners are now active for WordPress.org, they have not yet made their way into core, so the banners won’t yet show up properly in WordPress installations. Working on it. 🙂