WordPress.org

Making WordPress.org

Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#757 closed enhancement (fixed)

RTL plugin banners

Reported by: johnbillion Owned by: Otto42
Milestone: Priority: normal
Component: Plugin Directory Keywords: ux-feedback
Cc:

Description

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

Attachments (4)

banner-772x250-rtl.png (25.0 KB) - added by netweb 4 years ago.
banner-1544x500-rtl.png (45.0 KB) - added by netweb 4 years ago.
banner-772x250-rtl.2.png (12.5 KB) - added by netweb 4 years ago.
banner-1544x500-rtl.2.png (230.2 KB) - added by netweb 4 years ago.

Download all attachments as: .zip

Change History (41)

#1 @melchoyce
5 years ago

  • Keywords ux-feedback added

#3 @ramiy
4 years ago

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.

#4 @ramiy
4 years ago

@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
Last edited 4 years ago by ramiy (previous) (diff)

#5 @netweb
4 years ago

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 :)

Last edited 4 years ago by netweb (previous) (diff)

#6 follow-up: @johnbillion
4 years ago

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/:

https://i.imgur.com/JACeEQn.png

#7 in reply to: ↑ 6 ; follow-up: @ramiy
4 years ago

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.

#8 in reply to: ↑ 7 ; follow-up: @johnbillion
4 years ago

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.

#9 in reply to: ↑ 8 @ramiy
4 years ago

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.

#10 @ramiy
4 years ago

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.

#11 @Otto42
4 years ago

  • Owner set to Otto42
  • Status changed from new to accepted

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.

#12 in reply to: ↑ 2 @Otto42
4 years ago

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.

#13 @Otto42
4 years ago

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.

#14 @kidsguide
4 years ago

  • Cc mpsplugins@… added

#15 @atimmer
4 years ago

  • Cc services@… added

This ticket was mentioned in Slack in #meta-i18n by netweb. View the logs.


4 years ago

#17 follow-up: @kidsguide
4 years ago

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?

#18 in reply to: ↑ 17 @Otto42
4 years ago

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.

#19 @dd32
4 years ago

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)

#20 follow-up: @kidsguide
4 years ago

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.

#21 in reply to: ↑ 20 @ramiy
4 years ago

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.

#22 follow-up: @Otto42
4 years ago

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.

#23 @ramiy
4 years ago

@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.

#24 in reply to: ↑ 22 @kidsguide
4 years ago

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.

#25 follow-up: @Otto42
4 years ago

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

#26 in reply to: ↑ 25 @ramiy
4 years ago

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.

#27 @Otto42
4 years ago

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

#28 @Otto42
4 years ago

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

#29 follow-up: @dd32
4 years ago

Do w.org, core can follow up later.

#30 in reply to: ↑ 29 @kidsguide
4 years ago

Do w.org, core can follow up later.

Exactly what I was about to say. ;)

#31 @Otto42
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

This ticket was mentioned in Slack in #meta-i18n by otto42. View the logs.


4 years ago

This ticket was mentioned in Slack in #buddypress by netweb. View the logs.


4 years ago

This ticket was mentioned in Slack in #bbpress by netweb. View the logs.


4 years ago

#35 @johnbillion
4 years ago

Thanks for your work on this, @Otto42.

Note: See TracTickets for help on using tickets.