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:

[[File:filename.extension|options|caption]]

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

[[File:filename.extension|width|frame|border|caption]]

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)
[[File:Example.jpg|caption|link=MediaWiki]]

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
(External)
[[File:Example.jpg|caption|link=http://www.wikipedia.org]]

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 http://www.wikipedia.org when clicked.
No Image linking
[[File:Wiki.png|50px|link=]]

You can disable a hyper link to another website within an image with this code.
Caption
[[File:Example.gif|caption]]

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
caption
[[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.
Border
[[File:Example.gif|border|caption]]

Image with border MediaWikiThis places a thin border around the images.
Frame
[[File:Example.gif|frame|caption]]

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.
Frameless
[[File:Example.gif|frameless|caption]]

Remove frame immage MediaWikiThis removes the "div" code with CSS attributes from the images allowing only the image code to show.
Frameless Border
[[File:Example.gif|frameless|border|caption]]

Image frameless border MediaWikiDisplays the image with no frame (no "div" code with CSS attributes) and a border.
Thumbnail
(Thumb)
[[File:Example.gif|thumb|caption]]

Image thumbnail MediaWikiShows a small icon at the bottom of the image to allow the image to be enlarged.
Center
[[File:Example.gif|center|caption]]

Center image MediaWikiCenters the image in the text. Words do not wrap on centered images..
Float Left
[[File:Example.gif|left|caption]]

Left align image MediaWikiFloats the image to the left allowing the text to wrap around the image.
Float Right
[[File:Example.gif|right|caption]]

right align image MediaWikiFloats the image to the right allowing the text to wrap around the image.
Width
[[File:Example.gif|50px|caption]]

Image width MediaWikiSets the width of the image. In this example, the width is set to 50 pixels.
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

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

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

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

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

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: support@InMotionHosting.com
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!