#html how insert an image

[mymomsaiditwasaphase]

Nerd

[all-the-fish]

Oh, you know, just the usual internet browsing experience in the year of 2024

Some links and explanations since I figured it might be useful to some people, and writing down stuff is nice.

First of all, get Firefox. Yes, it has apps for Android/iOS too. It allows more extensions and customization (except the iOS version), it tracks less, the company has a less shitty attitude about things. Currently all the other alternatives are variations of Chromium, which means no matter how degoogled they supposedly are, Google has almost a monopoly on web browsing and that's not great. Basically they can introduce extremely user unfriendly updates and there's nothing forcing them to not do it, and nowhere for people to escape to. Current examples of their suggested updates are disabling/severly limiting adblocks in June 2024, and this great suggestion to force sites to verify "web environment integrity" ("oh you don't run a version of chromium we approve, such as the one that runs working adblocks? no web for you.").

uBlockOrigin - barely needs any explanation but yes, it works. You can whitelist whatever you want to support through displaying ads. You can also easily "adblock" site elements that annoy you. "Please log in" notice that won't go away? Important news tm sidebar that gives you sensory overload? Bye.

Dark Reader - a site you use has no dark mode? Now it has. Fairly customizable, also has some basic options for visually impaired people.

SponsorBlock for YouTube - highlights/skips (you choose) sponsored bits in the videos based on user submissions, and a few other things people often skip ("pls like and subscribe!"). A bit more controversial than normal adblock since the creators get some decent money from this, but also a lot of the big sponsors are kinda scummy and offer inferior product for superior price (or try to sell you a star jpg land ownership in Scotland to become a lord), so hearing an ad for that for the 20th time is kinda annoying. But also some creators make their sponsored segments hilarious.

Privacy Badger (and Ghostery I suppose) - I'm not actually sure how needed these are with uBlock and Firefox set to block any tracking it can, but that's basically what it does. Find someone more educated on this topic than me for more info.

Https Everywhere - I... can't actually find the extension anymore, also Firefox has this as an option in its settings now, so this is probably obsolete, whoops.

Facebook Container - also comes with Firefox by default I think. Keeps FB from snooping around outside of FB. It does that a lot, even if you don't have an account.

WebP / Avif image converter - have you ever saved an image and then discovered you can't view it, because it's WebP/Avif? You can now save it as a jpg.

YouTube Search Fixer - have you noticed that youtube search has been even worse than usual lately, with inserting all those unrelated videos into your search results? This fixes that. Also has an option to force shorts to play in the normal video window.

Consent-O-Matic - automatically rejects cookies/gdpr consent forms. While automated, you might still get a second or two of flashing popups being yeeted.

XKit Rewritten - current most up to date "variation "fork" of XKit I think? Has settings in extension settings instead of an extra tumblr button. As long as you get over the new dash layout current tumblr is kinda fine tbh, so this isn't as important as in the past, but still nice. I mostly use it to hide some visual bloat and mark posts on the dash I've already seen.

YouTube NonStop - do you want to punch youtube every time it pauses a video to check if you're still there? This saves your fists.

uBlacklist - blacklists sites from your search results. Obviously has a lot of different uses, but I use it to hide ai generated stuff from image search results. Here's a site list for that.

Redirect AMP to HTML - redirects links from their amp version to the normal version. Amp link is a version of a site made faster and more accessible for phones by Bing/Google. Good in theory, but lets search engines prefer some pages to others (that don't have an amp version), and afaik takes traffic from the original page too. Here's some more reading about why it's an issue, I don't think I can make a good tl;dr on this.

Also since I used this in the tags, here's some reading about enshittification and why the current mainstream internet/services kinda suck.

[respectthepetty]

How to credit GIFs

I know there are other posts around this hellsite of how to do this, but because @khaotunq made this amazing post, I wanted to remind some of you of how to include a GIF that credits the original post/creator even if the GIF does not appear in the GIF options.

Option #1:

Step #1 - If you know which GIF you want to use, find the post its from, and click the three little dots to bring up the menu. Click "Copy Link"

Now, in your own post, click the "GIF" button

Step #2 - When the next box appears, paste the link you just copied in it.

Step #3 - The GIF should appear, so click it, and it will insert the GIF with credit to the original post and creator.

HOWEVER, it will only insert the first GIF in the post, so if you want a different GIF in the post, you have to make a small change.

Option #2:

Step #1 - Do everything in Option #1. EVERYTHING! Now, once you have inserted the GIF into your post, it will be the first GIF in the original post as stated in Option #1.

Step #2 - Click the wheel at the top of your post

Step #3 - Once you do that a menu box will appear, and where it says "Text Editor," switch from "Rich text" to "HTML"

Step #4 - It might look scary now, but have no fear! Hit "Ctrl +F" to find what you need! Type "attribution" and it will locate the GIF for you.

Step #5 - After "attribution" is the GIF's link that you copied earlier in quotes. Look for it!

Step #6 - Now, in another window, go back to the original post with all the GIFs and find the GIF you want. Once you see it, right-click on the GIF, and when the menu pops up, select "Copy Image Link"

Step #7 - You will paste that new link into your post in the same spot the other link was within the quotes. In other words, replace the highlighted yellow part with the new link.

Step #8 - Click the little wheel at the top again and select "Rich text" to switch back to your normal viewing mode.

The new GIF will appear!

It seems overwhelming, but once you get the hang of it, it's easy peasy. And if you think this process is too time-consuming, remember that this is nothing compared to how much work GIF makers put into creating these GIFs for us.

Tumblr is actually very user-friendly with some practice, so do our community a favor and be friendly to the people who put in the effort.

[merlyn-bane]

embedding images on ao3 (or at least how i do it)

step one - create a work skin

this is step is optional, technically, but it'll make for better viewing across different devices. go to your ao3 dash, and on the left menu (or the top menu if you're on mobile) you're going to click on 'skins'. click on 'my work skins', and then click on 'create work skin'. make sure that the type says work skin, and then put in a title. this is just for you, so it doesn't really matter what it is. then in the css box, you're going to copy and paste this exactly:

#workskin img {

max-width: 100%;

height: auto;

}

save it.

step two: host your image

you can't actually host images on ao3, and i don't recommend hosting them on tumblr either. you need a static link for the image and tumblr's are always subject to change. ive never been able to get drive to work for this either but that might just be user error, idk. when i need something hosted for ao3, i use dropbox personally. from here, the instructions are going to be with that in mind, other image hosters might be different.

upload your image and copy the permanent link.

step three: put your image in your wip

in your ao3 wip, scroll down to 'select work skin' and click on the skin that you made earlier

in the text editor itself, make sure that you have it set to rich text rather than html. place your cursor within the editor where you want the image to go and then click on insert/edit image. in the menu that comes up, you're going to paste your image link. if you're using dropbox to host, you have to change the dl=0 at the end of the link to raw=1. i'm not sure if this applies with other image hosters.

if you want to adjust the size of your image in this menu, make sure that the proportions are locked. there will be a little lock icon next to the width and height boxes. i usually size mine at around 750 to 800 on the longest/widest side but this piece is totally up to you. you can also click and drag the image size within the text editor itself, but if the image is very big this may be more difficult.

step four: profit

(for legal reasons this is a joke. thou shalt not profit from fanworks lest ip holders decide to get litigious)

[captdedeyes]

Friendly reminder that Wix.com is an Israeli-based company (& some website builders to look into instead)

I know the BDS movement is not targeting Wix.com specifically (see here for the companies they're currently boycotting) but since Wix originated in Israel as early as 2006, it would be best to drop them as soon as you can.

And while you're at it, you should leave DeviantArt too, since that company is owned by Wix. I deleted my DA account about a year ago not just because of their generative AI debacle but also because of their affiliation with their parent company. And just last month, DA has since shown their SUPPORT for Israel in the middle of Israel actively genociding the Palestinian people 😬

Anyway, I used to use Wix and I stopped using it around the same time that I left DA, but I never closed my Wix account until now. What WAS nice about Wix was how easy it was to build a site with nothing but a drag-and-drop system without any need to code.

So if you're using Wix for your portfolio, your school projects, or for anything else, then where can you go?

Here are some recommendations that you can look into for website builders that you can start for FREE and are NOT tied to a big, corporate entity (below the cut) 👇👇

Carrd.co

This is what I used to build my link hub and my portfolio, so I have the most experience with this platform.

It's highly customizable with a drag-and-drop arrangement system, but it's not as open-ended as Wix. Still though, it's easy to grasp & set up without requiring any coding knowledge. The most "coding" you may ever have to deal with is markdown formatting (carrd provides an on-screen cheatsheet whenever you're editing text!) and section breaks (which is used to define headers, footers, individual pages, sections of a page, etc.) which are EXTREMELY useful.

