After uploading an image, the next step is using it in an article! Here's how to embed an image into an article.
With the Visual Editor
To add an image you haven't uploaded yet, simply drag it from your computer and drop it into the article! The image will be automatically uploaded.
To embed an image you've uploaded previously:
- Open the slash menu and look for the image option (i.e. type "/image").
- Use the pop-up to select an image (you can also upload a new one from here).
After you've added the image to the article, click on it to see some options you can edit (such as alignment and size).
With the Advanced BBCode editor
- Click the Image button in the editor toolbar.
- Find the image you want to embed and click on it. Alternatively, upload a new image.
- The image will be embedded!
If you're a Guild member and remember the image's name, you can also embed the image's BBCode using the extended mention system. Simply type an open square bracket [ followed by the name of the image, and select from the drop-down.
Embed image by URL
You can also embed images using direct links. Follow these steps:
- Find the direct link to the image. Direct image links will end in a standard image file extension, such as .png or .webp.
- Use the URL instead of the image tag. For example: [img:https://www.worldanvil.com/uploads/images/f25afae2fca6f06a7727231075329ff1.png].
Use at your own risk!
If you use a copyrighted image without permission using this method and we receive a takedown request, we might need to take down the entire article. Always ensure you have permission to use an image, and credit the artist!
Additional BBCode options
This section is for users of the advanced BBCode editor. If you are using the Visual Editor, refer to the section above.
The [img] has three arguments you can use to tweak how the image is displayed:
Change the image alignment
The first argument is the image alignment. It accepts three values: left (default), center, and right.
Resize the image
The second argument is a number that equals the maximum width of the image. It can be any number, but the image will be resized to fit the page (i.e. if the image is wider than the page, its size will be reduced).
Important note: in order to specify a size, you need to have an alignment too. If you don't want to change the default alignment, use left.
Disable the automatic link
By default, readers can click on an image to see the image's description page. If you don't want this to happen, add the nolink argument.
Use the image as a custom link
You can use images as external links. Simply use the nolink argument and wrap it using the [url]...[/url] tags, like this:
Or, if you want all instances of that image to link to the same place, edit the image and use the "Link URL" field.
For more information about external linking with the URL BBCode tags, check out how to link external pages.
