RTL plugin banners

[johnbillion]

BuddyPress is a good example of a plugin which has a banner image which doesn't work well with RTL. Many other plugins' banner images are designed specifically around the placement of the plugin title which is overlaid on the banner.

Should we introduce the ability to specify a separate RTL banner image?

Previously: ​#WP28229

[netweb]

Some examples via ​https://he.wordpress.org/plugins/

• ​https://he.wordpress.org/plugins/buddypress/
• ​https://he.wordpress.org/plugins/bbpress/
• ​https://he.wordpress.org/plugins/jetpack/
• ​https://he.wordpress.org/plugins/akismet/

Attached above are some horizontal flipped images of bbPress and BuddyPress assets from both plugins asset folders:

• ​https://plugins.trac.wordpress.org/browser/bbpress/assets
• ​https://plugins.trac.wordpress.org/browser/buddypress/assets

[ramiy]

I wrote a blog post on: ​How to Improve Your Plugin Header Image?

The solution is simple - Use bidirectional header images for LRT and RTL view.

[ramiy]

@netweb,

Adding a -rtl suffix is one solution. It's suitable for image without any text.

• banner-772x250.png
• banner-772x250-rtl.png

But what if the image has some text, why not allow the plugin authors to add different header images per local with text in the local language?

• banner-772x250.png
• banner-772x250-he_IL.png
• banner-772x250-de_DE.png
• banner-772x250-ru_RU.png

[netweb]

Related: ​https://twitter.com/GaryJ/status/648588107248496641 :)

The "locale" side of this conversation was raised on Twitter a few hours ago, let's see what Otto42 has to add here :)

[johnbillion]

An interim solution might be to give the plugin title a left position for RTL languages too, so the title is always positioned on the left.

Example for ​https://he.wordpress.org/plugins/user-switching/:

[ramiy]

Replying to johnbillion:

An interim solution might be to give the plugin title a left position for RTL languages too, so the title is always positioned on the left.

No no no...

Not a good solution!

In RTL the title should be on the right side.

The title position is perfect. don't change it.

[johnbillion]

Replying to ramiy:

The title position is perfect. don't change it.

Well it's not perfect, is it, because many plugins' header images don't anticipate the title being on the right hand side and end up looking terrible. It's a potential interim solution if RTL or locale-specific assets are going to take a while to implement.

[ramiy]

Replying to johnbillion:

Replying to ramiy:

The title position is perfect. don't change it.

Well it's not perfect, is it, because many plugins' header images don't anticipate the title being on the right hand side and end up looking terrible. It's a potential interim solution if RTL or locale-specific assets are going to take a while to implement.

The problem is with the images, not with the title position.

[ramiy]

I think we don't need to change nothing. We just need to update the documentation. To tell plugin authors to test the plugin page in LTR and RTL locals. Show them good and bad examples. And present edge cases.

[Otto42]

Supporting a separate -rtl.(png|jpg) for edge cases is a relatively straightforward problem. The resulting CSS would be easy to do using the html[dir="rtl"] trick.

Styling a separate background for locales would be feasible in the same manner, using something like :lang(he-IL), to pick an example. Need to test with that.

However, I'm not sure whether allowing locales is a good idea overall. There are a lot of them, and having potentially hundreds of images there makes for some daunting effort. Might be better overall to suggest background images not contain text. They're images, after all. Not descriptions.

[Otto42]

Replying to netweb:

Attached above are some horizontal flipped images of bbPress and BuddyPress assets from both plugins asset folders

A direct flip of the whole image is not always desirable. For example, your BuddyPress image has the logo-icon flipped incorrectly. Which does indeed make the argument for allowing rtl images, at least.

[Otto42]

Additional: Core uses these images as well. Gets them from the API. So, that has to be taken into consideration as well. If we're going to support these, core will need support for them added too. Some examples of how core's use of the existing banners look in various rtl admin styles would be helpful, if anybody can see those easily.

[kidsguide]

Supporting a separate -rtl.(png|jpg) for edge cases is a relatively straightforward problem.

If it is relatively straightforward then why don't we do it?

[Otto42]

Replying to kidsguide:

If it is relatively straightforward then why don't we do it?

Because we need to understand what is the correct solution before it is implemented, instead of fixing it later.

[dd32]

There's really only 3 options here:

1. rtl version
2. per-locale version
3. text-position: left version

It's probably worth doing both 1 & 2 in a fallback style: Use a locale variant if exists, use a rtl variant if exists, use the main version (if it exists, else auto-generate!)