There's limits to using this site builder for free (max of 2 websites & a max of 100 elements per site), but even then you can get a lot of mileage out of carrd.

mmm.page

This is a VERY funny & charming website builder. The drag-and-drop system is just as open-ended as Wix, but it encourages you to get messy. Hell, you can make it just as messy as the early internet days, except the way you can arrange elements & images allows for more room for creativity.

Straw.page

This is an extremely simple website builder that you can start from scratch, except it's made to be accessible from your phone. As such, the controls are limited and intentionally simple, but I can see this being a decent website builder to start with if all you have is your phone. The other options above are also accessible from your phone, but this one is by far one of the the simplest website builders available.

Hotglue.me

This is also a very simple & rudimentary website builder that allows you to make a webpage from scratch, except it's not as easy to use on a mobile phone.

At a glance, its features are not as robust or easy to pick up like the previous options, but you can still create objects with a simple double click and drag them around, add text, and insert images or embeds.

Mind you, this launched in the 2010s and has likely stayed that way ever since, which means that it may not have support for mobile phone displays, so whether or not you wanna try your hand at building something on there is completely up to you!

Sadgrl's Layout Editor

sadgrl.online is where I gathered most of these no-code site builders! I highly recommend looking through the webmaster links for more website-building info.

This simple site builder is for use on Neocities, which is a website hosting service that you can start using for free. This is the closest thing to building a site that resembles the early internet days, but the sites you can make are also responsive to mobile devices! This can be a good place to start if this kind of thing is your jam and you have little to no coding experience.

Although I will say, even if it sounds daunting at first, learning how to code in HTML and CSS is one of the most liberating experiences that anyone can have, even if you don't come from a website scripting background. It's like cooking a meal for yourself. So if you want to take that route, then I encourage to you at least try it!

Most of these website builders I reviewed were largely done at a glance, so I'm certainly missing out on how deep they can go.

Oh, and of course as always, Free Palestine 🇵🇸

[deityoftherain]

Random AO3 Tips

I have a list of resources on my pinned post, but I don't really have a place for the simple miscellaneous tips and tricks, so here's this!

I didn't know most of these existed for probably far too long, so this post is mostly to spread awareness for new users or those who may not have heard of them before <3

I'll update this post if I learn of any other handy tricks. If you know any, let me know and I'll add it here :D

Basic HTML codes for A/Ns and etc

Note: Screenshots of the HTML "codes" at work are shown under the cut!

Center Text <center>TEXT</center> Clickable Link <a href="LINK">TEXT</a> Hideable Information <details> <summary>SHOWN</summary> HIDDEN </details> Insert Image from Link < img src="LINK" alt="IMAGE DESCRIPTION" width="100%" align="center" />

Italicize/Slant Text <i>TEXT</i> Line Breaks <br>TEXT</br> Paragraphs <p>TEXT</p> Strikethrough Text <strike>TEXT</strike> Underline Text <u>TEXT</u>

Single-post AO3 Guides

short guide on how to tag your own fics

short guide on how to title your fics/stories

how to embed images and links on AO3 [via Rich Text]

how to sign up for AO3-based exchanges (ft. @trafficteamsupportexchange)

Note: This is for formatting with HTML for the work, and for the authors notes where you Rich Text doesn't exist/work. Rich Text, on the other hand, should transfer most of these from whatever document resource you're using, but I've personally had issues with strikethrough not transferring from Google Docs copy-pasted to AO3 Rich Text, so just double check those areas!

[diaswarriorcats]

new website page: ThunderClan family tree!

i figured out html enough to import my google sheets family tree to my neocities website. still working on manually inserting all the images but the names n such are there!

come check out how i have fixed the incessant tumbleweeding of thunderclan

[commehter]

