Add images to homepage
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	apaskulin
	Jan 12 2022, 6:09 PM

Description

Add images to make the homepage more visual and create an image credits page to properly attribute images

Reference: https://apaskulin.github.io/wmf-dev-portal-draft/

Homepage images

Section	Image	Image link
Use content and data	Book	https://commons.wikimedia.org/wiki/File:Adapted_Wikipedia20symbol_book.svg
Build tools and bots	Chemistry	https://commons.wikimedia.org/wiki/File:Adapted_Wikipedia20symbol_chemistry.svg
Contribute	Computer	https://commons.wikimedia.org/wiki/File:Adapted_Wikipedia20symbol_computer.svg
Connect and learn	Globe	https://commons.wikimedia.org/wiki/File:Adapted_Wikipedia20symbol_world.svg

Notes from design jam on 2022/03/16

Image files can be stored in /src/assets.

Add image directly to a Markdown file, such as index.md:

![A computer browsing Wikipedia](/assets/computer-illustration.svg)

Add image at the document level via template:

# In .jinja file
{% if doc.icon %}
![{{ doc.alttext}}]( {{ doc.icon }} )
{% endif %}

# In .yaml file
icon: /assets/computer-illustration.svg
alttext: A computer browsing Wikipedia

Styles

Initial styles for homepage images in the style of the draft site:

width: 170px;
float: left;
padding-right: 40px;
padding-top: 30px;

Styles can be applied in Markdown using the { class="classname" } syntax:

![A computer browsing Wikipedia](/assets/computer-illustration.svg){ class="section-icon" }

Or, perhaps problematically, prevent { class="classname" } appearing in the translation file by using generalized styles:

p > img {
    ...
}

To do:

Research usage guidelines for Wikipedia 20 images
- Per this office wiki page (restricted access), we can only use black and white versions of the Wikipedia 20 graphics, not the color ones.
Experiment with the light mode/dark mode image feature

Details

	Subject	Repo	Branch	Lines +/-
	design: WIP patch for adding images	wikimedia/developer-portal	main	+530 -39
	content: Add images to homepage	wikimedia/developer-portal	main	+1 K -15

Customize query in gerrit

Related Objects

Mentioned In: rWDPO79577cc8b508: content: Add images to homepage
Mentioned Here: T306038: Update Material for MkDocs

Event Timeline

apaskulin created this task.Jan 12 2022, 6:09 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 12 2022, 6:09 PM

apaskulin triaged this task as Low priority.Jan 12 2022, 6:09 PM

apaskulin moved this task from Inbox to Content & design on the Wikimedia-Developer-Portal board.

For potentially useful future reference: https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/
The "Reference" section of that site does some cute but potentially not ideal stuff with icons in the navigation menu...

(If unicode characters were used, then https://bighack.org/accessibility-screen-readers-special-characters-and-unicode-symbols/ asks for making sure they are used as their meaning implies. If images were used, then making sure aria-hidden="true" role="presentation" is being used would be good (for screenreaders).)

apaskulin updated the task description. (Show Details)Mar 16 2022, 11:49 PM

Change 771481 had a related patch set uploaded (by Alex Paskulin; author: Alex Paskulin):

[wikimedia/developer-portal@main] design: WIP patch for adding images

https://gerrit.wikimedia.org/r/771481

gerritbot added a project: Patch-For-Review.Mar 16 2022, 11:52 PM

apaskulin updated the task description. (Show Details)Mar 23 2022, 9:57 PM

apaskulin claimed this task.Apr 13 2022, 1:43 AM

apaskulin updated the task description. (Show Details)Apr 13 2022, 2:00 AM

I got this set up locally, but we can't use the light mode/dark mode image switcher until we update Material for MkDocs. Since the modified Wikipedia 20 images we're using are all black-and-white, the black-on-transparent images won't show in dark mode. Marking this task as stalled pending the update (T306038) or finding alternative images