JMiur [E]

En el nuevo editor de Blogger, las imágenes pueden ser agregadas desde el modo Edición de HTML que mostarará la ventana típica para subir imágenes que o bien desde el modo Redactar donde la ventana es un poco más sofisticada. Usando este último método, una vez que vemos la imagen, podemos hacer click en ella para cambiar su tamaño, seleccionado entre los las opciones predeterminadas, alinearla, eliminarla o Añadir una leyenda.


Justamente esto último suele traer alguna consulta respecto a la personalización ya que Blogger agrega una serie de propeidades por defecto y uno, a veces quiere cambiarlas:
table.tr-caption-container {
  margin-bottom: 0.5em;
  padding: 4px;
}
td.tr-caption {
  font-size: 80%;
}

Esta es la leyenda agregada a la imagen

Si miramos el código generado, veremos que en realidad, lo que se ha agregado es una tabla más o menos así:
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;">
<tbody>
  <tr>
    <td style="text-align: center;">
      <a href="URL_imagen" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;">
        <img border="0" src="URL_imagen" />
      </a>
    </td>
  </tr>
  <tr>
    <td class="tr-caption" style="text-align: center;">el texto con la leyenda agregada</td>
  </tr>
</tbody>
</table>
Mucho código para una pobre imagen pero, es lo que hay.

Para darle un aspecto diferente basta agregar el estilo en alguna parte de nuestro CSS, dentro de <b:skin> </b:skin>; por ejemplo:
table.tr-caption-container { /* esta es la tabla */
  -moz-box-shadow: 0 0 30px #ABC;
  -webkit-box-shadow: 0 0 30px #ABC;
  box-shadow: 0 0 30px #ABC;
  border: 2px solid #567;
  margin: 0 auto;
  padding: 0;
}
td.tr-caption { /* esta es la leyenda */
    background-color: #334455;
    border-top: 1px solid #556677;
    color: #DDEEFF;
    font-family: Georgia;
    font-size: 20px;
    padding: 5px 10px;
}
Esta es la leyenda agregada a la imagen

17 comentarios:

Graciela  

Realmente Jmiur, cada día le agregan más código! muy bien explicado :P

Responder
JMiur  

Sería bueno que ellos lo explicaran cuando lo agregan; este es útil en muchos casos :D

Responder
master  

Buenisimos tus aportes amigo, antes de nada me gustaria felicitarte por tu pagina. Gracias a ella voy dando forma a mi blog.

Estoy buscando ayuda para en "entradas antiguas" poder poner numeros, y asi enumerar todas las entradas.
No se si has publicado algo parecido, pero la verdad antes de molestarte he estado buscando y no he encontre nada.
Me podrias ayudar?

SALUDOS

Responder
JMiur  

Fíjate en esta entrada> del Blog de Gem@ donde está el script más reciente.

Responder
Ark  

Jmiur, estoy haciendo experimentos, con esta forma de presentar las leyendas, pero tengo una duda. Me gustaría saber si se podría ajustar el ancho del contenedor de la leyenda (td.tr-caption), para que siempre sea del mismo tamaño que el de la imagen.

Por ejemplo si tengo una imagen de 500 pixeles, (mas margins paddings ect), que el contenedor sea de 500 pixeles tb (mas margins paddings...)


Ahora mismo sucede justamente al contrario, es el ancho del contenedor de la imagen el que varia en funcion del tamaño del contenedor del texto. Yo particularmente veo mucho mas interesante conseguir el efecto inverso... ¿Alguna sugerencia?

Responder
JMiur  

Lo que genera el código de Blogger es una tabla y las tablas se adaptam al ancho de la celda más grande. A menos que sepas cuál es el tamaño de esa imagen (si es que es variable) no hay forma de a la celda inferior con CSS, un ancho equivalente al de la celda superior.

Lo que puede usar es max-width para estatablecer un tamaño máximo:

td.tr-caption {
max-width: 420px;
}

Responder
Ark  

El caso es que controlo bastante las medidas de mis imágenes, vamos que no me costaría identificar el ancho y aplicárselo yo mismo a las leyendas.

Pero es que cada nueva cosa que he de hacer y no automatizo es un suma y sigue de código al html de la entrada. Con los consiguientes errores u olvidos.

Quizás pruebe a solucionarlo jugando un poco con el color del background del contenedor superior o similar.

Gracias por la ayuda.

Responder
Ummu Abdurrahman  

Jmiur Encantada,

He estado creando una plantilla a partir de las de blogger 2006 a mi gusto, lo hecho en gran mayoria gracias a los tutoriales de El Escaparate, GemaBLOG y el vuestro. El punto es que hoy aplique por primera vez la leyenda y me acabo de dar cuenta que ya no aparecen los bordes que dí a las imagenes como en los post anteriores.

He mirado y mirado que puede ser pero no doy con ello. Tendría ud. alguna idea de que puede ser.

Desde ya muchas gracias.

Responder
JMiur  

Hola, Ummu Abdurrahman:

Eso ocurre porque estás agregando una regla de estilo para que las imágenes dentro de esas tablas que son las que crea Blogger cuando usas esta opción, estás eliminando el borde y el padding ya que dice:

.tr-caption-container img {
border: none;
padding: 0;
}

Si quieres que se siga viendo el borde, elimina el border: none;

Responder
Ummu Abdurrahman  

Vaya que detalle más pequeño, era sólo none y ya.
¡¡Muchas gracias!!

Responder
SeriesforSale Paraguay  

hola, me ayudo mucho esta entrada :D
una pregunta, como hago para centrar horizontalmente la imagen que está dentro de la tabla? es para arreglar un poco lo del tamaño diferente de la tabla... gracias

Responder
JMiur  

Puedes usar:

table.tr-caption-container td {
text-align: center;
}

Responder
Richard Osorio  

holas por que quedan espacioes en blanco en la imagen que le pongo leyenda http://www.compugamestv.com/2012/05/battleship-subs-espanol-2012-pelicula.html

JMiur  

Porque hay un salto de línea al final y múltiples paddings y márgenes en las etiquetas que conitenen la imagen: fieldset + div + div

Responder
Luis de Vega Fernandez  

Hola a todos,tengo un problema:Estoy añadiendo algunas fotos de mi pen drive y les estoy poniendo leyendas,pero cuando paso de cuatro ya no me sale el menú para moverlas,eliminarlas,etc.Debo decir que todas son iguales en formato y provienen de la misma cámara.Mi pregunta es:¿Hay solución para esto?

Responder
Marina Tyukalova  

Holaa!! Me pueden ayudar con un problemilla que tengo con las leyendas? Vereis, aqui en el blog, las imagenes con leyenda aparecen tanto la imagen como el texto dentro del recuadro. Sin embargo, cuando YO añado una leyenda a una imagen, el texto queda fuera del recuadro de la imagen. Llevo muchisimo tiempo intentando saber como se consigue ese efecto. Por favor ayudaa!!

JMiur  

Imposible saberlo sin ver el sitio en donde tienes el problema.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR