Guide to Images

Written by TJ Trewin and Amy Winters-Voss

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. Images also help break up large sections of text to enhance readability.
When you want to use an image you have to first upload it to WorldAnvil. Once uploaded the image can be added to your articles and any other resources which accept BBCode.
In addition, you can add image galleries to the bottom of your article and create an image carousel.

Check the sidebar for additional image BBCode options! You can make them wrapped by text, restrict their width and remove the image link.

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 directly with this link.
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.

You can upload any of the following image file types: WEBP, JPG, JPEG, PNG, GIF
Free accounts: Maximum file size is 1.0 MB
Guild members: Maximum file size is 10.0 MB

Image Metadata

The metadata of an image includes the following fields:

• Name: The name of the file on WorldAnvil. This is displayed when the image is hovered and can be used to find the image. This also shows up under the image when embedded into the article.
• Lock: A blue, open lock means the article is public and a red, closed lock means the article is private. You can click the icon to change the state.
• Star (Favorite): The yellow star can be used to favourite an image. These images will be displayed at the top in the Images & File manager. It has no other effect.
• Description: A long-form description of the image. This is used in the Image Block BBCode and displayed when someone clicks on the image.
• Tags: The tags help you and others find the image. The global search in the world will find these tags. Separate by comma and start with #.
• Artist Name: The name of the artist who made the artwork. Will be used for credit. This also shows up under the image when embedded into the article.
• Artist URL: Add an URL to the artists website or portfolio. Can only be used if the name field is filled in.
• Art Title: The title of the art given by the artist or assigned by you.This also shows up under the image when embedded into the article.
• Art URL: A link to the art where it can be found if applicable. Will only appear in the credits if a title is set.

When you are in the Images & Files manager you can click on the image you want to edit. The fields above will then appear on the right sidebar. All changes will be saved automatically.

• World: Each image belongs to a world. This can be changed. Images can only be used in the world they belong to. Images that are used in more than one world need to be uploaded as many times.
• Galleries: An image can belong to one or more galleries. Galleries can be used to organize your images and for Article Galleries and Carousels

There are additional options when you click the pink 'Advanced Edit' button at the bottom.

• Replace File: It is possible to replace the image file. All links will continue to work and simply display the new image.
• Link URL: This will replace the default link of the image when it is clicked. It needs to be an absolute link.
• Access: An image can be set to private. This image will only be visible to people who are part of the subscriber groups allowed to view the image.
• Subscriber Groups: Add subscriber groups that are supposed to see the image.

When you wish to delete a file, click on the red 'Delete File' button and click the green confirmation check button. This is final and can't be reverted!

Add Image to ...

There are a number of ways how to add an image to an article. How it works depends on your choice of the editor as well.

Character Portrait & Organization Crest

The character article template has a special field for a character portrait. This portrait is used in family trees, bloodlines, historical events and in NPC's / PC's of Campaigns. The image itself is added at the top of the sidebar above any other content you can add.
Follow the instructions in the GIF to the right to add the image. The typed name can be set in the Images & Files Manager.
The same applies to organization crests, but they are used in diplomacy webs instead.

World Background

The world background image can be changed via setting: Page Background.

Page Cover

An image can be added as a cover image for one or several of these. Each of these interfaces is either a dropdown with all images or expects you to type the name of the file. The recommended resolution for all covers is 1920x500. Each theme has a default cover which is displayed when you do not set one yourself.

• World
  • Homepage Cover
  • Global Cover
• Category
  • BOOK-STYLE COVER: A category displayed as a book will use this image. Recommended dimension is 300x400.
  • PAGE COVER: This image is only used on the category page.
  • DEFAULT ARTICLE CATEGORY COVER: This image is used in all articles which are directly under this category and their sub-articles. It is not inherited to subcategories.
• Article
  • ARTICLE COVER IMAGE (HEADER): The image is used at the top of the article and in the article blocks.
• Historical Event
  • HISTORY COVER IMAGE (HEADER) : The image is used at the top of the historical event.

Article Image

To add images to an article in any place you have to add either the BBCode or use the editor button Insert Image to add an image. If you don't know which editor you use check here.

The first step is to get the BBCode for the image. There are two options to do so:

Clicking on any of these two icons will copy the BBCode of the image into your clipboard.

Plato

