-
Notifications
You must be signed in to change notification settings - Fork 1
Adding Images
Pictures on mishmash.no are files in the repository, referenced by their address. There is no media library and no upload dialog beyond GitHub's own.
| Kind of image | Folder |
|---|---|
| Photographs for a news post | site/assets/images/news/ |
| Photographs for an event | site/assets/images/events/ |
| Portraits of people | site/assets/images/portraits/ |
| Institution logos | site/assets/images/logos/ |
| Drawings and diagrams | site/assets/images/illustrations/ |
| Icons | site/assets/images/icons/ |
| The MishMash logo (wordmark, favicon, social image) |
site/assets/images/logo/ — see Visual Identity and Theming
|
| The MishMash bubbles (placeholder thumbnails) | site/assets/images/bubbles/ |
For a set of photographs from one occasion, make a subfolder named after it, as the opening did with site/assets/images/news/opening-2026-04-08/. It keeps the folder navigable.
Portraits are a special case. They are downloaded automatically from the national research archive by the nightly sync, so do not add them by hand unless the person has no entry there. See Directory.
- Open the folder you want in the repository, for example
site/assets/images/news/. - Click
Add file, thenUpload files. - Drag your images in.
- Write a short description of what you are adding, and click
Commit changes.
To create a subfolder at the same time, click Add file, then Create new file, and type my-event-2026/placeholder.md in the name box. GitHub makes the folder as you type the slash. Upload into it afterwards.
Two ways, depending on where it appears.
As the thumbnail for a news post or event, in the frontmatter:
image: /assets/images/news/opening-2026-04-08/L1006333_1920px.jpgInside the text of a page, in Markdown:
The path always starts with /assets/, never with site/assets/ and never with ./. The site folder is the root of the published website, so it disappears from the address.
The text in square brackets is read aloud to people using screen readers, and shown if the image fails to load. Describe what is in the picture.
Not ![alt text], and not ![image]. The accessibility scan in CI checks for this, and some existing pages fail it. Do not add more.
For a purely decorative image that adds nothing to the meaning, leave the brackets empty: .
Name files in lowercase with hyphens, no spaces and no Norwegian characters. opening-ceremony-aula.jpg, not Opening Ceremony Ãula.JPG. Spaces in image paths break in ways that are tedious to debug.
Use .jpg for photographs, .png for screenshots and anything with sharp edges, .svg for logos and diagrams that should scale, .webp where you have it, since it is considerably smaller than JPEG at the same quality.
Resize before uploading. Around 1920 pixels on the long edge is plenty for a full-width photograph, and 1000 is plenty for anything inline. The repository is public and cloned by students; a folder of ten-megabyte camera originals makes that slow for everyone, permanently, because Git keeps every version forever.
There are helper scripts for bulk work — compressing oversized portraits (compress_large_portraits.py) and cropping them square with a size cap (make_portraits_transparent.py). See Scripts and Automation.
The site is public and licensed CC BY 4.0. Before uploading, be sure the picture may be published: that you or MishMash hold the rights, or that the licence permits it, and that identifiable people have agreed to appear.
Where a photographer needs crediting, name them in the caption or in the post text.
The longer-term ambition is to keep openly licensed images on Wikimedia Commons and embed them, rather than duplicating them here. See Web Philosophy.
The front page and the news and events listings show a small square thumbnail. scripts/build_thumbnails.py builds a 240 px WebP for every image in the news, events and portraits folders into site/assets/images/thumbs/, and the listings use it when it exists. The nightly workflow runs the script, so a new photograph gets its thumbnail by the next morning; run the script yourself to have it at once.
A sound on Freesound can be embedded by its numeric ID; the player is Freesound's own and links to the licence and author:
{% include freesound.html id="123456" title="Rain on a tin roof" %}For a set of photographs from one occasion, a post can show a rotating gallery instead of a column of images. List the photos in the post's frontmatter and place the include where the gallery should appear:
galleries:
evening:
caption: "The reception on Monday evening. Photos: Name of photographer."
images:
- src: /assets/images/news/my-event-2026/reception-01.jpg
alt: "Guests talking in the foyer"{% include photo-carousel.html name="evening" %}The gallery advances by itself every few seconds, stops when the reader hovers, focuses or presses Pause, stays still for readers who ask their system for reduced motion, and shows the photos one after another when JavaScript is off. Only the first photo is sent to a reader who arrives; the rest are fetched as the gallery reaches them, so a gallery of twenty photos costs a visit one. Every photo needs alt text. See /news/opening-conference/ for an example.
A video on YouTube goes in through an include, never as an <iframe>:
{% include youtube.html id="rq8UnZlzYk4" title="The opening ceremony" %}The page then shows a poster and a button. Nothing reaches YouTube until a reader presses it, and the player that appears loads from the no-cookie domain. Add lang="nb" on a Bokmål page so the note under the button is in Norwegian. The privacy page describes this, so an embedded player pasted straight into a post would make that description untrue.
The /gallery/ page collects artistic and scientific work from the MishMash community. It is built from site/_data/gallery.yml rather than from image frontmatter, and follows its own conventions. See Site Features.
-
Adding News and Adding Events — where the
imagefield goes - Markdown Basics — image syntax alongside the rest
- Directory — portraits, which are synced automatically
- Home
- Getting started
- Everyday editing
- On your own machine
- Reference
- Background