معاونت:تصویروں کا استعمال

آزاد دائرۃ المعارف، ویکیپیڈیا سے
:چھلانگ بطرف رہنمائی، تلاش

اس مضمون کا مقصد آپ کو یہ بتانا ہے کہ وِکی میں تصویریں کس طرح استعمال کی جاتی ہیں۔

توجہ: سرخ رنگ میں سطروں کا مقصد آپ کو صرف یہ بتانا ہے کہ دورانِ استعمال تصاویر کیسی ظاہر ہوسکتی ہیں.



سادہ تصویر کا استعمال[ترمیم]

وکیپیڈیا میں اس سطر سے آپ تصاویر سادہ طریقے سے شامل کرسکتے ہیں:

[[Image:Wikipedesketch1.png]]

اس طرح سے استعمال کردہ تصاویر اپنی اصل جسامت میں ہی ظاہر ہونگی۔ اور ان کی صفحے میں ظاہر ہونے کی جگہ مختلف ہو سکتی ہے۔

مثال:


ظہیرالدین محمد بابُر با لشکری جرار متشکل از ترک و تاتار و افغان بہ ہندوستان حملہ برد . در سال ۱۵۲۶ میلادی مطابق با ۹۳۲ ھ‍.ق. ابراہیم لودی آخرین پادشاہ طایفہ لودیہ (افغان) را کہ در دہلی سلطنت می‌کرد مغلوب ساخت و بدين طريق امپراتوری بزرگ گورکانیان ہند معروف بہ «امپراتوری مغولی ہند» را تأسيس كرد و اعقاب او حدود ۳۵۰ سال بر سراسر یا بخش‌ہایی از شبہ قارہ ہند فرمانروائی داشتند

او پس از فتح پانی پات کہ در آن سلطان ابراہیم لودی پادشاہ دہلی را شکست فاحش داد در 20 آوريل 1526 م. اگرا و دہلی و شمال ہندوستان را از رود سند تا بنگال بہ‌تصرف درآورد. اين قسمت سوم کہ کوتاہ ترين بخش زندگی اوست. او پنج سال در دہلی حکمرانی نمود تا مرگش فرا رسید Wikipedesketch1.png


ظہیرالدین محمد بابُر با لشکری جرار متشکل از ترک و تاتار و افغان بہ ہندوستان حملہ برد . در سال ۱۵۲۶ میلادی مطابق با ۹۳۲ ھ‍.ق. ابراہیم لودی آخرین پادشاہ طایفہ لودیہ (افغان) را کہ در دہلی سلطنت می‌کرد مغلوب ساخت و بدين طريق امپراتوری بزرگ گورکانیان ہند معروف بہ «امپراتوری مغولی ہند» را تأسيس كرد و اعقاب او حدود ۳۵۰ سال بر سراسر یا بخش‌ہایی از شبہ قارہ ہند فرمانروائی داشتند

او پس از فتح پانی پات کہ در آن سلطان ابراہیم لودی پادشاہ دہلی را شکست فاحش داد در 20 آوريل 1526 م. اگرا و دہلی و شمال ہندوستان را از رود سند تا بنگال بہ‌تصرف درآورد. اين قسمت سوم کہ کوتاہ ترين بخش زندگی اوست. او پنج سال در دہلی حکمرانی نمود تا مرگش فرا رسید

جگہ متعین کرنا[ترمیم]

اگر ہم تصویر کی سمت متعین کرنا چاہتے ہیں تو اس کا مندرجہ ذیل طریقہ ہے۔


مثال نمبر 1: بائیں سمت، تیرتی ہوئی[ترمیم]

[[Image:Wikipedesketch1.png|left]]
Wikipedesketch1.png

محمد بابر در چہار دہم فوریہ ۱۴۸۳ میلادی مطابق با ششم محرم ۸۸۸ ھ‍.ق. در ناحیہ فرغانہ (حوالی مرزہای شمالی افغانستان امروزی) متولد شد. [۱] [۲] نسبش از جانب پدر بہ واسطہ پنج امیر بہ تیمور و از سوی مادر، قتلغ نگار خانم، بہ پانزدہ واسطہ بہ چنگیز خان می‏رسد.

