[wp-meta] [Making WordPress.org] #5136: Banner and Icon sizes issue in plugin single page

[Making WordPress.org]

#5136: Banner and Icon sizes issue in plugin single page
------------------------------+--------------------
 Reporter:  YordanSoares      |      Owner:  (none)
     Type:  defect            |     Status:  new
 Priority:  normal            |  Milestone:
Component:  Plugin Directory  |   Keywords:
------------------------------+--------------------
 = Issue with Banners =

 Some days ago I noticed an issue with Banner and Icon sizes in the plugin
 single page of [https://wordpress.org/plugins/states-and-municipalities-
 of-venezuela-for-woocommerce/ this plugin]. According to
 [https://developer.wordpress.org/plugins/wordpress-org/plugin-
 assets/#filenames/ Plugin Handbook], the banner size should be:

 - Normal Banner: banner-772x250.(jpg|png)
 - Normal Banner (RTL): banner-772x250-rtl.(jpg|png)
 - High-DPI (Retina): banner-1544x500.(jpg|png)
 - High-DPI (Retina RTL): banner-1544x500-rtl.(jpg|png)

 The issue here is that the banner container have a width of 940px, 168px
 wider than banner normal size. To fill the remaining 168px, the image
 increase it sizes. This causes the image to pixel.

 Looking inside the plugin single page CSS, I saw this:

 1. Max-width of main container is 960px:
 {{{
 .site-main {
     margin: 0 auto;
     max-width: 960px;
     padding: 48.828px 25px;
     padding: 3.0517578125rem 1.5625rem;
 }
 }}}


 2. In screens wider than 737px, there are 10px both right and left size.
 So remains 940px:
 {{{
 @media screen and (min-width: 737px)
 .single .site-main, .site-main.single {
     padding: 0 10px 3.0517578125rem;
 }
 }}}

 Here is the banner container highlighted with it size:

 [[Image(https://i.imgur.com/3DrM8v9.png)]]

 If you see the normal banner size, it displayed with a little blur:

 [[Image(https://i.imgur.com/qrcT65i.png)]]

 I change the URL address using DevTools to load the Retina image and
 check, it looks better:

 [[Image(https://i.imgur.com/CpO2ofT.png)]]

 = Issue with Icons =

 This case is similar to the banner issue, but inverse. According to
 [https://developer.wordpress.org/plugins/wordpress-org/plugin-
 assets/#filenames-2/ Plugin Handbook], the icon sizes should be:

 - Normal: icon-128x128.(png|jpg)
 - High-DPI (Retina): icon-256x256.(png|jpg)
 - SVG: icon.svg

 In this case the selector force the icon to have 96px in both axis:

 {{{
 .single .entry-thumbnail .plugin-icon {
     -webkit-background-size: contain!important;
     background-size: contain!important;
     height: 96px!important;
     width: 96px!important;
 }
 }}}

 Here is the icon container highlighted with it size:

 [[Image(https://i.imgur.com/13AJ5FY.png)]]

 I see that this image does show 128px in **Dashboard > Plugins > Add
 new**, so I think, maybe this is a tweak to fix to the current plugin
 single page, but not a real solution, because the image displays deformed.

 = Fixing the issues =

 This problem could be solved very easily by updating the **Plugin
 Handbook** to match with the sizes of current version container, if it
 were not for the names of the images that contains the hard coded size.

 My suggestion is to modify the way the plugin single page request the
 banner and icon images filenames.

 With these file names, in future updates to the Plugin Directory, the file
 sizes will be more handleable (and less confusing) just updating Handbook:
 - Normal Banner: banner.(jpg|png)
 - Normal Banner (RTL): banner-rtl.(jpg|png)
 - High-DPI (Retina): banner at 2x.(jpg|png)
 - High-DPI (Retina RTL): banner at 2x-rtl.(jpg|png)

 In the icons case:
 - Normal: icon.(png|jpg)
 - High-DPI (Retina): icon at 2x.(png|jpg)
 - SVG: icon.svg

 Knowing that this will affect all plugins that already use images with the
 currently proposed filenames and sizes, this code modification it would
 have to be compatible with the previous version.

 Having done this, we need to update the **Plugin Handbook** to indicate
 that the sizes should be 960×311px for the normal image and 1920×622px for
 the Retina image. In the case of icon, I think just adjust the icon
 container in the plugin single page to match with 128×128px will be
 enough, at a least for size wider than 737px.

 This isn't a high priority issue, but I think it's important to improve
 design quality to the Plugin Directory.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/5136>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org