caprbb_mod (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
caprbb_mod) wrote2019-05-17 08:37 pm
caprbb_mod) wrote2019-05-17 08:37 pm
EMBEDDING ARTWORK INTO AO3 POSTS
We've put together a quick tutorial on embedding artwork into works posted on AO3.
The first thing to know is that images must already be hosted on an external website in order to be embedded into AO3 posts.
If you're not sure where to host your art, AO3 have put together a guide on suggested posting sources.
STEP 1 - upload your image to your preferred hosting environment
Wherever you end up hosting, you will need a full image URL to embed the art, so watch out for places like Google Drive which may not work as a source for hosting images - it gives a share link, but not the image URL.
The suggested alternatives are Flickr and DeviantART. You can use Tumblr, Twitter, Pillowfort or Facebook (or any other platform where art can be uploaded to share socially) but please note that URLs can change over time or disappear completely which will result in a broken art link, and your embedded art will no longer appear in the post. Tumblr links are especially unpredictable and seem to break for no apparent reason.
AO3 does not recommend Photobucket or Imgur because it's against their Terms of Service to host imagers for embedding elsewhere, but lots of people still use those services. Photobucket will sometimes put a watermark of their logo over your image, or throttle your bandwidth and stop showing the image if your quota is exceeded unless you're on their paid account. Also, if your image is NSFW, they may simply delete it as this is also against their ToS.
You can even use Dropbox and other similar file storage repositories, however, please note that you need a direct image url for embedding to work. Simply copying a url from the browser window isn't enough, and you may need to go searching for this link as it's not always easily accessible.
Examples of links that WILL NOT work for image embedding:
These will not because while the link will direct you to where you can view the image, it's not an image url. An image url will end in one of the following file extensions: .jpg or .png or .gif
Examples of links that WILL work for image embedding:
All of the above will work because they're a direct and complete link to the image you want to embed, and you can tell because the link ends in a file extension: .jpg or .png or .gif
STEP 2 - embed the art in an AO3 post
Once you have your images hosted on an external site, you can use either the Rich Text editor or the HTML editor to embed the images:
Rich Text
Click your cursor on the position you want the art to appear.
Click on the "Insert/edit Image" icon
You will need the full URL, including the file extension at the end. Eg: https://website.com/filename.jpg
Enter the link in "Source"
Enter Image Description if required
Adjust and constrain proportions if required. We suggest constraining proportions and adjusting the max width to 800px so your whole image fits within the AO3 viewing area.
HTML
If you prefer to insert in HTML format, click your cursor on the position you want the art to appear
Insert code as follows: <img src="insert your full url with extension here inside these quotes">
Responsive Images
Have you ever clicked into an AO3 art post on your phone, but the image was so big that you have to scroll every which way to see it all, piece by piece? Have you ever wished that the art would be magically resized to fit your screen so you could view the whole thing, and zoom in if you wanted? Well, wish no more! Here is how to make it happen.
On your AO3 dashboard, click into Skins > My Work Skins > Create Work Skin
Call your Work Skin something like "Responsive Mobile Image Skin"
In the CSS box, paste the following:
And voila!
When your readers click on your AO3 work, the images in your post will be automatically resized to suit their device, whether it's on their desktop, mobile or tablet.
Drop any questions in the comments, we're happy to help!
The first thing to know is that images must already be hosted on an external website in order to be embedded into AO3 posts.
If you're not sure where to host your art, AO3 have put together a guide on suggested posting sources.
STEP 1 - upload your image to your preferred hosting environment
Wherever you end up hosting, you will need a full image URL to embed the art, so watch out for places like Google Drive which may not work as a source for hosting images - it gives a share link, but not the image URL.
The suggested alternatives are Flickr and DeviantART. You can use Tumblr, Twitter, Pillowfort or Facebook (or any other platform where art can be uploaded to share socially) but please note that URLs can change over time or disappear completely which will result in a broken art link, and your embedded art will no longer appear in the post. Tumblr links are especially unpredictable and seem to break for no apparent reason.
AO3 does not recommend Photobucket or Imgur because it's against their Terms of Service to host imagers for embedding elsewhere, but lots of people still use those services. Photobucket will sometimes put a watermark of their logo over your image, or throttle your bandwidth and stop showing the image if your quota is exceeded unless you're on their paid account. Also, if your image is NSFW, they may simply delete it as this is also against their ToS.
You can even use Dropbox and other similar file storage repositories, however, please note that you need a direct image url for embedding to work. Simply copying a url from the browser window isn't enough, and you may need to go searching for this link as it's not always easily accessible.
Examples of links that WILL NOT work for image embedding:
These will not because while the link will direct you to where you can view the image, it's not an image url. An image url will end in one of the following file extensions: .jpg or .png or .gif
Examples of links that WILL work for image embedding:
All of the above will work because they're a direct and complete link to the image you want to embed, and you can tell because the link ends in a file extension: .jpg or .png or .gif
STEP 2 - embed the art in an AO3 post
Once you have your images hosted on an external site, you can use either the Rich Text editor or the HTML editor to embed the images:
Rich Text
Click your cursor on the position you want the art to appear.
Click on the "Insert/edit Image" icon
You will need the full URL, including the file extension at the end. Eg: https://website.com/filename.jpg
Enter the link in "Source"
Enter Image Description if required
Adjust and constrain proportions if required. We suggest constraining proportions and adjusting the max width to 800px so your whole image fits within the AO3 viewing area.
HTML
If you prefer to insert in HTML format, click your cursor on the position you want the art to appear
Insert code as follows: <img src="insert your full url with extension here inside these quotes">
Responsive Images
Have you ever clicked into an AO3 art post on your phone, but the image was so big that you have to scroll every which way to see it all, piece by piece? Have you ever wished that the art would be magically resized to fit your screen so you could view the whole thing, and zoom in if you wanted? Well, wish no more! Here is how to make it happen.
On your AO3 dashboard, click into Skins > My Work Skins > Create Work Skin
Call your Work Skin something like "Responsive Mobile Image Skin"
In the CSS box, paste the following:
#workskin img {
max-width: 90%;
height: auto;
}
Save your skin!
Next time you're creating an AO3 work with art embedded in it, select your work skin from the drop down, like so:
Save your skin!
Next time you're creating an AO3 work with art embedded in it, select your work skin from the drop down, like so:
And voila!
When your readers click on your AO3 work, the images in your post will be automatically resized to suit their device, whether it's on their desktop, mobile or tablet.
Drop any questions in the comments, we're happy to help!