Páginas

▼

23 mayo 2011

CSS: Imagenes con pie de foto

Agregar imágenes en nuestro sitio o blog, es algo sencillo. Pero al tratar de colocarle un texto descriptivo a la imagen la tarea se complica bastante. En especial cuando se quiere que el texto permanezca junto con la imagen, ya sea por debajo o por arriba.

Imagen con pie de foto

Es por eso que a lo largo de esta entrada veremos un sencillo pero útil recurso con el cual podremos agregar imágenes en nuestro sitio/blog con un pie de foto sin despeinarnos.

Obviamente las posibilidades son infinitas, esta solo es una, que se me ocurrió mientras paseaba al perro por el parque. Y gracias a Diana Reyes me decidí a publicarlo. En fin, la forma de agregar una imagen mediante este método es la siguiente:
<div class='img'><img src='URL_IMAGEN'/><span>PIE_DE_IMAGEN</span></div>
 Agregando lo anterior para cada imagen que insertemos en nuestro sitio/blog, obtendremos algo muy feo y nada agradable. Algo así:

unicornioUnicornio nadando, IMPOSIBLE!

Esto se arregla ingresando a Diseño>Edicion HTML y agregando justo antes de la etiqueta ]]><b:skin/>
div.img{
  display:table;
}
div.img img{
 margin:0;
 padding:0;
}
div.img span{
 line-height:normal;
 font-size:11px;
 display:table-caption;
 margin:0;
 background:#646464;
 color:white;
 font-style:italic;
 padding:5px;
 text-align:center;
}
 Si realizamos lo anterior con éxito, la imagen que habíamos insertado ahora tendrá esta apariencia:
unicornio Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.

Pie de foto transparente

Con lo anterior se cumple con el objetivo, pero se podría hacer un par de cosas mas con esto. Por ejemplo, jugando un poco con la propiedad position y una etiqueta span mas tendríamos algo como esto:
unicornio Unicornio nadando, IMPOSIBLE!!
El código que debes agregar con cada imagen es el siguiente: 
<div class='img'><img src='URL_IMAGEN'/><span><span>PIE_DE_IMAGEN</span></span></div>
 Mientras que lo que se agrega en Diseño>Edicion HTML justo antes de la etiqueta ]]></b:skin> es:
div.img{
  display:table;
}
div.img img{
 margin:0;
 padding:0;
}
div.img span{
 line-height:normal;
 font-size:11px;
 display:table-caption;
 margin:0;
 padding:0;
 background:#646464;
 color:white;
 font-style:italic;
 text-align:center;
 position:relative;
 height:0;
}
div.img span span{
 background:rgba(0, 0, 0, 0.4);
 display:block;
 padding:3px;
 text-shadow:0 0 15px white;
}

Posición de la imagen

Al igual que cualquier otra imagen, este código puede alinearse a la iquierda, derecha o centro. Solo que para esto es necesario agregar antes de ]]></b:skin> el siguiente código: 
div.centro{
  margin:0 auto;
}
div.izq{
  float:left;
}
div.der{
  float:right;
}
 Este código es aparte de los otros códigos, este solo es para alinear nuestra imagen. Su utilizacion es de la siguiente manera: 
<div class='img izq'>
[.....IMAGEN A LA IZQUIERDA.....]
</div>

<div class='img der'>
[.....IMAGEN A LA DERECHA.....]
</div>

<div class='img center'>
[.....IMAGEN A LA IZQUIERDA.....]
</div>
a la/s

7 comentarios:

  1. José GDF5/24/2011 03:38:00 a.m.

    Me ha gustado especialmente lo de hacer semitransparente el texto. Queda bonito, y no deja de ser útil y práctico. Yo lo podría utilizar para poner un enlace al autor, si es una foto con licencia CC y no es mía, por poner un ejemplo. O una descripción del instrumento, equipo, captura de pantalla, etc... Hay muchas posibilidades.

    Un saludo.

    ResponderBorrar
  2. Diana Reyes5/24/2011 06:29:00 a.m.

    Gracias SäNTÿ, ahora mismo lo pruebo con el código de ubicación.

    ResponderBorrar
  3. Unknown5/24/2011 10:23:00 a.m.

    José GDF, así es, las posibilidades para utilizar y colocar un pie de foto a una imagen tiene muchísimas posibilidades. Y en particular aquí como lo presento se pueden colocar incluso imágenes, posiblemente que se vea cuando pase el mouse, etc... Solo es cuestión de ponerse a experimentar un poco :P. Buen Dia!

    Diana Reyes, de nada:D, avísame si tienes algún problemita ;)

    ResponderBorrar
  4. La hormiguita5/25/2011 07:18:00 a.m.

    :) Útil.. gracias

    ResponderBorrar
  5. Unknown5/25/2011 06:15:00 p.m.

    La hormiguita;), provecho

    ResponderBorrar
  6. Unknown2/23/2012 06:08:00 a.m.

    muy bueno el tutorial; pero cómo se haría el primer ejemplo? es decir, para que el texto quede al pie de imagen, llevo toda la mañana con eso no doy con la tecla, podrías ayudarme? Muchas gracias

    ResponderBorrar
  7. Unknown2/23/2012 06:09:00 a.m.

    muy bueno el tutorial; pero cómo se haría el primer ejemplo? es decir, para que el texto quede al pie de imagen, llevo toda la mañana con eso no doy con la tecla, podrías ayudarme? Muchas gracias

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.