Subscribe to RSS feed Suscribirse al feed RSS or o follow me me siguen on Twitter? en Twitter?
Images add scenic beauty to posts (unless you include really bad images). Imágenes agregar belleza escénica a los puestos (a menos que incluya imágenes realmente mala). Most bloggers advise you to include images at the at or around the beginning of your posts. La mayoría de los bloggers le invitamos a incluir imágenes en el en o alrededor del comienzo de sus entradas. And I am no different. Y yo no soy 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. Sin embargo, una cosa que los consejos no contiene es la forma de incluir las imágenes que se mezclan con el contenido, sin embargo, ser visible por un lector. Selecting the right image is important, but so is the way you place them. Selección de la imagen de la derecha es importante, pero también lo es la forma en que colocarlos. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. Incluye una imagen con un poco inspirado <img src="" /> es sólo que no en más - son tan web 1.0/year 1998.
I prefer to use centered images, with the width slightly less than your post area width. Yo prefiero usar las imágenes centradas, con la anchura ligeramente inferior a su ancho de la zona posterior. This example shows you how to center the image, and add caption. Este ejemplo muestra cómo el centro de la imagen, y añadir el título.
What you need now is a sensible, easy way to format images, without spending the whole day on it. Lo que necesitamos ahora es una sensata manera fácil a las imágenes de formato, sin pasar todo el día en él. 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. Esto puede lograrse mediante una combinación de dos cosas - una regla de estilo CSS para ser añadido a su style.css y algo de código HTML que tienes que envolver la imagen.
Note that this cannot be used for images previously added, without editing them. Tenga en cuenta que esto no puede ser utilizado para las imágenes previamente añadido, sin editarla. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. La razón: mientras que la regla de estilo CSS afecta a todos los elementos, el formato HTML se debe agregar manualmente alrededor de cada imagen.
Add this code to your style.css file, towards the end: Añadir este código a tu archivo style.css hacia el final:
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. El código anterior son las normas de estilo que le ayudan a la posición de la imagen. To apply the styling, we need to use HTML around the image tag. Para aplicar el estilo, tenemos que usar HTML alrededor de la imagen. The HTML code is as follows: El código HTML es el siguiente:
<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. En el código, reemplace URL_TO_IMAGE con la URL de la imagen, texto ALT, con lo que desea mostrar cuando la imagen no aparece, y el título SU con el título que desea.
Alternatively, you can remove the caption, by using this code: Como alternativa, puede quitar el título, mediante el uso de 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! Recuerde que debe ajustar el color de título, el tamaño y tipo de letra a su gusto, y sus imágenes se rock!
Related reading Lectura relacionada
- Post codes to blog posts/comments with Postable Códigos postales a los puestos de blog / comentarios con Postable
- Top 12 ways to make your blog posts digg-friendly Top 12 maneras de hacer que su blog digg-friendly
- What topics would you like to read more posts on? ¿Qué temas le gustaría leer más sobre los puestos?
- Do not forget http:// in WordPress posts No se olvide de http:// en los puestos de WordPress
I see you're sharing some of your jewels! Veo que estás compartiendo algunas de sus joyas! Thanks. Gracias. Even when it looks basic it's not the same when you don't have a clue about what the CSS is. Aun cuando parece fundamental que no es lo mismo cuando no tienes ni idea de lo que el CSS es.
@TonNet: Welcome. @ TonNet: Bienvenidos. And just between the two of us, I have something to help you out in that matter – stay tuned Y sólo entre nosotros dos, tengo algo para ayudarte en esa materia - Manténgase informado
Noticed that the blog was down today – were you upgrading to 2.3? Cuenta de que el blog se establecen hoy - que se actualiza a 2.3?
@Karthik: Yes, I upgraded to WP 2.3 – see my post about it and more Karthik @: Sí, He actualizado a WP 2.3 - ver mi post sobre ello y mucho más here aquí . . So, did you? Así que, ¿no?
Hey Author , thats nice . Autor Hey, eso es bueno. but i think you miss a “DEMO” thing for this post . pero creo que se olvida de tomar un "demo" algo para este puesto.