The current cover art for The Spirit Tale of Fire Lord Ozai.

The 1st attempt before going back to tweak colors (especially on the background gradient) and a second round of highlights.

Clean close up of the crown itself without the foreground flames obscuring it.

A closer-to-canon version of the crown, removing the scorching/scar and embroidery on the band.

I've used this image in a few places now (Royal Road, Spotify, Discord. Should probs add it to AO3 as SToFLO's main home. See below edit.) for SToFLO, but I haven't really talked about it. So, let's do that!

First, white fire is HARD. (Especially in ATLA's style, which doesn't seem to keep to a brightest/hottest flame near the source pattern, so much as a bright spots where they look good until the flame shape abruptly ends method.) It's ridiculously difficult to keep the flames from looking ghostly (adding some yellows and reds buried under the white so they can just barely be seen helped with that) to say nothing of trying to keep them bright without turning them into a blob of white. I kinda hated myself for making that a plot point while I was working on this. Worse, depending on monitor/phone settings, this image can be either blinding or a dingy gray. I eventually had to accept that I could either scrap them (which I clearly did not do) or make my peace with the situation.

I really like how the reflections on the gold came out on my second attempt. I waffled over doing them the first time because the canon images I found for reference (They were surprisingly hard to find. Everything is either an establishing shot too far out for good detail, or a close up on the face that cuts out the crown.) don't seem to put any special shine on the crown at all. Some feedback encouraged me to at least try it to help tie the foreground and subject into a cohesive image. I'm glad I listened! It looks so much better than the first version for that factor alone.

It's not literal to the fic (barring sudden inspiration -- Agni might enjoy tagging along as a tiny sphere cradled in the crown, just because?) but I effectively slapped Zuko's scar on the crown and amused myself thoroughly doing so. I probably should have gone back and tweaked the background colors again to up the contrast between the two elements. (Maybe if there's a third version I'll remember to alter that.)

The band looked very plain as it was, so I added some embroidery. Flames and waves seemed Fire Nation appropriate, so that's what I ended up adding.

The finished piece is by no means perfect, but overall I'm quite chuffed with how it turned out. I learned a good bit making it, that's for sure.

Edit: I tried adding the image to AO3 in a few different ways, but failed to find any I liked. Doubly so when taking into account the differences in display size/dimensions for desktop/mobile. Formatting across systems is a pain.

Rejected options included: in the summary (couldn't make it look nice with AO3's limited HTML -- no float, table was a clunky workaround at best), in the opening notes (crowded, edging toward bloated), and above the text of the first chapter (same crowding problem, but uglier for being below the horizontal break). Oh well. It was a nice thought.

Edit2: Might go back and try adding it to a later (but still early) chapter, if I can find a place it would make sense to insert it. It should be a complementary addition to the story, not a distraction, ya know?

[mrghostrat]

Hello there!! First off, I love your work- your creative voice is developed and your art style is delicious. V much an inspiration 😁

Anyway, I've been having trouble with embedding images in my fics, and since you write and draw I thought you might have some tips. I've exhausted Reddit and Ao3's FAQ has been no help. I'll take anything, html tips, better hosting sites for images, etc.

Thanks in advance!!

hiii thank you so much!! AO3 uses limited HTML, so for future referencing you can use any general html guide (w3school etc) to check how to write your code correctly.

this page is the most straightforward reference for embedding pics on ao3

since ao3 cannot host images, you need to upload your pic somewhere before embedding it. i use postimages.org

in the html editor, insert your image with the code:

<img src="URL GOES HERE">

SRC is the source of the image, aka the url. you can resize an image using WIDTH and/or HEIGHT. and if you want to get fancy, you can add hover text using TITLE and alt text with ALT. so, if you wanted to resize a square down to 100px, that would look like this:

<img src="URL" width="100">

you can also align your image as left, right, or centered on the page. just place your image within a <div> tag like so:

<div align="center"> <img src="URL"> </div>

[lovesoakedd]

okay so this is my, like, little tutorial on how to make gradient text, or text colours different than the ones tumblr offers. both for my lovely moot, @sappho-bambi, and for anyone else who needs it. ♡

i'm, by no means, an expert, or even really knowledgeable, on coding, so this is a super informal explanation, but i hope it works.

