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.
stormborns
izzy806
tangentwithtanner
titsay
