---
title: "Formatting images in MediaWiki"
description: "If you do not know how to insert an image in MediaWiki, please see the previous article on how to insert images in MediaWiki. Formatting images in MediaWiki requires special wiki code to be inserted..."
url: https://www.inmotionhosting.com/support/edu/mediawiki/formatting-images-wiki-code/
date: 2013-01-23
modified: 2021-08-16
author: "InMotion Hosting Contributor"
categories: ["MediaWiki"]
type: post
lang: en
---

# Formatting images in MediaWiki

If you do not know how to insert an image in MediaWiki, please see the previous article on [how to insert images in MediaWiki](/support/edu/mediawiki/insert-images-wiki/). Formatting images in MediaWiki requires special wiki code to be inserted into your image code. Unfortunately, MediaWiki does not have the code built into their WYSIWYG editor. The following table will show how to format your images to float left and right, add captions, links and more.

## MediaWiki image format code

Each MediaWiki code for formatting the image appearance can be combined with each other. The basic format for the image wiki code is as follows:

[]
To combine different attributes for the image, you can add the code similar to the following:

[]
The following is not exhaustive; however, you will be able to format your MediaWiki images with the code in the following table.

| Image wiki code |
| --- |
| Image linking (Internal) | [] [![Image Internal Link MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-1-internal-link.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-1-internal-link.gif) This code will ink your image to another page within your wiki. You use the page name in the code for the link to work. In this example the link is to a page called “*MediaWiki*“. |
| Image linking (External) | [] [![Image External Link MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-2-external-link.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-2-external-link.gif) You can create a hyper link to another website within an image with this code. In this example, the image will direct to https://www.wikipedia.org when clicked. |
| No Image linking | [] You can disable a hyper link to another website within an image with this code. |
| Caption | [] [![Iimage caption MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-3-with-caption.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-3-with-caption.gif) Click here to view the larger image This requires the frame attribute to show caption on the webpage. The image will default to float right if no alignment is specified. Otherwise, captions will only show as the “*alt*” tag in HTML code. |
| Remove Image caption | [] [![No Image caption MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-4-no-caption.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-4-no-caption.gif) Click here to view the larger image Supplementing “*\|<span title=””></span>*” for the  the “*\|caption*” code out of the wiki code will remove the “*alt*” text from the image HTML. |
| Border | [] [![Image with border MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-5-with-border.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-5-with-border.gif) This places a thin border around the images. |
| Frame | [] [![Image frame border MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-6-frame-border.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-6-frame-border.gif) The frame will display the caption text below the image. The frame is invisible without the caption. Frames are “*div*” tags that place the image into a specific CSS class. We will not discuss what “*div*” tags are in this article. |
| Frameless | [] [![Remove frame immage MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-7-remove-frame.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-7-remove-frame.gif) This removes the “*div*” code with CSS attributes from the images allowing only the image code to show. |
| Frameless Border | [] [![Image frameless border MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-8-frameless-border.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-8-frameless-border.gif) Displays the image with no frame (no “*div*” code with CSS attributes) and a border. |
| Thumbnail (Thumb) | [] [![Image thumbnail MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-9-thumb-frame-border.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-9-thumb-frame-border.gif) Shows a small icon at the bottom of the image to allow the image to be enlarged. |
| Center | [] [![Center image MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-10-center.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-10-center.gif) Centers the image in the text. Words do not wrap on centered images.. |
| Float Left | [] [![Left align image MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-11-left.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-11-left.gif) Floats the image to the left allowing the text to wrap around the image. |
| Float Right | [] [![right align image MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-12-right.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-12-right.gif) Floats the image to the right allowing the text to wrap around the image. |
| Width | [] [![Image width MediaWiki](https://www.inmotionhosting.com/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-13-width.gif)](/support/wp-content/uploads/2013/01/edu_mediawiki_102_format-images_format-images-13-width.gif) Sets the width of the image. In this example, the width is set to 50 pixels. |