After uploading an image, the next step is using it in an article! Here's how to embed an image into an article.
Basic steps
- Go to the Images section from the left sidebar.
- Find the image you want to embed and click on the copy button that will appear when you mouse over. This will copy the image's code to your clipboard.
- Go to the article and paste to embed the image. If using the BBCode editor, the embedded image will look something like [img:5068227].
If you're using the WYSIWYG editor, you can use the Image button on the toolbar to edit options like alignment and size.
When pasting the image code in the image menu, use the numbers only. For example, if the code is [img:5068227], use 123 instead
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.
- If using the WYSIWYG editor, simply paste the URL to the image ID field.
- If using the BBCode editor, use it as part 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!
Quick embed
Available to all Guild subscription tiers. Upgrade here.
Guild members can use the extended mention system to quickly embed any image:
- Type the [ character followed by the first letters of the image name.
- Select the image you want to embed from the drop-down list.
Additional options
This section is for users of the advanced BBCode editor. If you are using the WYSIWYG 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:
For more information about external linking, check out how to link external pages.
