Page MenuHomePhabricator

Develop a new template for CentralNotice banners
Open, Needs TriagePublic

Description

Develop an updated template that community CentralNotice banners can be based on

Main aims

  • Cleaner code
  • Flexible design, with space for image/icon and a call to action (CTA) button
  • Look nice on all skins, including mobile and Vector 2022
  • Ensure accessibility

Nice to have

  • Use CSS variables?
  • Build in code for targeting by edit count, group etc

Event Timeline

I've been working on: https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/rae_template_v1

not done yet, trying to clean it up and look into how best to handle images of different sizes. seems flexboxes are the way to go, and changing max-width size to set optimal image sizes.

we could make a template and then write up a usage guide for people less familiar with html/css

Thinking along here: a recent request I saw on Meta was to make sure banners are respectful to the new Dark Mode settings, so maybe also try and work that into the new template.

Here's my work in progress rewrite (as just presented in the Hackathon showcase) https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/pcoombe_2024_08_new_template_2 (preview). It works in dark mode and all skins, and should handle most image sizes okay.

Things I still need to do:

  • make the whole banner clickable
  • add the translations link
  • tweak sizing on mobile

On 1 September Wiki Loves Monuments is going to start and I will be in charge of getting the CentralNotice banners up and running. It would be great if we could use a banner template that can work with the Dark Mode settings. I have zero knowledge of the codes (yet) due time constraints the past period and the rest of this month. If you have a good example that works for mobile and for the Dark Mode settings, I can copy and modify it for WLM use.

The example linked above is the default grey-white style often used for other campaigns. Wiki Loves Monuments uses a red style (border). See for example this banner.
For some countries it is needed to have an extra image on the right side too (which would be more appealing for participants to join a contest). See this banner as example with an image on the right side.

Another large photo contest is Wiki Loves Earth. Their style is green to reflect the common colour of nature. If possible it would be great to have a template for WLE too. See for example this banner.
Also here an extra image on the right is possible.

I have added dark mode styles to all the 2024 Wiki Loves Monuments banners, except for Russia and Germany which seem to work fine already.

I'm also very interested in seeing if we can find a way to combine most of these banners for future WLM campaigns, so there aren't so many to create and edit.

@Pcoombe: Removing task assignee as this open task has been assigned for more than two years - See the email sent to task assignee on October 11th.
Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome! :)
If this task has been resolved in the meantime, or should not be worked on by anybody ("declined"), please update its task status via "Add Action… 🡒 Change Status".
Also see https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator. Thanks!