How to post images within a story on AO3
Not definitive. Not the ultimate. But it works for me. And Iâm not a code monkey, so donât ask me detailed questions (or you can ask if you want to watch me go âbuh buh buhâŠ). This is just what Iâve managed to patch together from other peopleâs instructions. I wanted it all in one place. And I wanted to share.
Step 1: Open your AO3 account. Youâre going to create a skin that youâll be able to reuse. On the left side menu, choose âSkinsâ. Click on âMy Work Skinsâ. And then click on âCreate Work Skinâ. Paste this into the CSS box exactly as is:
#workskin img {
 max-width: 100%;
 height: auto;
}
The reason for this skin is to keep the image within the borders of whatever device the reader is on. So if theyâre using a smart phone, the image will fit the smaller screen and they wonât have to scan over to see the entire thing. If theyâre on their computer, the image will fit within the borders of that screen too. Technically you wouldnât have to use this skin at all, but I find it annoying to have a large image on a small phone and not to be able to see it in its entirety. This is just something nice to do for your reader.
Give it a unique title (mine, for example, is 'Whiskey imageâ, but you can call it whatever the hell youâd like). Save it.
Step 2: If you donât have DropBox, get DropBox. Itâs a free app. The reason you want DropBox is to host the image and DropBox provides a static IP address, unlike tumblr. Create your account in DropBox and upload the image/s you want to host. There are other hosting apps you can use. I donât use them. If you think whatever you use is better, use that. As long as the IP is static, I donât care. Just for gods sake, donât use tumblr to host your image. Their IP addresses are subject to change and that will break your image link. (NB: Step 4 probably wonât apply if you use something other than DropBox.)
While youâre in DropBox on the website, notice that when you highlight the image you want to insert, thereâs a 'Shareâ button. This will give you the permanent link youâll be using soon.
Step 3: Create your story in AO3 (or, for an existing story, click on 'Editâ). In the 3rd box down, called 'Associationsâ, select the skin you saved in Step 1 from the drop down menu. This will apply to the entire story, so you wonât have to do it for each chapter if youâre posting multiple images.
When you go to copy and paste your story into the chapter text box, be sure to click 'Rich Textâ before doing so. Then paste your story in.
Place your curser where you want the image. Go back to DropBox, click 'Shareâ and create a link, then copy the image IP address. Or, if youâre working off the app on your computer, right click the image and select âCopy DropBox Linkâ. Go back to AO3 and click on 'Insert/edit imageâ from the menu across the top of the text box. Copy the link into the 'Sourceâ box.
This next step is very important! Do not skip this part!
Step 4: At the end of the IP address, delete dl=0 and replace with raw=1. If you donât do this bit, all the other stuff is for naught and it wonât work.
So say it with me now. Delete dl=0 and replace with raw=1.
Right. Almost done, boy-o.
Fill in an image description if youâd like.
Leave the dimensions alone.
The image should appear like magic. Preview it just to be sure. Celebrate your genius with the beverage of your choice.
