Moodboard Images Work Skin for AO3
One of the things I played around with when publishing Three Notes on Vormir on AO3 was including the moodboard. As a short little ficlet, TNoV really benefitted, I thought, from having some images set the mood, so I wanted to see about bringing that to the AO3 version.
Lots of us on tumblr post moodboards for our AO3 fics in our tumblr post about the fic, but—at least in the fandoms I’m in and the fics I’ve read—the moodboard never shows up in the fic itself for anyone finding the fic directly on AO3. (I’ve done it once, in We Gotta Get Out of This Place, by screenshotting the fic promo post moodboard from tumblr and adding the screenshot to the fic, but it’s not the best.)
It’s easy enough to pop some images into the top of a fic and center them, but then comes the salient problem of the modern fic world: being responsive to screen sizes. A moodboard sized for desktop will either be too large, overflow, or wrap on a phone. tumblr solves this with a combination of srcset attributes (specifying multiple image files to choose from for various screen sizes) and CSS, but AO3 doesn’t support srcset. Looking around, I wasn’t able to find any existing work skins that handled this (but it’s certainly possible my search terms weren’t good enough), so I started to roll my own.
Since my images are relatively small (350px square, a setting I chose for some reason lost to time when doing my first moodboard—maybe I cargo-culted it from @girlonthefireescape?—which is also friendly to using screencaps from the source material), it’s not a big deal to use the same image file for all sizes and then scale appropriately. (I don’t necessarily want 350px images in the moodboard grid itself, but it’s nice to let people see a slightly larger version if they’re curious.)
I found the False Panorama work skin from phantomdoodler which gets 90% of the way!
#workskin .moodboard {
display: block;
box-shadow: none;
border: 0px;
margin: 0px;
padding: 0px;
line-height: 0px;
font-size: 0px;
text-align: center;
white-space: nowrap;
max-width: 100%;
height: auto;
}
But the explanation for that CSS code notes (emphasis added):
This will force all images within the same wrapper to appear on the same line. The size is not responsive, however. This means that your images will not automatically resize for narrower displays, such as mobile devices.
Fortunately, that’s pretty easy to fix these days by setting the CSS width and max-width properties on the images. Since I know my images will always be 350px wide, setting that as max-width prevents unwanted stretching of the images if there’s more horizontal space than the images take up.
#workskin .moodboard img {
max-width: 350px;
}
Then, I only need to tell the browser to make the displayed width an appropriate fraction of the available space. If my moodboard is 2 images wide, that’s 50%; for three, it’s 33%, and for four it’s 25% and five (😳) it’s 20%. (If you want images to display slightly smaller and/or have more blank space to the left and right edges, you can shrink those numbers, e.g. 45% for two images or 30% for three.)
#workskin .moodboard .two img {
width: 50%;
}
#workskin .moodboard .three img {
width: 33%;
}
#workskin .moodboard .four img {
width: 25%;
}
#workskin .moodboard .five img {
width: 20%;
}
One other thing I added was some CSS to turn off the underlining of links in the moodboard, because I linked my images to a stand-alone (and thus full-sized) view, and the underline under the images in the moodboard was visually annoying and added unwanted space.
#workskin .moodboard a {
text-decoration: none;
border-bottom: none;
}
Then it’s just a matter of wrapping the images in a little bit of extra HTML with the appropriate class names.
<div class="moodboard">
<p class="three"><a href="https://url-to/image-1.jpg"><img src="https://url-to/image-1.jpg" alt="the accessibility description for image-1"></a><a href="https://url-to/image-2.jpg"><img src="https://url-to/image-2.jpg" alt="the accessibility description for image-2"></a><a href="https://url-to/image-3.jpg"><img src="https://url-to/image-3.jpg" alt="the accessibility description for image-3"></a></p>
</div>
The main structure for our moodboard is <div class="moodboard">[…]</div> (note the moodboard class), and then our three images are inside of <p class="three">[…]</p> (note the three class) inside of that div. If you had four images in a row, the class for the p tag would be four instead, and so forth.
If you have multiple rows in your moodboard, just add an additional <p class="three">[…]</p> containing the next row of images after the first row but inside the </div>, like so…
<div class="moodboard">
<p class="three">[…]</p>
<p class="three">[…]</p>
<p class="three">[…]</p>
</div>
…for a 3x3 grid. (Make sure to change the URLs to the correct images for rows 2 and 3!)
(Because of the different scaling applied to rows with different numbers of images, you don’t want to mix and match different numbers of images per row in a multi-row moodboard—but I don’t think anyone does that anyway!)
The one thing this doesn’t handle really well is that on desktop/laptop (and possibly tablets in landscape mode), multiple-row moodboards might seem large/take up lots of space. Reducing the max-width will help with that, but without AO3 support for CSS media queries in work skins, there’s no way (that I can think of with my rusty, twenty-year-old CSS skills) to have that change only apply to larger screens, so it might shrink the images more than expected on mobile/smaller screens. But that’s a problem for another time!
Here’s the full CSS to paste to your very own AO3 Work Skin to style your moodboard:
#workskin .moodboard {
display: block;
box-shadow: none;
border: 0px;
margin: 0px;
padding: 0px;
line-height: 0px;
font-size: 0px;
text-align: center;
white-space: nowrap;
max-width: 100%;
height: auto;
}
#workskin .moodboard a {
text-decoration: none;
border-bottom: none;
}
#workskin .moodboard img {
max-width: 350px;
}
#workskin .moodboard .two img {
width: 50%;
}
#workskin .moodboard .three img {
width: 33%;
}
#workskin .moodboard .four img {
width: 25%;
}
#workskin .moodboard .five img {
width: 20%;
}
Structure your moodboard images at the top of your fic as described above, apply your new work skin to your fic before you publish, and, boom, a moodboard that resizes itself to fit your readers’ screens!
You can see the single-line version in action on Three Notes on Vormir.
