
This is a tutorial on how to insert pictures in Wikipedia articles using Wikiformat. There is also a Wikipedia:Extended image syntax. If you need help uploading an image, or selecting a suitable image for an article, you should also read our wikipedia:image use policy. Note that before you add an image to an article, you should edit the Wikipedia:Image description page to explain the source of the image and make sure the Wikipedia:Copyrights of the image is clearly stated. It is preferred that you use one of the Wikipedia:Image copyright tags, as appropriate. For the purposes of this article, all examples will be done using Stevertigo's Wikipedia logo. ==Plain picture== :A plain picture with no formatting can be inserted with the statement:
===Example 2 - Right align, float, with caption=== You'll usually put these at the start of a paragraph so the image floats to the right of the paragraph - it's common to see these at the start of an article.
===Example 3 - Left align, float===
===Example 4 - Don't float===
==Resizing== Let's say that picture is too big. Let's say we want the user to get a smaller version (a "thumbnail") when he/she looks at the article. Thumbnails always include a frame, so when thumbnailing, you almost always want to specify a caption. Wikiformat supports auto-resizing; that is, our contributors upload a picture of one size, and that picture gets automatically resized when a viewer looks at an article. For example, let's say we want it to be 100 pixels wide:
==Combining different options== Ok, all this so far as has been cool, but it's not really useful unless you combine it all. Let's say we have a picture that we want floating, right aligned, thumbnailed, resized to 100 pixels, and with a caption. You can combine all of the above. Order does not matter, except that the picture name must come first and the caption must come last:
==Avoiding image "stackups"== One of the problems many users of floating images hit is that multiple images sometimes "stack up" horizontally, particularly with large screens and wide images. The ''best'' solution to this is simply to add more text, but this sometimes isn't possible. This section shows some solutions to this problem.
=== Co-aligning like images=== It's very common to have two very similar images that logically should be grouped together. To achieve this, it's currently necessary to use some html markup:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tellus neque, bibendum ac, accumsan eget, vestibulum a, nibh. Sed viverra urna non massa. Etiam vehicula ligula vitae nibh. Phasellus tempus auctor wisi. In consequat. Cras vel neque. Donec leo dolor, lobortis luctus, volutpat vitae, vestibulum in, eros. Maecenas porttitor, erat ullamcorper tempus faucibus, odio arcu venenatis nisl, ut cursus odio felis sed urna. Nullam ut elit vel est eleifend egestas. Ut dictum orci eu mi. Cras ultricies. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Nam turpis. Nunc in enim non turpis facilisis commodo. Suspendisse potenti. Maecenas elementum auctor odio. Vivamus vitae ante. Phasellus quis tortor et quam auctor convallis. Proin elit velit, nonummy a, semper hendrerit, dignissim quis, erat. Maecenas eleifend enim eu tortor. Curabitur non odio. Maecenas neque erat, venenatis sed, sollicitudin ut, iaculis non, mi. Praesent tempor, risus eget pellentesque tincidunt, dolor nibh imperdiet nulla, nec mattis leo ligula vel pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Integer nec libero. Nulla facilisi. Vivamus quis purus. Ut sem justo, lobortis at, luctus nec, aliquam nec, orci. Aenean nonummy. In metus. Sed malesuada vestibulum purus. Phasellus at odio. Integer in massa vitae quam euismod viverra. Integer nulla orci, ornare non, consequat non, mollis ornare, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam id sapien ut sapien fermentum pretium. Cras mattis. Nam rhoncus. Maecenas dolor neque, tempor vel, iaculis nec, posuere vel, leo. Sed quis dolor. Vivamus mattis tellus elementum magna semper ullamcorper.
It is also often useful to horizontally align two images: {| |- | || |} However, this should be used sparingly, as it can cause the images to protrude off the right of the page for people with narrow browser windows. This is done using Wikipedia:How to use tables:
===Forcing a break=== As a final resort, you can force the browser to insert a break, making all text and images appear below the bottom of the first image. This can produce rather unattractive gaps, particularly in the accompanying text. Remember that text will flow and wrap differently for other users, based on their chosen browser, screen resolution, default font size, accessibility options, number of toolbars and sidebars (such as instant messaging panes) and more -- don't force page design just so that it looks pretty on ''your'' machine. Hack only where absolutely necessary. Wherever possible, just use the simplest logical page flow.
=== Photo gallery === ====Wiki markup and CSS==== To display a series of photos in a gallery, there is a simple method using wiki markup and Cascading Style Sheets: Float all images in the gallery to the left, and clear their left float at the end to avoid having the images run into following content.
====New MediaWiki ''
Image:Wikipedesketch1.png|The Wikipedia logo
Image:Wikipedesketch1.png|A Wikipedia logo
Image:Wikipedesketch1.png|Wikipedia logo
Image:Wikipedesketch1.png|Wikipedia's logo
Image:Wikipedesketch1.png|A logo for Wikipedia
Image:Wikipedesketch1.png|One logo for Wikipedia
Image:Wikipedesketch1.png|Wikipedia has logo
Image:Wikipedesketch1.png|The logo of Wikipedia
====Templates====
Another method which may become possible in the future makes use of the Template:Gallery. Its syntax is:
:
:
The following alternative syntax allows image widths to be specified (as Media:Wikipedesketch1.png
Media:Wikipedesketch1.png
Notice that it says "media" instead of "image". When the user clicks on the link, the browser goes directly to the image. Also, notice that you can change the text so it says anything you want.
Media:Wikipedesketch1.png
Media:Wikipedesketch1.png
Now let's say that instead of taking the viewer directly to the picture, you want to take them to the image page (where it tells them who uploaded it, when, what the copyright status is, etc). You can do that with:
:Image:Wikipedesketch1.png
:Image:Wikipedesketch1.png
The only difference between this picture and the very first picture in this tutorial is that I put a colon before "image".
As above, I can make the link say anything I want.
''':Image:Wikipedesketch1.png '''
:Image:Wikipedesketch1.png
==See also==
*m:Help:Images and other uploaded files.
*Wikipedia:Graphics tutorials -- how to make your own pictures.
Wikipedia image help
==Pages== Should this article be split into a multi-page tutorial as the Wikipedia:Tutorial is now? --User:Rj 07:17, Apr 2, 2004 (UTC) :(As the one who wrote the majority of this) No! It's not nearly long enough to merit a breakup, and that would only serve to create (yet more) documentation pages. There's already far, far too many of those as it is. Keep it as it is. If it gets *significantly* larger, than we can reconsider this. Furthermore, most of the later examples depend on earlier ones, in which case, I want them kept as closely together as possible. User:Raul654 07:20, Apr 2, 2004 (UTC) ==Styles== I've added a section on avoiding stackup problems. I use a slightly different style to Raul's, one I think makes the article clearer. I'm using html PRE tags for example wikitext, and specifying an explicit (different) font for the example text (as I think it's hard to differentiate between the article's own didactic text and the that of the examples). Naturally the article should feature only one of the two ways of doing things, and I'm not especially attached to mine. I'll change one section or other to match its counterpart - which do y'all prefer? -- User:Finlay McWalter | User talk:Finlay McWalter 13:48, 26 Mar 2004 (UTC) : I like the co-align the best. --User:D8uv user_talk:d8uv 08:37, 2004 Mar 27 (UTC) : The first line of the PRE-text in the latter examples runs into the images! -- User:Tillwe 13:43, 27 Mar 2004 (UTC) ::(Sorry, forgot to say: on Netscape 7.x, 1024 pixels screenwidth, Win32 system) -- User:Tillwe :: I'm not seeing it. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040206 Firefox/0.8 (d8uv.com edition) -- User:D8uv user_talk:d8uv 21:14, 2004 Mar 27 (UTC) ------- "All work and no play makes jack a dull boy." We've got to stop working or what :) -- User:TakuyaMurata 05:46, Mar 28, 2004 (UTC) :If you weren't already aware, it's a reference to The Shining. User:Raul654 05:49, Mar 28, 2004 (UTC) ::No TV and no beer make Homer Simpson something, something... User:Dori | User talk:Dori 05:51, Mar 28, 2004 (UTC) ::Go crazy? Don't mind if I do. User:Raul654 05:52, Mar 28, 2004 (UTC) :Yes, I was aware of that movie. I really didn't know this hidden agenda. How scary really. -- User:TakuyaMurata 06:02, Mar 28, 2004 (UTC) ::[Um, it's a centuries-old proverb you know.] I've not seen that film, so that reference passed me by completely. :) User:Fabiform | User talk:Fabiform 08:36, 28 Mar 2004 (UTC) So it someone going to remove the "jack" graffiti or what? I'm new so I'm not sure how to do it. ---- is ist possible to include references in image captions? :If by 'refernces', you mean links to other articles - No. User:Raul654 22:12, Mar 31, 2004 (UTC) ::If by 'references', you mean links to other articles - Yes. As of Mediawiki 1.3 :-) - User:Omegatron 19:24, Jun 18, 2004 (UTC) :::Yes, *now* it is (notice, that question is 3 months old) ;) User:Raul654 19:30, Jun 18, 2004 (UTC) [[Image:Westminstpalace.jpg|right|thumbnail|This is the Palace of Westminster in London]] ==Archived from the village pump== I just had the opportunity to refer someone to the lovely Wikipedia:Picture_tutorial. Couple of questions, though-- *In my browser, at least, the example using div to put two images directly underneath each other has the text running underneath the uppermost image. Is it just me or is there something amiss with the markup? *Tutorial doesn't address having images without the thumb box around them but with having captions (as can be seen in Dog). Is the markup at Dog the approved markup for that sort of thing? And would it be nice to have such markup added to the tutorial? Thanks! User:Elf | User talk:Elf 20:56, 17 Jun 2004 (UTC) : Those thumbbox-less syntax are remnants of the old syntax, before this new one was in place. It's the same. I personally think we should change all old ones to the new syntax to avoid confusion. --User:Menchi 08:59, 18 Jun 2004 (UTC) :: I agree about changing the markup around images to conform to the new standards. It's just another case of Wikifying things. :: Is it a good idea not to specify a width for images (unless there's a good reason for doing so in a particular case, of course). If no width is given the thumbnails default to 250 pixels wide which is the recommended size anyway. If that recommendation changes in future, the default could be altered and all ''un''specified images would change to the new standard without the need to edit each one. What do others think? - User:Chrisjj 17:33, 18 Jun 2004 (UTC) ::: If this is the case, I was not aware of it, and I'll go back to the images I've created and remove the width specifications. This is, as you say, a good idea, for the reason you mentioned. - User:RealGrouchy 13:00, 20 Jun 2004 (UTC) == Picture tutorial torture == Here is the Deal: I am struggling with posting pictures, which I realize is my problem, and not yours. HOWEVER, I just printed off the 11 page Tutorial and it went fine until I tried to use it. That’s when I discovered that ALL the codes, tucked neatly into little boxes, did not print. All I got was the outline of the box. This does not seem right. User:Carptrash 19:15, 3 Aug 2004 (UTC) carptrash == Pictures or images? == It might be better to be consistent and call them "images". This makes it easier for new users looking for other tips on images, which are in articles with names containing "image" not "picture". User:Gracefool |User talk:gracefool 00:36, 1 Sep 2004 (UTC) == Image maps == Is it possible to add image maps (ie where you can add linked areas of an image?) :No. User:Raul654 18:14, Mar 5, 2005 (UTC) == Misleading tags == Not being a very experienced Wikipedia user, I believe some tags are different than stated in the surrounding text. For example, in the paragraph where
See other meanings of words starting from letter:
Words begining with Picture_tutorial:
Picture_tutorial
Picture_tutorial
Picture tutorial
This is a tutorial on how to insert pictures in Wikipedia articles using Wikiformat. There is also a Wikipedia:Extended image syntax. If you need help uploading an image, or selecting a suitable image for an article, you should also read our wikipedia:image use policy. Note that before you add an image to an article, you should edit the Wikipedia:Image description page to explain the source of the image and make sure the Wikipedia:Copyrights of the image is clearly stated. It is preferred that you use one of the Wikipedia:Image copyright tags, as appropriate. For the purposes of this article, all examples will be done using Stevertigo's Wikipedia logo. ==Plain picture== :A plain picture with no formatting can be inserted with the statement:
===Example 2 - Right align, float, with caption=== You'll usually put these at the start of a paragraph so the image floats to the right of the paragraph - it's common to see these at the start of an article.
===Example 3 - Left align, float===
===Example 4 - Don't float===
==Resizing== Let's say that picture is too big. Let's say we want the user to get a smaller version (a "thumbnail") when he/she looks at the article. Thumbnails always include a frame, so when thumbnailing, you almost always want to specify a caption. Wikiformat supports auto-resizing; that is, our contributors upload a picture of one size, and that picture gets automatically resized when a viewer looks at an article. For example, let's say we want it to be 100 pixels wide:
==Combining different options== Ok, all this so far as has been cool, but it's not really useful unless you combine it all. Let's say we have a picture that we want floating, right aligned, thumbnailed, resized to 100 pixels, and with a caption. You can combine all of the above. Order does not matter, except that the picture name must come first and the caption must come last:
==Avoiding image "stackups"== One of the problems many users of floating images hit is that multiple images sometimes "stack up" horizontally, particularly with large screens and wide images. The ''best'' solution to this is simply to add more text, but this sometimes isn't possible. This section shows some solutions to this problem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus. Nunc tristique risus pulvinar ante. Vivamus varius.
=== Co-aligning like images=== It's very common to have two very similar images that logically should be grouped together. To achieve this, it's currently necessary to use some html markup:
It is also often useful to horizontally align two images: {| |- | || |} However, this should be used sparingly, as it can cause the images to protrude off the right of the page for people with narrow browser windows. This is done using Wikipedia:How to use tables:
{|
|-
| ||
|}
An alternative, that avoids being too wide, is to align both left and rely on them to stack up:
It will be necessary to include the
in order to prevent following text from being placed alongside the images. ===Alternating left and right floats=== Perhaps the easiest way is to make floating images alternate left then right - this way they don't come into contact with one another, and so can't stack up in an unattractive way. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus. Nunc tristique risus pulvinar ante. Vivamus varius. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.
===Forcing a break=== As a final resort, you can force the browser to insert a break, making all text and images appear below the bottom of the first image. This can produce rather unattractive gaps, particularly in the accompanying text. Remember that text will flow and wrap differently for other users, based on their chosen browser, screen resolution, default font size, accessibility options, number of toolbars and sidebars (such as instant messaging panes) and more -- don't force page design just so that it looks pretty on ''your'' machine. Hack only where absolutely necessary. Wherever possible, just use the simplest logical page flow.
All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.
Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun.
=== Photo gallery === ====Wiki markup and CSS==== To display a series of photos in a gallery, there is a simple method using wiki markup and Cascading Style Sheets: Float all images in the gallery to the left, and clear their left float at the end to avoid having the images run into following content.
Advantages: Adapts to screen width by wrapping, simple markup.
====New MediaWiki ''
Advantages: Really simple markup. Probably will get more support as MediaWiki matures (hopefully?), no wasted space between images Disadvantages: Does not adapt to screen width by wrapping, can't specify image size (hopefully both will be fixed in the next version).Image:Wikipedesketch1.png|The Wikipedia logo Image:Wikipedesketch1.png|A Wikipedia logo Image:Wikipedesketch1.png|Wikipedia logo Image:Wikipedesketch1.png|Wikipedia's logo Image:Wikipedesketch1.png|A logo for Wikipedia Image:Wikipedesketch1.png|One logo for Wikipedia Image:Wikipedesketch1.png|Wikipedia has logo Image:Wikipedesketch1.png|The logo of Wikipedia
###px). This may be merged with 
Picture tutorial
==Pages== Should this article be split into a multi-page tutorial as the Wikipedia:Tutorial is now? --User:Rj 07:17, Apr 2, 2004 (UTC) :(As the one who wrote the majority of this) No! It's not nearly long enough to merit a breakup, and that would only serve to create (yet more) documentation pages. There's already far, far too many of those as it is. Keep it as it is. If it gets *significantly* larger, than we can reconsider this. Furthermore, most of the later examples depend on earlier ones, in which case, I want them kept as closely together as possible. User:Raul654 07:20, Apr 2, 2004 (UTC) ==Styles== I've added a section on avoiding stackup problems. I use a slightly different style to Raul's, one I think makes the article clearer. I'm using html PRE tags for example wikitext, and specifying an explicit (different) font for the example text (as I think it's hard to differentiate between the article's own didactic text and the that of the examples). Naturally the article should feature only one of the two ways of doing things, and I'm not especially attached to mine. I'll change one section or other to match its counterpart - which do y'all prefer? -- User:Finlay McWalter | User talk:Finlay McWalter 13:48, 26 Mar 2004 (UTC) : I like the co-align the best. --User:D8uv user_talk:d8uv 08:37, 2004 Mar 27 (UTC) : The first line of the PRE-text in the latter examples runs into the images! -- User:Tillwe 13:43, 27 Mar 2004 (UTC) ::(Sorry, forgot to say: on Netscape 7.x, 1024 pixels screenwidth, Win32 system) -- User:Tillwe :: I'm not seeing it. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040206 Firefox/0.8 (d8uv.com edition) -- User:D8uv user_talk:d8uv 21:14, 2004 Mar 27 (UTC) ------- "All work and no play makes jack a dull boy." We've got to stop working or what :) -- User:TakuyaMurata 05:46, Mar 28, 2004 (UTC) :If you weren't already aware, it's a reference to The Shining. User:Raul654 05:49, Mar 28, 2004 (UTC) ::No TV and no beer make Homer Simpson something, something... User:Dori | User talk:Dori 05:51, Mar 28, 2004 (UTC) ::Go crazy? Don't mind if I do. User:Raul654 05:52, Mar 28, 2004 (UTC) :Yes, I was aware of that movie. I really didn't know this hidden agenda. How scary really. -- User:TakuyaMurata 06:02, Mar 28, 2004 (UTC) ::[Um, it's a centuries-old proverb you know.] I've not seen that film, so that reference passed me by completely. :) User:Fabiform | User talk:Fabiform 08:36, 28 Mar 2004 (UTC) So it someone going to remove the "jack" graffiti or what? I'm new so I'm not sure how to do it. ---- is ist possible to include references in image captions? :If by 'refernces', you mean links to other articles - No. User:Raul654 22:12, Mar 31, 2004 (UTC) ::If by 'references', you mean links to other articles - Yes. As of Mediawiki 1.3 :-) - User:Omegatron 19:24, Jun 18, 2004 (UTC) :::Yes, *now* it is (notice, that question is 3 months old) ;) User:Raul654 19:30, Jun 18, 2004 (UTC) [[Image:Westminstpalace.jpg|right|thumbnail|This is the Palace of Westminster in London]] ==Archived from the village pump== I just had the opportunity to refer someone to the lovely Wikipedia:Picture_tutorial. Couple of questions, though-- *In my browser, at least, the example using div to put two images directly underneath each other has the text running underneath the uppermost image. Is it just me or is there something amiss with the markup? *Tutorial doesn't address having images without the thumb box around them but with having captions (as can be seen in Dog). Is the markup at Dog the approved markup for that sort of thing? And would it be nice to have such markup added to the tutorial? Thanks! User:Elf | User talk:Elf 20:56, 17 Jun 2004 (UTC) : Those thumbbox-less syntax are remnants of the old syntax, before this new one was in place. It's the same. I personally think we should change all old ones to the new syntax to avoid confusion. --User:Menchi 08:59, 18 Jun 2004 (UTC) :: I agree about changing the markup around images to conform to the new standards. It's just another case of Wikifying things. :: Is it a good idea not to specify a width for images (unless there's a good reason for doing so in a particular case, of course). If no width is given the thumbnails default to 250 pixels wide which is the recommended size anyway. If that recommendation changes in future, the default could be altered and all ''un''specified images would change to the new standard without the need to edit each one. What do others think? - User:Chrisjj 17:33, 18 Jun 2004 (UTC) ::: If this is the case, I was not aware of it, and I'll go back to the images I've created and remove the width specifications. This is, as you say, a good idea, for the reason you mentioned. - User:RealGrouchy 13:00, 20 Jun 2004 (UTC) == Picture tutorial torture == Here is the Deal: I am struggling with posting pictures, which I realize is my problem, and not yours. HOWEVER, I just printed off the 11 page Tutorial and it went fine until I tried to use it. That’s when I discovered that ALL the codes, tucked neatly into little boxes, did not print. All I got was the outline of the box. This does not seem right. User:Carptrash 19:15, 3 Aug 2004 (UTC) carptrash == Pictures or images? == It might be better to be consistent and call them "images". This makes it easier for new users looking for other tips on images, which are in articles with names containing "image" not "picture". User:Gracefool |User talk:gracefool 00:36, 1 Sep 2004 (UTC) == Image maps == Is it possible to add image maps (ie where you can add linked areas of an image?) :No. User:Raul654 18:14, Mar 5, 2005 (UTC) == Misleading tags == Not being a very experienced Wikipedia user, I believe some tags are different than stated in the surrounding text. For example, in the paragraph where
See other meanings of words starting from letter:
P
PA | PB | PC | PD | PE | PF | PG | PH | PI | PJ | PK | PL | PM | PN | PO | PR | PS | PT | PU | PW | PX | PY | PZ |Words begining with Picture_tutorial:
Picture_tutorial
Picture_tutorial
These materials are based on Wikipedia and licensed under the GNU FDL
YouTube.com videos better site than Turbo Tax 2007