وی در سال ۸۹۹ ھ‍.ق. در یازدہ سالگی پس از فوت پدرش عمر شیخ وارث حکومت فرغانہ گرديد. او در اندجان حکومت می‌کرد و بر سر حکومت سمرقند با سلطانعلی میرزا پسرعمش کہ در آنجا جلوس کردہ بود اختلاف داشت. [۳] قسمت اول عمر بابر در ناحيہ کوچک فرغانہ بسر آمد. تا پس از آن بہ ‌واسطہ ہجوم شيبانی خان اوزبک درسال 1504 م. از آنجا بيرون راندہ شد. محمد بابر مدت ۱۱ سال با فرمانروایان ازبک و تاتار جنگید و چون ضعف خود را احساس نمود رو بہ کابل و قندھار آورد و پس از تسخیر خراسان ۲۲ سال در آنجا فرمانفرمائی كرد. بہ این ترتیب دورہ دوم عمرش را از 1504 م. تا 1525 م. در افغانستان و بدخشان حکومت کرد و بہ فکر تسخیر ہندوستان افتاد. [۴]

ظہیرالدین محمد بابُر با لشکری جرار متشکل از ترک و تاتار و افغان بہ ہندوستان حملہ برد . در سال ۱۵۲۶ میلادی مطابق با ۹۳۲ ھ‍.ق. ابراہیم لودی آخرین پادشاہ طایفہ لودیہ (افغان) را کہ در دہلی سلطنت می‌کرد مغلوب ساخت و بدين طريق امپراتوری بزرگ گورکانیان ہند معروف بہ «امپراتوری مغولی ہند» را تأسيس كرد و اعقاب او حدود ۳۵۰ سال بر سراسر یا بخش‌ہایی از شبہ قارہ ہند فرمانروائی داشتند.[۵]

او پس از فتح پانی پات کہ در آن سلطان ابراہیم لودی پادشاہ دہلی را شکست فاحش داد در 20 آوريل 1526 م. اگرا و دہلی و شمال ہندوستان را از رود سند تا بنگال بہ‌تصرف درآورد. اين قسمت سوم کہ کوتاہ ترين بخش زندگی اوست. او پنج سال در دہلی حکمرانی نمود تا مرگش فرا رسید.[۶]

مثال نمبر 2: دائیں سمت، تیرتی ہوئی، نام کے ساتھ[ترمیم]

عمدہ طریقہ یہ ہے کہ اگر آپ اس طرح سے تصاویر کو استعمال کرنا چاہتے ہیں تو ان کو پیراگراف کے ابتدا میں استعمال کریں۔

[[Image:Wikipedesketch1.png|frame|right|کچھ نام رکھ دیں]]
کچھ نام رکھ دیں

محمد بابر در چہار دہم فوریہ ۱۴۸۳ میلادی مطابق با ششم محرم ۸۸۸ ھ‍.ق. در ناحیہ فرغانہ (حوالی مرزہای شمالی افغانستان امروزی) متولد شد. [۱] [۲] نسبش از جانب پدر بہ واسطہ پنج امیر بہ تیمور و از سوی مادر، قتلغ نگار خانم، بہ پانزدہ واسطہ بہ چنگیز خان می‏رسد.

وی در سال ۸۹۹ ھ‍.ق. در یازدہ سالگی پس از فوت پدرش عمر شیخ وارث حکومت فرغانہ گرديد. او در اندجان حکومت می‌کرد و بر سر حکومت سمرقند با سلطانعلی میرزا پسرعمش کہ در آنجا جلوس کردہ بود اختلاف داشت. [۳] قسمت اول عمر بابر در ناحيہ کوچک فرغانہ بسر آمد. تا پس از آن بہ ‌واسطہ ہجوم شيبانی خان اوزبک درسال 1504 م. از آنجا بيرون راندہ شد. محمد بابر مدت ۱۱ سال با فرمانروایان ازبک و تاتار جنگید و چون ضعف خود را احساس نمود رو بہ کابل و قندھار آورد و پس از تسخیر خراسان ۲۲ سال در آنجا فرمانفرمائی كرد. بہ این ترتیب دورہ دوم عمرش را از 1504 م. تا 1525 م. در افغانستان و بدخشان حکومت کرد و بہ فکر تسخیر ہندوستان افتاد. [۴]