Potentially it'd be worth doing locale, rtl, text-position: left for many images though, but it doesn't feel right to have left aligned text as most of the images which need it are likely to have english words in the image anyway (or can easily add the rtl variant)

[kidsguide]

It's probably worth doing both 1 & 2 in a fallback style: Use a locale variant if exists, use a rtl variant if exists, use the main version (if it exists, else auto-generate!)

I agree. I think it would be best if both 1 & 2 were done. If only 2 was done then it would involve to much work to create a banner for each locale. But on the other hand if only 1 was done then it wouldn't provide as much freedom to customize your banner for each locale.

I don't think 3 is a good option. If it should be aligned to the left then it would not be proper. For that reason I think option 3 should be out of the question.

[ramiy]

Replying to kidsguide:

I don't think 3 is a good option. If it should be aligned to the left then it would not be proper. For that reason I think option 3 should be out of the question.

I agree, the third option is not good. I tested this in Hebrew (an RTL language), it looks strange, the title aligned to left and the text aligned to right. I also tested this in WordPress dashboard plugin popup.

Giving developers control over title position is like mixing apples with oranges. Also, it will create inconsistent UI, in some plugins the title will be on the right side, and others on the left.

I strongly believe in education. We need to update the documentation (and publish a post on make.w.org), to tell plugin developers that the title may hide some parts of the image - the designer should consider this when creating new cover images.

[Otto42]

Let's narrow the focus a bit. Only talking about the -rtl.png|jpg case (1) here.

Is there any good reason to *not* implement this, or to implement it in a different manner? Future compatibility? Anything at all.

The rtl case is the easiest one to implement starting out, and I can do it right now without any major concerns. Locales is only slightly harder, and also something that could be considered as an add-on later.

If we're all on-board with -rtl only, for now, then we can give it a try and see how it works. Iron out the kinks.

[ramiy]

@Otto42, if it's easy to implement, do it.

But it's not only the plugin directory, you also need to update wordpress dashboard - we have plugin info popups. The popup has to show "-rtl" banners in RTL installations.

[kidsguide]

Replying to Otto42:

If we're all on-board with -rtl only, for now, then we can give it a try and see how it works. Iron out the kinks.

I am on board. Do it.

But it's not only the plugin directory, you also need to update wordpress dashboard - we have plugin info popups. The popup has to show "-rtl" banners in RTL installations.

@ramiy has a good point. We would need to also do RTL banners for the plugin popups in admin.

[Otto42]

Changing WordPress.org's code is easy. I have a patch already. Will test it some first.

But the second part is not easy to implement. That's both a change to the API and to the core code.

Core generates that popup. It would need to know about the rtl banners (which we can send it via the API), and it would need stylesheet changes as well. Examine wp-admin/includes/plugin-install.php, line 490:

​https://core.trac.wordpress.org/browser/trunk/src/wp-admin/includes/plugin-install.php#L490

[ramiy]

Replying to Otto42:

But the second part is not easy to implement. That's both a change to the API and to the core code.

I think it can be done by changing only the API, without changing the core code.

The plugins_api() function accepts $locale parameter. You can check on ​api.wordpress.org, if the local is RTL. If it's an RTL local, return the RTL banner (if it exists), else return the regular banner.

It should be done for both low and high resolution banners.

[Otto42]

Hmm. That's a bit overridey. I get it, but I would be happier with specific fields. I'll look into it.

[Otto42]

Are there any objections to doing this only on the w.org site to start with, and ignoring the API/core issues? For now.

[dd32]

Do w.org, core can follow up later.

[kidsguide]

Do w.org, core can follow up later.

Exactly what I was about to say. ;)

[Otto42]

RTL image support added to [dotorg:11077].

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

This is done with a separate image using the -rtl suffix.

​http://plugins.svn.wordpress.org/pluginception/assets/

The data is available to core via the API, using the low-rtl and high-rtl banner data. However, core would need to be modified to use it. If that happens, we may want to rethink how the data is sent, but that's a change for down the road.

For locale specific banners, we'll consider that in a new ticket depending on how this goes.

[johnbillion]

Thanks for your work on this, @Otto42.

[netweb]

Awesome, thanks Otto, bbPress RTL banners added in ​https://plugins.trac.wordpress.org/changeset/1275823/ :)

​https://he.wordpress.org/plugins/bbpress/

[Otto42]

Related: ​https://core.trac.wordpress.org/ticket/34667