#embedding art

[hjbender]

How to Post an Image on AO3

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!

Similar topic: How To Do Fancy Text Breaks on AO3

[mific]

Fanart storage options

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 ...

Free - even if I upgrade my experience for now, say to have the interface ad-free, if I can't afford a fee in future I still want all the links to work indefinitely (ha, hubris. Well, until the zombie apocalypse, anyway).

Easy to get a direct link for embedding in AO3 or DW etc. And it  needs to provide a 'clean' direct link without a heap of site-GUI-crap and/or ads all around the edges, like tinypic and photobucket do. This is as I often post a smaller version of a pic and link to the full-size version, and I almost always do a link anyway even for smaller pics  - this is for pads and mobiles, as otherwise the pic won't display fully.

I don't create many ginormous files, but for the few I do, the site needs to be OK with that.

Lots of free storage so I don't run out.

Easy to organise my art - easy to make folders, name and rename them. Photobucket also allows on-site artworks to be named, which is nice, but it's not crucial to me as I only use the site for storage so as to embed works elsewhere.

Ideally I need a site that doesn't care if I store some explicit images. I don't worry about that too much though, as mine are rarely super-explicit, and I figure I'll find another solution for the tiny few that are if LJ goes bust. Meanwhile I'll leave those ones on LJ.

I commented about this here and there recently and I thought for a while that Photobucket was going to be okay. But the links that I figured would give a clean direct link with no GUI-crap turned out not to do so, so that's a bust.

In the end, and partly because of this discussion from

Adam Savage's Tested, I'm going with Mediafire

It does all the above and focuses on storage so people aren't as likely to trawl through the site's images and accidentally hit my porny one of Remus and Sirius barebacking :)  It's not hard to get a direct link to paste in for immediate display and also to link to - you do have to click on the thumbnail to call up the actual image, then R-click on it to get "copy image url", but that's no more work than with LJ.

Notes:

the top choice from the Adam Savage site above was actually Minus - but the article dates from 2012 and Minus doesn't seem to exist any more (cautionary tale there). Mediafire, on the other hand, has been around for ages.

another good thing about Mediafire is that the link doesn't alter if you reorganise and move the art to another folder later on (I tested this). So no need to edit the AO3 or DW post. This is a big plus over LJ, where it would break the link.

So that's where I'm at with this. I haven't actually moved many pics across so if anyone out there knows anything better, or sees flaws in this cunning plan, please set me straight!

[mojoflower]

How To Embed Art In Your AO3 Story

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

(as you can see from this very, very NSFW story:  A Study in Sensuality (or, That Johnlock Gif Story)

[mojoflower]

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

Nothing to do with the width=600 right there?

If I remove the width=600, then it's just huge (as big as the file uploaded to tumblr originally.  I imagine that you'd take it out, of course.  But replace it with what?  Grrr.