ظہیرالدین محمد بابُر با لشکری جرار متشکل از ترک و تاتار و افغان بہ ہندوستان حملہ برد . در سال ۱۵۲۶ میلادی مطابق با ۹۳۲ ھ‍.ق. ابراہیم لودی آخرین پادشاہ طایفہ لودیہ (افغان) را کہ در دہلی سلطنت می‌کرد مغلوب ساخت و بدين طريق امپراتوری بزرگ گورکانیان ہند معروف بہ «امپراتوری مغولی ہند» را تأسيس كرد و اعقاب او حدود ۳۵۰ سال بر سراسر یا بخش‌ہایی از شبہ قارہ ہند فرمانروائی داشتند.[۵]

او پس از فتح پانی پات کہ در آن سلطان ابراہیم لودی پادشاہ دہلی را شکست فاحش داد در 20 آوريل 1526 م. اگرا و دہلی و شمال ہندوستان را از رود سند تا بنگال بہ‌تصرف درآورد. اين قسمت سوم کہ کوتاہ ترين بخش زندگی اوست. او پنج سال در دہلی حکمرانی نمود تا مرگش فرا رسید.[۶]

مثال نمبر 3: نہ تیرنے کی شرط کے ساتھ[ترمیم]

[[Image:Wikipedesketch1.png|none]]


ظہیرالدین محمد بابُر با لشکری جرار متشکل از ترک و تاتار و افغان بہ ہندوستان حملہ برد . در سال ۱۵۲۶ میلادی مطابق با ۹۳۲ ھ‍.ق. ابراہیم لودی آخرین پادشاہ طایفہ لودیہ (افغان) را کہ در دہلی سلطنت می‌کرد مغلوب ساخت و بدين طريق امپراتوری بزرگ گورکانیان ہند معروف بہ «امپراتوری مغولی ہند» را تأسيس كرد و اعقاب او حدود ۳۵۰ سال بر سراسر یا بخش‌ہایی از شبہ قارہ ہند فرمانروائی داشتند

او پس از فتح پانی پات کہ در آن سلطان ابراہیم لودی پادشاہ دہلی را شکست فاحش داد در 20 آوريل 1526 م. اگرا و دہلی و شمال ہندوستان را از رود سند تا بنگال بہ‌تصرف درآورد. اين قسمت سوم کہ کوتاہ ترين بخش زندگی اوست. او پنج سال در دہلی حکمرانی نمود تا مرگش فرا رسید

Wikipedesketch1.png


ظہیرالدین محمد بابُر با لشکری جرار متشکل از ترک و تاتار و افغان بہ ہندوستان حملہ برد . در سال ۱۵۲۶ میلادی مطابق با ۹۳۲ ھ‍.ق. ابراہیم لودی آخرین پادشاہ طایفہ لودیہ (افغان) را کہ در دہلی سلطنت می‌کرد مغلوب ساخت و بدين طريق امپراتوری بزرگ گورکانیان ہند معروف بہ «امپراتوری مغولی ہند» را تأسيس كرد و اعقاب او حدود ۳۵۰ سال بر سراسر یا بخش‌ہایی از شبہ قارہ ہند فرمانروائی داشتند

او پس از فتح پانی پات کہ در آن سلطان ابراہیم لودی پادشاہ دہلی را شکست فاحش داد در 20 آوريل 1526 م. اگرا و دہلی و شمال ہندوستان را از رود سند تا بنگال بہ‌تصرف درآورد. اين قسمت سوم کہ کوتاہ ترين بخش زندگی اوست. او پنج سال در دہلی حکمرانی نمود تا مرگش فرا رسید

فریم بنانا اور اس میں نام ڈالنا[ترمیم]

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"

[[Image:Wikipedesketch1.png|frame|This picture was Stevertigo's entry
 in the Wikipedia mascot contest]]

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

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.

This picture was Stevertigo's entry in the Wikipedia mascot contest

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.

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.

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.

Thumbnailing[ترمیم]

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 منصوبہ: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 خاص: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:Wikipedesketch1.png|thumb|The Wikipedia logo]]
The Wikipedia logo

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.

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.

Resizing[ترمیم]

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 pixels wide:

[[Image:Wikipedesketch1.png|100px]]

Wikipedesketch1.png

In typical graphical browsers, this image shows no hint when the user moves the mouse over the image; in text browsers, something like '100px-Wikipedesketch1.png' might appear instead of the image, or nothing at all, depending on settings. We should be able to improve on this by specifying alternative text, as follows:

[[Image:Wikipedesketch1.png|100px|Proposed Wikipedia mascotte]]

