Guide to Images
A picture is worth a thousand words.It's true! An image can help to visually describe things to a reader or audience to help them understand things in your world at a deeper level. Pictures also help break up large sections of text to enhance readability. This guide will show you how to upload an image and place it in your article, how to create image galleries, how to find images for your world, how to credit an artist and also a bit about why we use this system on World Anvil and not direct linking.
How to upload an image
Go to your dashboard and click the 'Images and Files' button. This can be found in the left sidebar (see the screenshot in the right) or in the green power hammer button at the bottom right corner of the screen. You can also access the 'Images and Files' page via this link: https://www.worldanvil.com/apollo/ From here you will be able to drag and drop or browse to select an image to upload, as well as add a title, description, tags and credits. The drag and drop/click box is at the bottom of the page.
A handy trick for when you have many images in a gallery folder. If you have an 'End' button on your keyboard, it will take you to the bottom of the page.
Editing the Name and Attributes of Your Image
In the 'Images and Files' manager, if you click on an image it will appear on the right sidebar. There you can click on the attributes you wish to change, and the changes will be automatically applied. For example if you change the file name, a popup will appear that the file name has been changed. To add the file to your 'Favorites', click on the yellow star by the file name. When it's solid yellow, it's in your favorites. Remember to credit the artist for your images! Adding the image to a gallery folder is as easy as clicking the green '+ Add to gallery' button and selecting which gallery folder you want. Images can be in more than one gallery folder. To replace the file with another, click on the pink 'Replace File' button. This will take you to another screen where you can browse for the replacement image and click save to swap the old image with the new. When you wish to delete a file, click on the red 'Delete File' button and click the green confirmation check button. (This secondary check, should help avoid accidental deletion.)
How to add an image to your article
There are two options to get the image BBCode. 1) Once you have uploaded your image and filled in any extra information you need. Click on the pink clipboard icon and number under the image nameto copy the the BBCode for this image.
How to assign a character portrait
Once you have uploaded the image you want to use, you will need to go and edit your character article. The article must be using the character template for this to work officially, but you can get around this by putting the image bbcode in the Sidebar: Over panel content in the Design tab of your article when editing. Note that this method will not appear in RPG campaigns. If you are using the character template, scroll down to Character portrait under the profile section of the character article. Select the image that you uploaded, hit the save changes button and you're good to go!Finding Your Image in the 'Images and Files' Manager
There are two ways to find the image you need for your articles. 1) Use the search bar, located at the top of the 'Images and Files' manager. Just type in at least 3 characters of the file name. The results will show up under the search bar.
Working with Galleries
Galleries are like folders for images. To create a new gallery, go to the Image manager and select the world you want to create the gallery in. At the bottom of left gallery, you will see a text box to create a gallery:
Organize your files
We have multiple ways to organize our files. 1) In the 'Images and Files' manager, you can drag the image to the desired gallery folder. Images can be dragged to more than one gallery.
How to Add an Image Gallery to Your Article
In your article, Once you've created an image gallery and added some images to it, go to the Design tab of your article. Select the image gallery and click save changes. When you view the article, the images will display in a gallery at the bottom of the article (just like this one)!How to Add an Image Carousel to Your Article
To retrieve the gallery carousel BBCode, navigate the the gallery in the navigation panel on the left, then click on the clipboard icon.
How to Find Images to Use in Your World
If you want to use other people's images on your world, you can - but be mindful of using images with the correct Creative Commons Licence and always give credit to the artist or creator in the image info. Read more about why this is important regarding copyright in this upcoming section. Here are some super useful guides that explain how you can find free, CC0 images to use in your world:How to credit an artist
Make sure you've read the guides in the section above to check if you're allowed to use the image, and then go ahead and upload it. Once you've uploaded it you can fill in all of the sections such as title, description and tags. Under this there is a section for crediting the original creator or artists, the URL to the original (if applicable). This information will display discreetly underneath the image to let people know that you are crediting the artist. Here is an example of this in action:
by TJ Trewin
Why do I have to upload the image?
The reason we do not allow direct linking to images and have the upload system is due to copyright. If an artist, photographer or creator discovers that you have used one of their images unlawfully or without permission - they may contact Dimitris, the developer, and ask him to remove the image. Thanks to the upload system, Dimitris can target the problematic image and remove it without having to delete the entirety of every article it was used on.Contents
Image BBCode Examples
In this section are examples of the different BBCode that you can apply to images.
Code:
[img:82765]
What it does:
Adds the image to the page at an automatic scale. You can click on the image to go to the image's page for more information.
Code:
[img:82765|nolink]
What it does:
Makes the image unclickable, meaning you can use it as a purely decorative element.
Code:
[url=https://www.worldanvil.com/world/image/list][img:82765|nolink][/url]
What it does:
An image with nolink allows you to give it a custom link with the url BBCode.
Code:
[img:82765|left]
What it does:
Floats the image to the left.
Code:
[img:82765|right]
What it does:
Floats the image to the right.
Code:
[img:82765|center]
What it does:
Aligns the image to the center.
Code:
[img:82765|left|50]
What it does:
Sets the image width to 50. Change this number to whatever you like!
Please note there is a specific order the input options need to be put in.
[img:(number)|alignment (left,right,center)|width in pixels|nolink]
[img:(number)|alignment (left,right,center)|width in pixels|nolink]
FAQ
How many images can I use in an article?As many as you like! But be careful not to add LOADS as it can make your article look cluttered or load slowly! What's my upload limit overall?
This is viewable in your Image List! Free members have 100 MB storage, with 1MB Max uploads and 3.5MB Max uploads for Maps. Guild members have significantly higher storage levels which you can check out here! How do I change my world's background image and appearance?
This is one of the many perks of being a guildmember! You can achieve this with custom CSS in your world configuration menu. Check out the Guide to CSS Formatting for more info. Can I put the image BBCode anywhere on the site?
Absolutely! You can even put it in map pins, timeline excerpts and your world vignette!
Absolutely amazing guide!
Would it be possible to have image-embedded bbcode images? IE: you would still have to add the image via the upload/gallery, and use the bbcode link to link it to the article, but the bbcode is using the original image host rather than hosting the file on your servers itself. The system already functions by using bbcodes to reference a URL. When you upload an image, it gives you an option to include the original URL. If you included the feature for images to be added without uploading files, and for images with custom url's to embed THAT url instead of the local url. ex. src="/uploads/images/" vs "if bbcode has customurl, src="customurl"" This would still make it easy to locate and delete violating images by deleting the bbcode img, but would reduce the amount of data the server would need to host, and permit more content w/ less data.