Thanks

Thanks

Ao3 Tutorials: Insert Images

(should I just make this a series where people can ask for help lol)

I’ve been asked quite a few times how to insert an image into your story on ao3 and honestly i get why it’s a nuisance. Really, Ao3 isn’t always super user friendly! So here’s my simple (hopefully useful) tutorial with images included :)

I did this on my laptop, but you can do it on pretty much any device, though phones tend to be a bit more annoying.

Step 1: Open up the work on ao3 that you want to include an image in. Scroll down to where the fic will be posted and you should be able to see two buttons: Rich Text OR HTML. I usually prefer to work with Rich Text so that when I copy my fic from whatever text editor I’m working on it keeps the italics or bolded words.

You can also see that using Rich Text gives you more options that don’t involve knowing anything about html!

Step 2: Click the image button in the options above the text box. This opens up a small popup with 3 slots: Source, Image Description, and Dimensions. Working backwards, the dimensions I usually ignore when I first insert the image. Description is to just name time image if you like. Now source is the most important. You can’t just insert an image from your files but instead you need the image url. 

Step 3: Get image url through a variety of options. 

If you are simply finding the image online, i.e. google images, simply right click the image and click the option of: Copy Image address OR Copy Image URL. This includes copying images from Tumblr, facebook, etc. even email.

Now if the image is saved to your computer you need to first upload it online somewhere. Then you can get the image url from there. My usual option is a website called hostingpics.net. Unfortunately it isn’t in English however with google’s autotranslate option the website is easy to manage.

From there, simply upload your image (make sure to have the size option as “Do not resize”

When the new screen loads there are a lot of options. If you click on the picture of the image you uploaded this should open a new window. You should know that sometims ads will open but they’re simple to close.

On the new window the image loads in the size that you uploaded it as. Here simply right click the image and you have your option to copy the image url.

Step 4: Insert image and resize to fit your story

When you paste the image url into the popup on ao3 the automatic dimensions appear - don’t change this unless you know the exact dimensions you want the image to be. Instead you can change it inside the story.

I should also mention, make sure that your cursor had clicked the paragraph where you wanted the image to be closest to just cause its easiest not to try and move the image. However, when you first insert the image there will be a blue film over kind of like when you copy things. Therefore hitting Ctrl-X and cutting the image and pasting it somewhere else in the story is easy.

The image will be able to be shrunk till you click away and then you have to draw your mouse over it as you would when you’re selecting and highlighting words. The editor should then show up again.

To then move the image to the side as seen below where it’s inserted alongside your words all you have to do is select the surrounding words and hit any of the align options in the text editor.

And there you go! That’s how to insert an image into ao3!

I should also mention that you can insert images into the summary or notes by using the following bit of code:

<img src=”insert image url here”>