--

head onto this website

go to where these two coloured boxes are. the colour of these essentially determine the colours your text will be.

i always choose the colour on the left block first, which determines the colour your line of text will start as. i do this by clicking on the left box, then choosing from the colour-hue-thingy.

okay, so let's say i decide on this pale pink colour. once you've landed the little white and black circle on whichever shade you want, you can just click anywhere else on the page to make the colour-hue-thingy disappear. the colour you've selected for your left box will remain.

now, if you want your line of text to be the exact same colour, you should take the numbers under the colour-hue-thingy, on top of the R, G and B sections, and just insert them into those exact same boxes as when you click on the box on the right (the green one, which determines the colour that your text will morph into at the end, on its right side). so, see in the images below -- if you want your text to remain the exact same colour through all the letters, take those coordinates of the colour you liked and chose in the left box (the pink one), and just plug those numbers into R, G and B sections of the right box (the green one). that'll give you the exact same colour and will ensure your text is entirely this pale pink colour.

however, if you decide you want to have a different colour on the right end of your text (like, the pale pink heightening to a dark pink, or morphing into a blue colour), then you'll pretty much repeat your first steps. you'll click on the right box, the green one, and use the colour-hue-thingy to select on whichever colour you'd like.

now, for the coding shit. so, copy and paste or write out the line of text you want to be coloured in the first/top white box next to the coloured boxes.

now, click "Run." this will generate the code you need in order make your text this colour(s). the code that shows up in the second/bottom white box is your coloured text's code (the "span style" thing). copy this.

head to your tumblr post, the one you want this coloured text to be in. i just added random text as well so i can show how to specifically change the colour of one line/block of text.

so, click on the wheel on the upper left corner of your post. when you do, a toggle will pop up with different settings for your post. scroll to the section that says "Text Editor." click on where it says "Rich Text," then change that to "HTML." this will basically turn the formatting of your post into one huge code, which will allow you to insert the code of your coloured text.

so, your post will now look something like this.

now, highlight the text that you want to insert the code of your coloured text into (in this case, it's "strap woohoo" -- only highlight that, not <p> or </p> since you need those to stay). basically, highlight only the text you've been planning to make coloured this whole time, the "strap woohoo." now, copy and paste the code of your coloured letters (the thing that says "span style," that you copied from the generator), into the highlighted text ("strap woohoo").

looks daunting as fuck, i know 😭 but, this means you've successfully added the code of your coloured text! it's so long because the code accounts for the colour of every single letter. now, save this as a draft, and voila!

and from here, you can bold the text, italicize it. and the more you work with it, the more you'll figure it out intuitively. 😛💗

[yukioos]

quick question how do you get your format such as the color palette to your warnings, pairing etc etc. ???

hi! this is a great question! sorry if this isn’t too clear, i’m not the best at explaining.

step 1:

find 3 images that fit ur fanfic or whatever ur writing! i normally choose an image of who im writing about and two other images that fit the fanfic i’m writing.

example: if i were to write an in-ho x reader fic where him n reader pick fruits from their garden then have a picnic, i would pick photos that are related to my writing.

step 2:

go to ibispaint or a color picker website/app. i always choose one color from the image of the person i picked, and one color from one of the other two photos. (another option is to choose one color from each photo that look good together)

example: (colors i chose are in the bottom right of each photo)

step 3:

go to gradient maker. enter the hex code from the first color you chose into the first circle farthest to the left. then, enter the hex code from your second color into a middle circle (50% position so it is fully in the middle). after that, make your third color in the last circle, which is farthest to the right. once you’re done, click the arrow next to ‘copy cds’ and click download as image. the image will look odd at first.

example:

step 4:

go to ibis paint and click the plus. make your layout 4096 x 50, then insert your gradient image into the layer. resize it so it will look like this and more smooth.

example:

thats it for the gradient! now, onto the text!

step 1:

go to text colorizer and enter the text you want. choose the color effect ‘three colored gradient’ and insert your colors in the order you want it to be shown as. keep the default font and size, as you can change it in your actual post once it’s done. once you like how the text looks, copy the HTML code for the text.

step 2:

go to the tumblr website and edit your draft or post. click the settings in the top right corner, then scroll down to find ‘text editor.’ it will originally say ‘rich text,’ but change it to ‘HTML.’ copy your HTML code into the post, and repeat step 1 and 2 with different texts until you have everything you want in your post.

result:

EXAMPLE

SUMMARY:

AUTHORS NOTE:

WARNINGS:

xtra: i hope this was helpful! i normally make my title bold and normal size, but for summary, authors note, and warnings, i make them smaller text but still bolded :)

