Subscribe to RSS feed Subscribe to RSS feed or ou follow me siga-me on Twitter? no Twitter?
Images add scenic beauty to posts (unless you include really bad images). Imagens acrescentar beleza a lugares (a menos que você incluir imagens realmente ruim). Most bloggers advise you to include images at the at or around the beginning of your posts. A maioria dos blogueiros aconselhá-lo a incluir imagens no ou em torno do início de suas mensagens. And I am no different. E eu não sou diferente.
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. No entanto, uma coisa que esses conselhos não contém é como incluir imagens que combinam bem com o conteúdo, ainda não ser perceptível por um leitor. Selecting the right image is important, but so is the way you place them. Selecionando a imagem direito é importante, mas assim é a maneira que você os coloque. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. Incluindo uma imagem com um <img uninspiring src="" /> marca não é apenas de mais - eles são tão web 1.0/year 1998.
I prefer to use centered images, with the width slightly less than your post area width. Eu prefiro usar imagens centradas, com a largura um pouco menor do que sua largura da área de postagem. This example shows you how to center the image, and add caption. Este exemplo mostra como centro para a imagem, e adicionar legenda.
What you need now is a sensible, easy way to format images, without spending the whole day on it. O que você precisa agora é uma maneira sensata e fácil de imagens de formato, sem gastar o dia inteiro nele. 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. Isto pode ser conseguido por uma combinação de duas coisas - uma regra de estilo CSS para ser adicionado ao seu style.css e alguns códigos HTML que você tem de envolver em torno de sua imagem.
Note that this cannot be used for images previously added, without editing them. Note que isto não pode ser usado para imagens previamente adicionou, sem editá-los. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. O motivo: enquanto a regra de estilo CSS afeta todos os elementos, marcação HTML tem de ser adicionado manualmente em torno de cada imagem.
Add this code to your style.css file, towards the end: Adicione este código ao seu arquivo style.css para o fim:
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. O código acima é a regras de estilo que o ajudam a posicionar a imagem. To apply the styling, we need to use HTML around the image tag. Para aplicar o estilo, é preciso usar o HTML em torno da tag de imagem. The HTML code is as follows: O código HTML é o seguinte:
<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. No código, substitua URL_TO_IMAGE com o URL da imagem, ALT TEXT com o que você quer mostrar quando a imagem não é exibida, e legenda para a sua com a legenda que você deseja.
Alternatively, you can remove the caption, by using this code: Alternativamente, você pode remover a legenda, usando este código:
<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! Lembre-se de ajustar a cor da legenda, tamanho e tipo de letra a seu gosto, e as imagens serão rock!
Related reading Leitura relacionada
- Post codes to blog posts/comments with Postable Códigos postais de posts / comentários com publicáveis
- Top 12 ways to make your blog posts digg-friendly Top 12 maneiras de fazer seus posts digg-friendly
- What topics would you like to read more posts on? Que temas você gostaria de ler mais mensagens sobre?
- Do not forget http:// in WordPress posts Não se esqueça http:// em postos WordPress
I see you're sharing some of your jewels! Vejo que você está compartilhando algumas de suas jóias! Thanks. Obrigado. Even when it looks basic it's not the same when you don't have a clue about what the CSS is. Mesmo quando parece básico não é o mesmo quando você não tem a menor idéia sobre o que o CSS é.
@TonNet: Welcome. @ TonNet: Bem-vindo. And just between the two of us, I have something to help you out in that matter – stay tuned E apenas entre nós dois, eu tenho algo para te ajudar nessa questão - stay tuned
Noticed that the blog was down today – were you upgrading to 2.3? Notado que o blog foi para baixo hoje - foram você atualizar para o 2.3?
@Karthik: Yes, I upgraded to WP 2.3 – see my post about it and more @ Karthik: Sim, eu atualizado para WP 2.3 - ver o meu post sobre isso e muito mais here aqui . . So, did you? Assim, não é?
Hey Author , thats nice . Autor Hey, thats nice. but i think you miss a “DEMO” thing for this post . mas acho que falta uma "DEMO" coisa para este post.