How To: Format Images in posts beautifully कैसे खूबसूरती के लिए: पदों में प्रारूप छवियाँ

ADVERTISEMENT विज्ञापन
To get our software and web/tips via email, sign up for हमारे सॉफ़्टवेयर और वेब ईमेल द्वारा / सुझाव हो, साइन अप करने के लिए daily email newsletter दैनिक ईमेल न्यूज़लेटर . .
Subscribe to RSS feed आरएसएस फ़ीड की सदस्यता लें or या follow me मुझे का पालन करें on Twitter? पर चहचहाना?

Images add scenic beauty to posts (unless you include really bad images). छवियाँ पदों के लिए नैसर्गिक सौंदर्य जोड़ें (जब तक आप वास्तव में बुरा चित्र शामिल हैं). Most bloggers advise you to include images at the at or around the beginning of your posts. ज्यादातर ब्लॉगर्स तुम पर छवियों को शामिल करने के लिए सलाह देने में या अपने पदों की शुरुआत के आसपास. And I am no different. और मैं अलग नहीं हूँ.

However, one thing that those advice does not contain is how to include images which blend well with the content, yet be noticeable by a reader. बहरहाल, एक बात है कि उन की सलाह नहीं रोकने कैसे तस्वीरें जो सामग्री के साथ अच्छी तरह से मिश्रण, एक पाठक ने अभी तक ध्यान देने योग्य होना शामिल करने के लिए है. Selecting the right image is important, but so is the way you place them. सही छवि का चयन महत्वपूर्ण है, लेकिन इतना तरह तुम उन्हें जगह है. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. फीके <img src="" /> टैग में बस अब और नहीं है के साथ एक छवि शामिल - वे ऐसा कर रहे हैं वेब 1.0/year 1998.

I prefer to use centered images, with the width slightly less than your post area width. मैं थोड़ा अपने पद क्षेत्र चौड़ाई से कम चौड़ाई के साथ केंद्रित छवियों का उपयोग करने के पसंद करते हैं. This example shows you how to center the image, and add caption. इस उदाहरण आप कैसे केंद्र छवि को दिखाता है, और कैप्शन जोड़ें.

What you need now is a sensible, easy way to format images, without spending the whole day on it. क्या अब आप की जरूरत है एक समझदार, स्वरूप छवियों के लिए आसान तरीका है, पर पूरे दिन खर्च किए बिना. This can be achieved by a combination of two things – a CSS styling rule to be added to your style.css , and some HTML code which you have to wrap around your image. इस दो चीजों का एक संयोजन है - एक सीएसएस स्टाइल शासन द्वारा प्राप्त किया जा सकता है अपने style.css में जोड़ा है, और हो कुछ HTML कोड है जो आप के आसपास आपकी छवि लपेट दिया है.

Note that this cannot be used for images previously added, without editing them. ध्यान दें कि इस चित्र के लिए उपयोग नहीं किया पहले उन्हें संपादन के बिना कहा, हो सकता है. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. कारण: समय सीएसएस स्टाइल शासन के सभी तत्वों को प्रभावित करता है, HTML मार्कअप को मैन्युअल रूप से एक छवि के आसपास जोड़ा जाना चाहिए.

Add this code to your style.css file, towards the end: अपने style.css फ़ाइल को इस कोड अंत में, जोड़ें:

div.ci { text-align: center; margin: 0; padding: 16px 0; padding: 0; border: none; }
div.ci small { font-size: .9em; line-height: 1.4em; color:#777; padding: 7px 0 0 0; }

ADVERTISEMENT विज्ञापन

The code above is the styling rules which help you to position the image. इसके बाद के संस्करण कोड स्टाइल नियमों जिससे आप छवि की स्थिति है. To apply the styling, we need to use HTML around the image tag. स्टाइल के लिए लागू है, हम चारों ओर HTML छवि टैग का प्रयोग की जरूरत है. The HTML code is as follows: HTML code के रूप में इस प्रकार है:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /><br />
<small>YOUR CAPTION</small></div>

In the code, replace URL_TO_IMAGE with the image URL, ALT TEXT with what you want to show when the image is not displayed, and YOUR CAPTION with the caption that you want. कोड में, छवि यूआरएल, ऑल्ट तुम क्या दिखा जब छवि प्रदर्शित नहीं करना चाहते है के साथ पाठ, और शीर्षक है कि तुम चाहते हो के साथ आपका शीर्षक के साथ URL_TO_IMAGE की जगह.

Alternatively, you can remove the caption, by using this code: वैकल्पिक रूप से, आप शीर्षक इस कोड का उपयोग कर, दूर कर सकते हैं:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /></div>

Remember to tweak the caption colour, size and font to your liking, and your images will rock! के लिए शीर्षक रंग, आकार और अपनी पसंद के फॉन्ट tweak याद है, और आपकी छवियों का पत्थर होगा!

To get our latest articles, हमारे नवीनतम लेख हो, click here to sign up यहाँ क्लिक करें साइन अप करने के लिए for our free email newsletter or subscribe to हमारे निःशुल्क ईमेल न्यूज़लेटर के लिए या सदस्यता लेने के लिए RSS feed आरएसएस फ़ीड

§ Comments § टिप्पणियाँ
  • TonNet says: TonNet कहते हैं:

    I see you're sharing some of your jewels! मैं देख रहा हूँ तुम अपने गहने के कुछ बाँट रहे हैं! Thanks. धन्यवाद. Even when it looks basic it's not the same when you don't have a clue about what the CSS is. यहां तक कि जब यह लगता है बुनियादी यह वही तुम क्या सीएसएस है के बारे में कोई सुराग नहीं है जब नहीं है.

  • Sumesh says: Sumesh कहते हैं:

    @TonNet: Welcome. TonNet @: आपका स्वागत है. And just between the two of us, I have something to help you out in that matter – stay tuned और बस के बीच हम में से दो, मुझे तुमसे कुछ है कि मामले में मदद है - देखते रहना ;)

  • Karthik says: कार्तिक कहते हैं:

    Noticed that the blog was down today – were you upgrading to 2.3? देखा कि ब्लॉग आज नीचे था - तुम 2.3 उन्नयन के लिए?

  • Sumesh says: Sumesh कहते हैं:

    @Karthik: Yes, I upgraded to WP 2.3 – see my post about it and more @ कार्तिक: हाँ, मैं WP 2.3 में उन्नत किया - इसे और अधिक के बारे में मेरे पोस्ट देखें here यहां . . So, did you? तो, तुमने क्या किया?

  • bootcat says: bootcat कहते हैं:

    Hey Author , thats nice . लेखक अरे thats, अच्छा है. but i think you miss a “DEMO” thing for this post . लेकिन मुझे लगता है कि आप इस पोस्ट के लिए एक 'डेमो बात "याद आती है.

  • § Leave a Reply § एक उत्तर दें छोड़ दो