How To: Format Images in posts beautifully كيف : وظائف في شكل صور جميلة

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. بما في صورة مع غير ملهم <imgsrc="" /> الوسم ليس في نعد -- they're 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 ، وبعض الكود الذي لديك لانهاء نحو الصورة.

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. السبب : في الوقت الذي المغلق التصميم يؤثر على جميع عناصر القاعدة ، ونمو هتمل لابد يدويا وأضاف حول كل صورة.

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; } ؛ 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; }

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. تطبيق التصميم ، نحن بحاجة إلى استخدام هتمل حول صورة الوسم. The HTML code is as follows: الكود على النحو التالي :

<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! تذكر أن عنوان قرص لونها وحجمها والخط ترضيك ، وصورك وسوف الصخرة!