Embedding images on AO3: A Guide
Since AO3 doesn’t host images themselves, we’ll just have to host them elsewhere.
In this guide we will use Google Drive, https://postimages.org/, or Tumblr as possible choices to host our images.
Step One: Grabbing the URL
In google drive create a new folder where the image(s) or sub folders for further organization.
Right click and select New Folder, name this folder what ever you what.
Right click on your image and hit share
Under General Access ensure it is set to Anyone with the link
The link you have should look something like this
**https://drive.google.com/file/d/1mzOp9pOYhaWahgJP6yVFXbtYagCQ_0Up/view?usp=sharing **
But as is it won’t work! We need to modify it first!
Copy the string of random numbers and letters after /d/ and before /view?
1mzOp9pOYhaWahgJP6yVFXbtYagCQ_0Up
Here’s a template https://drive.google.com/uc?id=
paste your string after id=
your new link should look some thing like this…
https://drive.google.com/uc?id=1mzOp9pOYhaWahgJP6yVFXbtYagCQ_0Up
Now, you have a working link from Google Drive ready to use.
This Google Drive portion was from this guide here: https://archiveofourown.org/works/28132845
Now, you have a working link from Google Drive ready to use.
Using a image hosting service like https://postimages.org/
You can create an account for free with this one. This is pretty straightforward so I’ll gloss over. Hit the sign up button. Then, enter your desired email
Once logged in you will be presented with this page
Upload your image, and you will be taken to this page.
Now you have a working link from postimg.cc ready to use.
Tumblr is not always the best to use as blogs can get deleted or URLs can change here. But I’ll include it here anyway.
Long tap the image you wish to use in a post.
You will be presented with this menu.
Then you will be presented with another menu.
On Desktop (Google Chrome Browser)
Right on the image in the post.
You will be presented with this menu…
Click copy the image address.
Now you have a working link from Tumblr ready to use.
Now, you are ready to embed.
Step 2: Inserting and fitting the image
Go to the new/ existing chapter you wish to be embed.
Make sure in the HTML editor view.
This is located next to the rich text button in the Worktext section, as shown.
Now, find the place in the text where the image should go…
<p> <img src=“https://i.postimg.cc/8zG9ZNMw/blob-danny.jpg” width=“270” height=“600” /> </p>
For this image, it was much too large. So, I modified it with the width and height modifiers.
**First you must find the dimensions of the image. **
This can be done with the same image URL from earlier. With this online tool.
http://myfreeonlinetools.com/get-image-size-and-dimensions/
In this example, my image is 1080x2400
Once you have the dimensions, you can find the aspect ratio.
https://www.digitalrebellion.com/webapps/aspectcalc
Once have the aspect ratio, you can half or quarter the height or width and calculate for the one you don’t have.
Example I’ve quartered my height as halving it was still to big.
In my case the dimensions are now 600 by 270 which fits the page much better.
These will be your new dimensions.
Here is a blank template to paste in.
<img src=“” alt=“” width=“” height=“”/>
src is the path to the URL.
alt is the alternative text for the image. This is used for accessibility as well as be a modern web standard.
width is the image width in pixels
height is the image height in pixels
You insert your values in between the double quotes.
_*remember to close your quote _
*remember to close your image tag
Make sure in the Rich Text editor view.
Set the cursor where you want the image. Click image icon.
Set the values in this form.
Use the URL we generated in one of the previous 4 options.
Set the Image description
The width and height may be input automatically, if not consult the HTML OPTION for finding the dimensions and aspect ratio of the image.
Here’s how it looks after posting
Shout out to @playedcrowd5610 for inspiring me to make this guide.