Since AO3 is no longer adding new user-created skins to their list of public skins, and with all the fics and ficart that are being posted for the @thorkibigbang going on, I thought I’d share this little trick.
Okay, so you’ve got this great image you want to embed into your story on AO3. The only problem is it’s kind of a big image and you can only see part of it on your device (or you have to scroll horizontally in your browser to see the whole thing). And your readers are viewing it on screens of varying sizes, so you know they’re probably going to have some difficulties looking at it.
Not anymore! This trick will make it so that no matter your screen resolution or window size, your image will always fit nicely in the story and not overflow. These types of images are called “responsive images”, because they automatically respond and adjust to your screen size.
Anyone can use this code and it’s really simple to implement, no knowledge of HTML/CSS necessary. It makes viewing stories with images (especially large ones) on AO3 much easier, and your readers will really appreciate it.
Here’s all you have to do:
1) Log into your AO3 account. On your Dashboard, click the Skins link.
2) Click the My Work Skins button on the resulting page. Then click the Create Work Skin button on the following page.
3) You are now on the Create New Site Skin page (pictured below). Make sure the Type field is set to “Work Skin”. Fill in the Title field with something easy to recognize. This is the Work Skin you’ll be using on any stories where you want to have responsive images.
4) In the CSS box, insert this code:
#workskin .responsive {
max-width: 100%;
height: auto;
}
5) Click the Submit button.
You now have a new Work Skin that will enable you to have responsive images! The magic is all in that one little word, responsive. Now all you have to do is apply it to you story. Here’s how:
6) Navigate to the story you’d like to use this code in. Click the Edit button.
7) Select your responsive work skin from the drop down menu in the Select Work Skin section. You will do this for every story in which you want to use this trick.
8) In the Work Text section on the same page, select HTML if it is not already on. The general, no-frills code for inserting an image typically looks like this:
<img src=“http://www.yourdomain.com/yourimage.jpg” />.
All you’ve got to do is add some “class” and the magic word. Like this:
By adding the class=“responsive” tag to this line of code, you’ve made the image responsive. (Remember to mind your spaces, otherwise the code may not work.)
9) Click Save and you’re done! Go and enjoy your nice, neat, responsive ficart. Just remember to select this Work Skin for every story you wish to use it on, and use the corresponding HTML code in your Work Text.
