InMotion Hosting Support Center

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

Image Internal Link MediaWikiThis 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

Image External Link MediaWikiYou can create a hyper link to another website within an image with this code. In this example, the image will direct to when clicked.
No Image linking

You can disable a hyper link to another website within an image with this code.

Iimage caption MediaWikiThis 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
[[File:Example.jpg|<span title=""></span>]]

No Image caption MediaWikiSupplementing "|<span title=""></span>" for the  the "|caption" code out of the wiki code will remove the "alt" text from the image HTML.

Image with border MediaWikiThis places a thin border around the images.

Image frame border MediaWikiThe 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.

Remove frame immage MediaWikiThis removes the "div" code with CSS attributes from the images allowing only the image code to show.
Frameless Border

Image frameless border MediaWikiDisplays the image with no frame (no "div" code with CSS attributes) and a border.

Image thumbnail MediaWikiShows a small icon at the bottom of the image to allow the image to be enlarged.

Center image MediaWikiCenters the image in the text. Words do not wrap on centered images..
Float Left

Left align image MediaWikiFloats the image to the left allowing the text to wrap around the image.
Float Right

right align image MediaWikiFloats the image to the right allowing the text to wrap around the image.

Image width MediaWikiSets the width of the image. In this example, the width is set to 50 pixels.
Was this article helpful?
Continued Education in Course 102: Adding content to MediaWiki
You are viewing Section 9: Formatting images in MediaWiki
Section 8: How to insert images into MediaWiki
Section 10: Creating an Image Gallery in MediaWiki

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

n/a Points
2017-08-19 6:13 am


n/a Points
2016-10-07 1:43 am

I have a use this code but i am not seeing my image.

31,595 Points
2016-10-07 3:36 pm
Can you provide a link to the image, and site for us to test?

Thank you,
n/a Points
2016-05-04 6:39 pm

When I use thumb for format the image doesn't show only the name of my picture (for example: image.png)


I use this code:

42,946 Points
2016-05-04 10:08 pm

Note the provided code: [[File:Example.gif|thumb|caption]]. I'm not sure that the code you're using will work. Please try to use the code as provided in the tutorial above.

If you have any further questions, please let us know.

Kindest regards,
Arnel C.

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

5 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!