[mojowitchcraft]

How to Add Images to Ao3

Since it's @steddiebang season I thought I'd do a quick guide on how to add images to your fics in case people don't know how! First off, you need to use the "Rich Text" Editor on Ao3

Next, you need the url of the image you want to embed. This needs to be a direct link to the image (not the post of it on socials) the way to get this is to right click on the pic wherever it's posted and "copy image address" this will copy the direct link to the image

In the Ao3 Rich Text editor click the picture icon to "insert/edit image" paste the "source" url adjust width and height as needed

There you go! Image in your fic! A few things to note: I copied this url from tumblr, the quality is significantly lower than the Ch1 image I already have in there. Since I haven't posted all my title cards on socials I posted them on imgur and set them to private. You could also post them on a private Pinterest board or another hosting site, you just need that url to the image address.

If you want the image to be centered (something i struggled with for a while) you can click next to it to select the text line it's sitting in and center it from there

Personally, when I embed art in fics I add a line underneath to link to credit the artist & the original post to encourage readers to engage with the art directly. You can do that in the rich text editor like so:

And cause i'm a stickler for crediting here's the link to this art by @glitterfang on Twitter & Tumblr

If you want to link anything in the Summary or Notes then you need to use html like this: <a href="LINK URL" rel="nofollow">DISPLAY TEXT</a> Okay! Thanks for coming to my ted talk, hope that helps at least one person!

[agsthv]

how do u make ur text a gradient

go to this website and insert an image of your moodboard (take a screenshot of it) so u can get matching colour codes !!

type in your caption in this website and choose “three colour gradient”. and paste the colour codes in the order you want

copy this text here:

next, go to this site, paste the html code there and type: ; in “replace this”, press “replace text” and copy it to ur clipboard

lastly, go to tumblr (the website not the app) go to ur drafts, press the pencil icon to edit and select the settings icon at the top right corner to change “rich text” to “html”

finally paste your html code (that u copied to clipboard before) and ure done !

[thecoramaria]

How to insert images into ao3 in the notes?

Thanks for your ask! I know this can be incredibly frustrating, so here is my method:

Upload your image onto the Internet Archive: Since AO3 doesn't host images itself, you'll need to host it elsewhere, and ensure it's the kind of place that won't delete content or cause your link to break. That's why I use archive.org, because like AO3, it values preservation and runs off of donations (which you should totally contribute to if you can).

In your notes, paste this HTML code: <p><img src="[IMAGE LINK]" alt="[ALT TEXT]" width="1200" height="600" align="center" /></p>

Get the right image link: Alright, this is the part that I always get tripped up on and takes me forever to figure out. You cannot trust any embed text the Internet Archive gives you; it won't work! You also can't just use the link from the page for your item. What you have to do is right click on the item and open the image in a new tab, and then use that link. It should look something like this, as the percentages in there gives it away: https://archive.org/download/tli-part-iii-banner-for-ao3/TLI%20Part%20III%20Banner%20for%20AO3.png

Fill out the blanks in the HTML: So you take that image link and paste it to replace [IMAGE LINK], then you delete [ALT TEXT] and describe your image in words. This is important because it means screen readers can tell vision-impaired readers what the image is, and also if the image does not load for whatever reason, the alt text will be displayed instead. You may also need to adjust the width and height in the HTML as well, but I've heard that part generally doesn't matter so much.

Preview your story: Before you hit post, you'll want to ensure the embed is working correctly. That's why you should preview before you post. I will warn you that AO3 does like to add random spaces and such around HTML code after you exit from preview back to editing, so watch out for those and fix them before you hit post.

If your code works, SAVE IT! Copy and paste it somewhere it will always be in reach and easy to use later. Trust me: you don't want to have to figure out how to do this all over again.

