Make WordPress Core

Opened 4 months ago

Last modified 26 hours ago

#40199 new defect (bug)

Customize: collapse suggested and previously uploaded header images with accordions

Reported by: celloexpressions Owned by:
Milestone: 4.9 Priority: normal
Severity: normal Version: 3.9
Component: Customize Keywords: needs-patch
Focuses: ui Cc:


The custom header image control takes up quite a lot of space, which is why header videos are, somewhat confusingly, placed before the image control. We could improve this by collapsing the suggested and previously-uploaded images by default, making the headers/labels expandable/collapsable. That would allow larger image collections here without taking up too much space.

Alternatively, other ways to show these collections should be considered, such as in the media modal. Eventually, we'll want this UI pattern to be able to expand to be used in other media controls.

Attachments (1)

customizer-header-i2.png (453.6 KB) - added by folletto 27 hours ago.
Customizer Header Media i2

Download all attachments as: .zip

Change History (7)

#1 @folletto
4 months ago

Two things for this discussion:

  1. I'd try to avoid an accordion-like approach as we already moved away from that elsewhere, or, if we do, let's try to find ways and be clear about its usage. In this specific instance, I'd for example explore a "More at the end" approach of some kind instead of making the headers foldable.
  2. Can we maybe use a drill-down approach? (i.e. a menu like the top level one saying "More..." or "Past media..." that opens a new panel with just the list) This should be especially effective if we expect longer lists.

#2 @celloexpressions
2 months ago

Sure, it doesn't necessarily need to be an accordion. The key is making it take up less space by default. My initial though it that the titles can become button elements with arrow icons, and on click the contents slideToggle. Something simple that can be done in the interim until the header image control is brought back into the cropped image control and previous images are available to other control instances.

#3 @westonruter
2 months ago

  • Milestone changed from Awaiting Review to 4.8.1

I recall @melchoyce talking about wanting to implement similar UI as was implemented for the video widget, where an uploaded video and a URL can both be supplied in the media modal.

#4 @westonruter
6 weeks ago

  • Milestone changed from 4.8.1 to 4.9

This ticket was mentioned in Slack in #design by melchoyce. View the logs.

4 weeks ago

27 hours ago

Customizer Header Media i2

#6 @folletto
26 hours ago

Added a i2 design to address this issue (and more).

  1. Simplifies the "Header Media" page to a cleaner look, with the list of all the options clearly visible and with a uniform visual hierarchy.
  2. Moved all the options of each of the two panels (Header Image, Header Video) to sub-panels with full explanations.
  3. Removed the replication of the current selection between the list and the top item. Now the list is the selection.
  4. The list adds a checkbox to add a clear visual cue of which item is selected.
  5. The dotted area can be clicked or drag'n'dropped to add new images or videos.
  6. Randomize is an option, thus has been changed from a button to a checkbox (what happens when selected isn't designed yet, but it will mark the list and the image differently).
  7. Randomize now specifies the number of headers in the randomization, adding clarity.

This design thus addresses the space an confusion concerns of this ticket, also improving the overall visual hierarchy of the functionality and without introducing new design patterns makes it more modular for future additions.

Note: See TracTickets for help on using tickets.