xwp/wp-widget-customizer

Add banner image to WordPress plugin directory

westonruter opened this issue · 15 comments

Via FAQ:

How do I make one of those cool banners for my plugin page?
Start by creating an assets/ directory in the root of your SVN checkout. This will be on the same level as tags/ and trunk/, for example.

Inside that assets/ directory, you can make a file named "banner-772x250.png" or "banner-772x250.jpg". The image must be exactly 772 pixels wide and 250 pixels tall. No GIFs.

To support high-DPI (aka "retina") displays, you can additionally make a file named "banner-1544x500.png" or "banner-1544x500.jpg". The image must be exactly 1544 pixels wide and 500 pixels tall. No GIFs. This image, if present, will only be served when the website detects that the viewing browser is on a high-DPI display. Read this feature's announcement post for more details and special notes about creating this image.

After you check in your new banner(s), it will appear the next time the plugin refreshes itself in the directory. This may take a few minutes.

For development and testing, you can add a URL parameter to your plugin's URL of "?banner_url=A_LINK_TO_YOUR_IMAGE" to preview what the page will look like with your own image. This will only work with your own plugins, you can not use this parameter on anybody else's plugins.

@westonruter Here is a first draft on the banner image (just the 772x250 for now):

banner-772x250

@johnregan3 great! Suggestion: could you make the window narrower so that the customizer form appears alongside the widget in the sidebar? I used twentytwelve in the screenshots I made, and with resizing the widget of the window it was easy to get the sidebar and the customizer control to appear side-by-side.

@westonruter Here's a different version based on your input:

banner-772x250

Looks good! What about adding some arrow overlay to indicate that the panel in the left will affect the preview on the right? A rough idea:

pasted_image_9_12_13_12_47_pm

@westonruter Sounds good. It gives a visual cue as to what's going on.

banner-772x250

@westonruter Here's one with some color:

banner-772x250-bl

@johnregan3 Looks really good! I like the color. Only other suggestion I would have is to make the arrow swoop down and then go up to the widget in the sidebar, you know to fill up some of the empty space in the banner.

@westonruter I see what you're saying.

banner-772x250-bl

There we go. Make it so!

@johnregan3 would you mind updating the banner image now to showcase the new collapsable UI you added, and maybe the new drag-and-drop reordering of widgets in the customizer section?

@westonruter I can do that!

Starting Point:
banner-772x250

@johnregan3 Great! Love the visualization of the drag-and-drop.

  • I think we can drop the bullet pointed text overlay, as it is obscuring an important company logo 😉
  • Could you expand one of the widget controls to show what is inside?
  • Maybe use another widget than a second Text widget instance.

Other than that, good to go!

💥 commit!