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.
gummygunk
vaporwave
andulkaphoto
izzy806
blakekathryn
prguitarman
kianamaiart
origamiaround
romaincrisis
gamechangershow
pixelskylines