I reckon the next time I post a fic that involves an embedded image, I should record a tutorial, since it'll give you something to follow along with visually. What does everyone think?

[artemistorm]

Woo! I figure out how to post artwork to AO3 from images hosted on BOTH archive.org and Tumblr! Putting how to do it here in a post so I remember for later:

From Tumblr: right clock on the image and select "Copy Image Link" (you can't use the post link, it has to be the image's link). Then in AO3 in Rich text format, click on the "Insert/Edit Image" button and paste in the link and hit enter and it should immediately pop up.

From Archive.org: upload the image to the archive and in the image's page, click the share button (you have to scroll down to see it). Copy the embed link that pops up. Then in AO3 in HTML, paste the link directly into the text and then hit either preview or post to show the artwork. Note: the title of the artwork is pasted across the top of the image and serves as the link back to archive.org.

[deityoftherain]

How to Embed Images and Links on AO3

Note: I have a site skin so the colors might look different. Just follow along with the red arrows! Also, this is a tutorial used on the computer, and I assume mobile posting would be different.

First, open archiveofourown.org and log in if you haven't already. If you don't have an AO3 account, sign up for one as soon as possible because it takes about a week for them to verify you and give you access to your new account.

Next, select "Post" in the top right hand corner like you would typically. Set up everything you desire as you normally would until you reach "Work Text*".

Note: If you need further help, I have an AO3 Tag Guide, a Story Title Guide, a List of Random AO3 Shortcuts, and a How to Post a Work on AO3 with Step-by-Step Explanations Guide for your convenience! I also have a Foundations Writing Lesson post for any beginners or for people who would appreciate a review <333

Once there, click on "Rich Text" in the top right of that section, and then select the image icon or the link icon, depending on which you are intending to make.

Note: Check under the cut for more in-depth instructions slash a continuation of this guide! There is an Image Icon Route and a Link Icon Route.

Image Icon Route

Once you click on the Image Icon, the screen similar to below should pop-up:

*Link Icon Route detour start here

The source is the link to the image you're wanting to add to your work. AO3 doesn't host images itself, but you can use an image hosting site such as postimages.org or even Tumblr itself. If you want to use Tumblr, post a draft with the desired image or locate a post with the desired image. Once you've done that, right click the desired image and Open Image in New Tab (or whatever your computer's equivalent is).

You should have a tab open that starts with "https://64.media.tumblr.com" followed by a bunch of numbers and letters. I want you to copy that link and post it in the source box.

*Link Icon Route detour ends here

Now that the image link is in place, adjust your Width/Height boxes if desired. Feel free to add an image description as well. For best result, I suggest doing 100% in the Width box with nothing in Height, but this is ultimately a personal decision. Feel free to mess around with the proportions using the work drafts and find what's best for you!

If you prefer, you can also use < img src="LINK" alt="IMAGE DESCRIPTION" width="100%" align="center" /> aka < + img src="https://64.media.tumblr.com/0e3d1827f755eae4c79e605a8e73a44b/f65ab99ee3c9bf64-a8/s1280x1920/8608529567963545a061989b32a1d4541272ef51.jpg" alt="" width="100%" align="center" /> for this example (*excluding the plus sign at the start) to insert an image using HTML instead of Rich Text. It'll look like this:

It is always a good idea to double-check and confirm that everything is how you want it. Previewing your work also allows you to create a draft.

If you're unhappy with something, edit the work to fix it! If you're happy with how everything looks, go ahead and post it! You're finished here! You've successfully posted a work with an image embedded! Well done; good job :D

Link Icon Route

Once you click on the Link Icon, the screen similar to below should pop-up:

Go copy (Control+C or Command+C) the link to whatever it is you want to insert into the body of the work.

Note: If you're wanting to link specifically to an image and not a post containing that image, scroll up to the link icon route detour colored purple.

Once you got that, paste (Control+V or Command+V) the link into the URL box. If you want something other than the link to display, change the text in the "Text to display" box.

Save your work, check the formatting and everything else like we did in the Image Icon Route section. If everything is how you want it, then congratulations! You have successfully added a link embedded to your work!

If you have any questions or comments, feel free to comment and I'll respond! If this guide was helpful to you, please like and reblog! I appreciate it <333