#hjbtute

[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

[hjbender]

How to do fancy text breaks in your AO3 story

So you hate that ugly default horizontal rule and you’re tired of using asterisks for your text breaks. No problem. There are a variety of symbols, characters, and Unicode-friendly glyphs to spice things up, but let’s say you want to use your own custom image (like the examples above) as a text break in your stories. Here’s how you can do that:

1. Find or make your divider image. I’d recommend keeping it under 500 pixels wide so it looks good on many devices.

2. Upload your image to a reliable image host site. Copy the URL once it’s done and make note of its height and width.

3. On your AO3 dashboard, go to the Skins section, click on My Work Skins, and then Create Work Skin.

4. Give your skin a name like "Fancy Divider" and paste this code into the CSS box:

#workskin hr {  height: 24px;   width: 200px;  background: url(http://yourdomain/yourdivider.png);  background-repeat: no-repeat;  background-position: center;  margin-top: 12px;  margin-bottom: 12px;  border: 0; }

Make sure you use the corresponding height and width values for your divider. You can also adjust the margin values if you want more space between your divider and your text.

Click Submit.

5. Navigate to the story you want your divider to appear in and click Edit. In the Associations block of the Edit Story section, select your "Fancy Divider” skin from the Select Work Skin drop down menu.  

Now, scroll down to Work Text and view your story in HTML mode. Wherever you want your divider to appear, insert this code:

<hr>

6. Click Save and enjoy your totally sophisticated-looking (or not) story!

Tip: Remember (because I too sometimes forget) to have your “Fancy Divider” Work Skin selected (as well as using the corresponding HTML code) for every story you want your custom divider to appear in.

CHANGES: AO3 no longer requires the hr class (.hr) to be specified in the code, so you can use the plain <hr> tag.