[[Category:Wiki]]
''This tutorial has been copied from [http://en.wikipedia.org/wiki/Wikipedia:Picture_tutorial Wikipedia] and has not yet been fully adjusted to the CPCWiki''
This is a tutorial on how to insert pictures in CPCWiki articles using Wikiformat. There is also a [http://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax|shorter technical document describing the syntax]].<!-- please don't put a newline here; it will make a huge ugly space!!! --->
For the purposes of this tutorial, all examples will use the Amstrad series collage as the picture.
"Dummy" text, known as [[Lorem Ipsum]], used only to show the effect of mixing pictures with running text, is rendered in <span style="color:#996633">a different color</span>.
<br>
Asterisks are used in the text to show the ''edit location'' of the image tag.
==Uploading==
To upload a picture (or other file), click the '''Upload File''' button, found in the frame menu, on the left side of the screen.
==Plain picture==
==Framing, adding a caption==
It's usual to include a caption to describe the image and give credit as necessary. This means that the image will need a "frame"
'''<nowiki>[[Image:Cpcserieb.jpg|frame|This picture was Stevertigo's entry in shows the Wikipedia mascot contestfull CPC series]]</nowiki>'''
'''However''': Use 'thumb' instead of 'frame' if you want to have a caption ''and'' resize the picture. (See '''''Combining different options''''' section below for example.)
<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla risus massa, luctus sed, sagittis ac, dapibus eu, pede. Suspendisse convallis ligula ac lorem. Quisque luctus. Mauris ut purus a libero semper sollicitudin. Integer dapibus, velit sit amet rhoncus aliquam, pede ligula cursus ante, nec elementum erat dui et mauris. Nulla quam dolor, nonummy vel, varius fermentum, suscipit ut, sapien. Pellentesque suscipit felis ac nibh. Nunc luctus hendrerit eros. Phasellus lacus. Donec non leo in sem consequat pulvinar. Curabitur ut magna vitae lectus tristique ultrices. Phasellus venenatis neque vulputate leo. Mauris quis eros.</span>
[[Image:Cpcserieb.jpg|frame|This picture was Stevertigo's entry in shows the Wikipedia mascot contestfull CPC series]]
<span style="color:#996633">*Vestibulum nonummy. Nulla facilisis sapien dignissim risus. Quisque arcu urna, aliquam ac, facilisis ac, egestas non, est. Quisque neque. Donec et mi. Phasellus consequat. Integer pellentesque consectetuer lectus. Etiam malesuada eros id nibh. Fusce in tellus vitae mi auctor tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae metus.</span>
<span style="color:#996633">Etiam varius tempus odio. Cras bibendum arcu nec dolor. Donec consectetuer. Cras nonummy orci eget felis. Nullam sagittis venenatis libero. Duis neque purus, suscipit volutpat, molestie ut, venenatis ut, mi. Morbi nec eros. Praesent sollicitudin, nisl eget vehicula varius, tortor magna eleifend massa, ac iaculis turpis lacus quis nisl. Cras ut diam. Nullam erat ante, dignissim ac, posuere nec, commodo nec, nisl. Aenean adipiscing sodales augue. Donec rutrum. Ut nisl. Duis nisl. Ut elit. Vivamus suscipit rutrum tortor. Sed id pede. Praesent eros nulla, tempor vel, faucibus sed, mattis at, lectus. Sed euismod. Curabitur et leo vitae purus accumsan posuere.</span>
<span style="color:#996633">Donec tempor nulla in turpis. Nam rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam vel turpis vel risus fermentum posuere. In porta augue quis dui. Integer risus justo, venenatis ut, dapibus in, tempor sed, risus. In tincidunt rhoncus urna. Mauris placerat, tortor et malesuada congue, velit urna elementum urna, vel ornare est tellus vel nunc. Ut et risus. Integer in lorem. Ut in lectus ac arcu pretium rutrum. Phasellus imperdiet pede ut arcu. Sed ac massa. Donec id leo. Etiam ante odio, nonummy ac, elementum sit amet, suscipit eget, dolor. Nam id felis in quam ullamcorper sodales.</span>
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.
A thumbnail adds a gray border around a picture and lets you add a caption, like 'frame' above. See [[http://en.wikipedia.org/wiki/Wikipedia:Captions]Captions] for caption writing tips.
But 'thumb' also '''automatically resizes''' a large picture into a smaller display size, with an '''option for the user to click''' on the image and see the original large version. Because different people work to different screen resolutions, your preferred size of thumbnails can be set in [[special:preferences]] under "files". The default, which is also used for logged-out users is 180 [[pixels]] (px), but you can choose between 120px, 150px, 180px, 200px, 250px, and 300px sizes. If an image is smaller than the thumbnail size you specified then it is displayed at 100% resolution, i.e. its natural width. Generally speaking, thumbnails are the best way to display images.
'''Image:Cpcserieb.jpg|thumb|The Amstrad Series]]'''
Although thumbnails are preferred, you may nevertheless want to display an image at a particular size. Starting without a thumbnail:
(Remember: Using a frame forces the picture to its original size, and overrides the use of the pixel width argument.) For example, let's say we want it to be 100 [[pixel]]s pixels wide:
'''<nowiki>[[Image:Cpcserieb.jpg|100px]]</nowiki>'''
[[Image:Cpcserieb.jpg|100px]]
In typical graphical browsers, this image shows no hint when the user moves the mouse over the image; in text browsers, something like '100px-Cpcserieb.jpg' might appear instead of the image, or nothing at all, depending on settings. We should be able to improve on this by specifying [[http://en.wikipedia.org/wiki/Wikipedia:Alternative text for images|Alternative_text_for_images alternative text]], as follows:
'''<nowiki>[[Image:Cpcserieb.jpg|100px|Proposed Wikipedia mascotAmstrad CPC series]]</nowiki>'''[[Image:Cpcserieb.jpg|100px|Proposed Wikipedia mascotAmstrad CPC series]]
Let's say we want it 500 pixels wide:
'''<nowiki>[[Image:Cpcserieb.jpg|500px|Proposed Wikipedia mascotAmstrad CPC series]]</nowiki>'''[[Image:Cpcserieb.jpg|500px|Proposed Wikipedia mascotAmstrad CPC series]]
In general, overly large pictures should not be put into articles. Most pictures are between 100 and 400 pixels wide. Generally, pictures should not be wider than that.
<span style="color:#996633">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Donec varius egestas tortor. Curabitur augue leo, ullamcorper ac, tempus sed, gravida quis, felis.
Curabitur pretium malesuada dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur et urna. Cras lacus. Donec risus. Proin ornare eros ac nibh.
In venenatis erat sit amet mauris. Morbi sem felis, tempus eget, aliquam id, imperdiet id, elit. Vestibulum turpis. Etiam ornare, nisl ac varius fermentum, tortor elit laoreet tellus, ut interdum massa eros eget urna. Nunc congue nisl quis orci. Nunc nibh. Integer iaculis, ante sed fringilla tempus, enim augue gravida nibh, vehicula congue arcu tortor ac ligula. In eget libero vel magna varius viverra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse elementum.</span>
<span style="color:#996633">Mauris arcu magna, ultrices a, tristique facilisis, facilisis id, massa. Quisque in arcu. Praesent auctor mauris sit amet leo. Proin facilisis viverra tellus. Morbi at purus. Nam dictum. Donec ac neque. Integer sapien wisi, lacinia nec, tincidunt in, lacinia sit amet, ante. Quisque in urna. Donec rutrum.</span>
<span style="color:#996633">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.</span>
[[image:Flag of Scotland.svg|right|thumb|200px|The flag of Scotland]]
'''<nowiki><br style="clear:both;"></nowiki>'''
<br style="clear:both;">
It's also possible to have two adjacent images of different sizes cause [[word wrap]]ping problems; separating them in the markup seems to solve this; compare [http://en.wikipedia.org/w/index.php?title=Reddit&oldid=80478492] with [http://en.wikipedia.org/w/index.php?title=Reddit&oldid=84098604].
</div>
</pre>
*You may also use the template <nowiki>{{</nowiki>[[:Template:ImageStackRight|ImageStackRight]]<nowiki>}}</nowiki>, which has this code built-in. See the [[Template talk:ImageStackRight|template talk page]] for instructions.
<div style="float:right;width:315px;">
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|table markup]]:
<pre>
{|
=== 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.
<pre>
Image:Cpcserieb.jpg|The mascot of Wikipedia
</gallery>
====Templates (a future development)====
Another method which may become possible in the future makes use of the [[Template:Gallery|<code><nowiki>{{gallery}}</nowiki></code> template]]. Its syntax is:
:{{tlp|gallery|filename|description}}
:{{tl|gallery end}}
The following alternative syntax allows image widths to be specified (as <code>###px</code>). This may be merged with <code><nowiki>{{gallery}}</nowiki></code> if [http://meta.wikimedia.org/wiki/Extended_template_syntax#Inserting_multiple_elements:_the_.22for_each.22_construct conditional parameters] are implemented.
:{{tlp|gallerypx|filename|description|width}}
:{{tl|gallery end}}
''Advantages:'' Adapts to screen width with wrapping, simpler markup, no [[HTML]], no visible CSS.
''Disadvantages:'' Puts scroll bars and other nasties in some browsers. Can't specify image size.
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery|Cpcserieb.jpg|The Amstrad Series}}
{{gallery end}}
==Linking to pictures without displaying them==
Let's say you want to link to the picture without displaying it. There are two ways to do it.
'''<nowiki>[[Media:C:\Documents and Settings\murali_p\My Documents\My PicturesCpcserieb.jpg]]</nowiki>'''
[[Media:Cpcserieb.jpg]]
<td>[[image:Cpcserieb.jpg|thumb|120px|Amstrad Series]]
</td>
<td>Here is a text article. <span style="color:#996633">Here is a text article. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.</span>
</td>
<td>[[image:Cpcserieb.jpg|thumb|120px|Amstrad Series]]
</td>
<td><span style="color:#996633">Here is '''another''' text article. <span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.</span>
</td>
</tr>
</table>