Banner and Icon sizes issue in plugin single page

[YordanSoares]

Issue with Banners

Some days ago I noticed an issue with Banner and Icon sizes in the plugin single page of ​this plugin. According to ​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:

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

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

Issue with Icons

This case is similar to the banner issue, but inverse. According to ​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:

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@2x.(jpg|png)
• High-DPI (Retina RTL): banner@2x-rtl.(jpg|png)

In the icons case:

• Normal: icon.(png|jpg)
• High-DPI (Retina): icon@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.

[Otto42]

Banner sizes are for the pages in the WordPress software itself, not the sizes for the WordPress.org site, which changes more often than the core software display does.

[YordanSoares]

Don't you think it would be better, then, to use a new image file for use in the plugin single page?

I wonder if I'm the only one who has asked these questions. I repeat, I know that this isn't a priority, but I think it would be good to review this topic at some point.

I'm thinking in something like banner-{directory-name}.(jpg|png) (and its equivalent for RTL and Retina), where {directory-name} will be the name chosen version using in plugin single page. This way, would be more handleable if a new release of Plugins Directory is launched.

To avoid issues with current plugin using original Dashboard images, there will be a fallback/backward compatibility with those images for developers that doesn't include one relative to the plugin single page.

Right now, the way the developer are handling this issue is skipping the good practice to set the 772x250 images to x2 size. E.g. ​WooCommerce 772x250 banner, a size that doesn't match with the filename.