Proposed Wikipedia mascotte

Let's say we want it 500 pixels wide:

[[Image:Wikipedesketch1.png|500px|Proposed Wikipedia mascotte]]

Proposed Wikipedia mascotte

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.

Also, notice that the picture is distorted. This is because we told it to be 500 pixels wide, which is wider than the picture actually is. So the renderer had to stretch it. Never ever do this in an article.

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:

[[Image:Wikipedesketch1.png|thumb|100px|right|The Wikipedia logo]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis dapibus dictum purus. Cras nibh. Vivamus ante nunc, ultricies ut, fermentum at, luctus ac, felis. Suspendisse ac diam. Suspendisse lacinia congue mauris.

The Wikipedia logo

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.

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.

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.

The Wikipedia logo

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.

The flag of Scotland


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:

  <div style="float:right;width:315px;">
  [[image:Wikipedesketch1.png|none|thumb|300px|Wikipedia logo]]

  [[image:Flag of Scotland.svg|none|thumb|200px|The flag of Scotland]]
  </div>
Wikipedia logo


The flag of Scotland

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:

Wikipedia logo
Wikipedia logo

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 table markup:

{|
|-
| [[image:Wikipedesketch1.png|none|thumb|300px|Wikipedia logo]]
| [[image:Wikipedesketch1.png|none|thumb|300px|Wikipedia logo]] 
|}

An alternative, that avoids being too wide, is to align both left and allow them to stack up if possible:

Wikipedia logo
Wikipedia logo


[[image:Wikipedesketch1.png|left|thumb|300px|Wikipedia logo]]
[[image:Wikipedesketch1.png|left|thumb|300px|Wikipedia logo]] 
<br style="clear:both;">

It will be necessary to include the line

<br style="clear:both;">

in order to prevent subsequent 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.

The Wikipedia logo
The flag of Scotland

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. (see Wiki markup and CSS below for details on clear:left or clear:right)

   <br style="clear:both;">
The Wikipedia logo

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. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.

The flag of Scotland

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. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.

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.


[[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo 1]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo 2]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo 3]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo 4]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo 5]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo 6]]
<br style="clear: left"/>

Advantages: Adapts to screen width by wrapping, simple markup.

The Wikipedia logo 1
The Wikipedia logo 2
The Wikipedia logo 3
The Wikipedia logo 4
The Wikipedia logo 5
The Wikipedia logo 6


New MediaWiki <gallery> tag[ترمیم]

The new MediaWiki software has support for a <gallery> tag, which vastly simplifies making image galleries in pages:


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

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), will not display images with certain aspect-ratios.

Templates[ترمیم]

Another method which may become possible in the future makes use of the {{gallery}} template. Its syntax is:

سانچہ:Template2
سانچہ:Template

The following alternative syntax allows image widths to be specified (as ###px). This may be merged with {{gallery}} if conditional parameters are implemented.

سانچہ:Template2
سانچہ:Template

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.

center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 
center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 
center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 
center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 
center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 
center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 
center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 
center|border|180x180px|alt=|The Wikipedia logo
The Wikipedia logo 

سانچہ: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.

[[Media:Wikipedesketch1.png]]

زریعہ: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|This is the wikipedia logo]]

This is the wikipedia logo

This can be awkward if the image is quite large, for the full size image will be displayed. The following method avoids this problem.

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|This links directly to the logo's image page]]

This links directly to the logo's image page

When the link is clicked the image will be displayed with other text information at a reasonable size, while the user can click through the medium-sized image to get to the full size highest resolution image.

Using the HTML <table> tag[ترمیم]

If you use HTML, you can arrange your text and Images using the standard <table> tag.

<table>
  <tr>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
    </td>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
  </td>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
    </td>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
    </td>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
    </td>
  </tr>
  <tr>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
    </td>
    <td>Here is a text article.  Lorem ipsum dolor sit amet,......
    </td>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
    </td>
    <td>Here is '''another''' text article.  Lorem ipsum.....
    </td>
    <td>[[image:Wikipedesketch1.png|thumb|Wikipedia logo]]
    </td>
  </tr>
</table>



Wikipedia logo
Wikipedia logo
Wikipedia logo
Wikipedia logo
Wikipedia logo
Wikipedia logo
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.
Wikipedia logo
Here is another 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.
Wikipedia logo

See also[ترمیم]