How To: Format Images in posts beautifully Kā: Formāts attēlus amatu skaisti

Images add scenic beauty to posts (unless you include really bad images). Images pievienot Scenic skaistumkopšanas amatos (ja vien jūs tiešām slikts attēli). Most bloggers advise you to include images at the at or around the beginning of your posts. Lielākā daļa Emuāru autori Jums iekļaut attēlus pie vai ap sākumu jūsu posts. And I am no different. Un es esmu ne ar ko neatšķiras.

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. Taču viena lieta, ka šīs konsultācijas nesatur ir par to, kā iekļaut attēlus, kas maisījums arī ar saturu, vēl nav manāms ar lasītāju. Selecting the right image is important, but so is the way you place them. Izvēloties tiesības tēls ir svarīgs, bet tā ir veids, kā jūs vieta tiem. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. Ieskaitot attēlu ar uninspiring <img src="" /> tag ir tikai nav vairs - tie esam tik interneta 1.0/year 1998.

I prefer to use centered images, with the width slightly less than your post area width. Es gribētu izmantot centrētu attēlu, ar platumu mazāk nekā jūsu post zonas platums. This example shows you how to center the image, and add caption. Šis piemērs parāda, kā centra tēlu un pievienot parakstu.

What you need now is a sensible, easy way to format images, without spending the whole day on it. Kas jums tagad ir saprātīgi, viegls veids, kā formāta attēlu, bez izdevumu visu dienu par to. 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. To var sasniegt, apvienojot divas lietas - a CSS veidošanas noteikumu pievienots jūsu style.css un daži HTML kodu, kas jums ir aptīšanas savu attēlu.

Note that this cannot be used for images previously added, without editing them. Jāņem vērā, ka to nevar izmantot attēlus iepriekš pievieno bez rediģēšanas tiem. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. Iemesls: lai gan CSS modelēšana noteikums attiecas uz visiem elementiem, HTML iezīmēšanas ir jābūt manuāli papildina ap katru attēlu.

Add this code to your style.css file, towards the end: Pievienot šo kodu savā style.css failu, beigās:

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. Kodu iepriekš ir veidošanas noteikumi, kas palīdzēs Jums nostāju attēla. To apply the styling, we need to use HTML around the image tag. Lai piemērotu modelēšana, mums vajag izmantot HTML ap attēla tagu. The HTML code is as follows: HTML kods ir šāds:

<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. In kodu nomainīt URL_TO_IMAGE ar attēla URL, ALT TEXT ar to, ko vēlaties parādīt, kad attēls nav redzams, un jūsu Caption ar parakstu, ka vēlaties.

Alternatively, you can remove the caption, by using this code: Jūs varat noņemt parakstu, izmantojot šo kodu:

<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! Atcerieties, kniebiens parakstu krāsā, izmērā un burtu jūsu patika, un jūsu attēli rock!