Use the Insert Image button on the editor toolbar to add the image. Paste the code into the ID field and remove everything that is not a number. If you do not do this it will not work. Alternatively, you can copy&paste the BBCode in source mode.

Euclid & Legacy

Simply paste the code into the editor. The image should show now. Check the sidebar for all the options.

Image Block

The image on the right is added as an image block. This format creates a box around the image and adds the description and name from the image metadata. To insert an image block, simply type [imgblock:ID] using the Euclid & Legacy Editors, replacing ID with the image's ID number. In the plato editor use the source mode to add the image block BBCode.
You can also specify the background color if the image is transparent: [imgblock:123|color] will display an image using the color you specified as the background. You can use any HTML Color for this parameter. You can find common names here.
The image block does not currently have any other options. They have to be added with custom article CSS.

Dimitris Announcement Chibi small

by 10TenArt

Chibi Dimitris has something to tell you!

Images & Files Manager (Codename: Apollo)

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.

2) Use the navigation panel on the left of the 'Images and Files' manager.

The 'Images and Files' manager opens to view recently uploaded images. From there you can search through the recent, your favourites (for more info, read 'Organizing Your Images' below), or click on a world to view its images and organization structure/galleries. In the example below, the yellow box shows the world name and the red box shows the gallery folder name.

Once you find the image you want to use, copy the image ID to the clipboard as described above in How to Add an Image to Your Article.

Gallery

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 the left gallery, you will see a text box to create a gallery:

Add Image to Gallery

There are three ways to add images to galleries.
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.

2) In the image attributes panel on the right, if you scroll to the bottom of the panel you'll see a green button that says '+ Add to Gallery'. If you click on it, you'll see a menu of the galleries available. Click on the gallery you want and it will be added under the 'Galleries' title. If you accidentally picked the wrong one, click the red 'x' next to it and remove it from the gallery.

Article Gallery

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)!

Image Carousel

To retrieve the gallery carousel BBCode, navigate the gallery in the navigation panel on the left, then click on the clipboard icon.

Paste the BBcode into an article to display the carousel. The example shows all the guild rank icons of WorldAnvil.

grandmaster-venerable.png

grandmaster.png

journeyman-venerable.png

journeyman.png

legendary (1).png

legendary.png

master-venerable.png

master.png

rank-deity

rank-epichero

rank-freeman

rank-grandmaster

rank-innersanctum

rank-journeyman

rank-legend

rank-master

rank-sage

rank-titan

sage.png

sanctum (1).png

sanctum.png

titan (1).png

titan.png

How to Find Images to Use in Your World

If you want to use other people's images in 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:

• The Ultimate Student Guide to Images
• Can I Use That Picture? by thevisualcommunicationguy

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.

Image BBCode Examples

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]

---

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!

Quick image linking

Quick linking is a Guild feature!
If you want to make use of this feature, consider supporting World Anvil.

Guild members can use the mention system to link to other kinds of content —including images. Simply type [ followed by the first characters of the image name. A drop-down will appear with all non-article elements with names matching your input. Simply select the image you want to inser and the standard BBCode img tag will be pasted in.

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 CSS Guides 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!

How do I move an image to another world?

Go to the Images & Files page and click on the image you want to move. Then, in the right sidebar, find the World field it and use its drop-down to move the image.

Can my co-owners & editors use the images on my account?

Yes. However, they cannot use the search fields to find them. They need to directly find the ID in the Images & Files manager.

Competition Information

Going forward it will now be a mandatory requirement that you credit the artists whose images you use- even if you yourself are the artist who created the image; don't credit your artists? Your article can no longer be featured- and will no longer be eligible to win competitions!

Using the blue button

If you are a Guild member, you can use the blue button (bottom right corner) to mass upload images from any page on your world, even while you are writing an article. Check out the Guide to the Quick Buttons for more details.

External Images

Warning, Using External Images comes with a risk! If you use an externally linked image to your articles, and the image is reported (under copyright), there is a chance that your article will be deleted in whole!

• You will have no issues if that is a private world.
• You will have 24 hours after the DMCA is submitted

Also this feature is still under review, and may be removed. So use sparingly.

Example use

[img:https://i0.wp.com/www.lostkingdom.net/wp-content/uploads/2017/01/medieval-workday.jpg]
Note: Width in pixels, left, center, right still work

Addidional Guides

—Amy Winters-Voss