#embedding art

An expanded how-to from AO3′s FAQ on How Do I Post an Image?

Step 1: Upload your image to an image hosting site

AO3 does not host any images internally, so you will need a place you can upload your image(s) to. If you have your own website/server/hosting, you probably already know what to do. If you don’t have a website, below are some options, or you can simply do a search for “free image hosting site”.

ImgBB (Adult Image Friendly)

ImgBox (Adult Image Friendly)

Postimage

ImageVenue (Adult Image Friendly)

FreeImageHosting

Be advised that some of the sites listed above do not allow you to upload adult content. Please read the Terms of Service for any image hosting site to make sure you won’t be in violation--and also to ensure that if you’re posting your own artwork that you retain all rights to it.

Step 2: Get the URL of your uploaded image

After you’ve uploaded your image, the site will provide you with embed code or image URL (that’s the line that starts with http://). This is the location of your image on the site’s server. Highlight it and copy it.

Step 3: Post your image on AO3

If you’re not already there, navigate to AO3 and get to where you’re posting a new work or editing an existing one. Go down to the Work Text field, where your story text is. Toggle over to Rich Text. (This is a little bit easier for beginners.)

Put your cursor where you would like to insert your image in your story, then click on the little picture icon (shown above) in the toolbar. This will bring up the Insert/Edit Image dialogue window (shown below).

In the “Source” field, enter the URL you just copied. You may then enter an image description. If you wish, you can also edit the image dimensions, which are usually auto-filled when you enter the image URL. If the “Constrain proportions” box is checked (or the little lock icon is closed), it means that the image height and width will be kept proportional so that the image size can be changed without distorting it, if you want to change the image size.

Preview to make sure everything looks alright. If it doesn’t, go back and make sure you copied the full URL and didn’t accidentally insert a weird bracket or something. If it looks fine, you’re good to go.

Happy posting!

Decided I’ll try cross-posting some thinky posts from DW to tumblr at times.

Since the dread news about LJ, I've been fretting more about where to host all my fanart. They're on LJ scrapbook now, which is an okay interface and pretty easy to use, but who knows what they'll do to it next?

Ordinary photo-sharing sites are no good as the file size is too low, they aim at making your art readily trawled by all (not always what I want) and I also worry that if I opt into a cute new site it'll go belly-up after I've gone through the hassle of moving everything.

What I want in an art storage site is ...

Someone asked me how I did it, so here’s a how to for y’all.

1.  Have art. 

(My example here is this lovely picture from @jinglebellfic, drawn for my story Wrapped Around Your Finger.)

2.  Get the artist’s permission

(THIS PART IS VERY IMPORTANT, even if the picture is drawn for your story, don’t assume permission) to embed their art.

3.  AO3 requires a url,

rather than a file from your computer.  I actually put all my story arts in a folder over on LiveJournal, and use the url from that.  This is because Tumblr (or DA, or wherever) tends to be very dynamic, people change their names, delete their accounts, whatever, and as soon as they do that, your url direction is a dead link, and you end up with the sad little square in your story.  DON’T FORGET TO LET THE ARTIST KNOW THIS IS WHAT YOU’RE PLANNING TO DO, in case they object.

4.  Center your cursor

where you want the image to be (for some reason, images are reluctant to be centered AFTERWARD, so go ahead and do it now.)

5.  Select Insert/edit image

6.  Go to wherever you’ve stored the image and right click to get the link:

7.  Fill in your Image Insert box over on AO3:

8.  Adjust image dimensions

so that the biggest number is 500, just to keep things consistent (and to keep an image from being too big for a screen, which is intrusive for the reader, I think.)

9.  Select Ok and you’ve done it!

10.  Post that puppy!

11.  This works for gifs as well

brollybee replied to your post: “html ? for AO3 picture insert”:

Nothing to do with the width=600 right there?