El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Imágenes con estilo y pie de foto

Cuando introducimos manualmente las imágenes en un documento HTML es muy sencillo darles estilo y agregarles pies de foto. No obstante, cuando queremos introducir imágenes en nuestros sitios mediante nuestros CMS o pretendemos permitir que nuestros clientes lo hagan, la labor se complica.

Paul Boag
ha creado un script que buscará las imagenes marcadas con determinada clase (o clases), extraerá el contenido del atributo title y lo convertirá en un párrafo que hará las veces de pie de página. El script envolverá la imagen en un div, junto al párrafo y quitará la clase a la imagen aplicándola al div. Esto junto con un buen CSS dará lugar a un resultado muy agradable y, lo mejor de todo, automáticamente.

Styled images with caption

En un ratillo he creado un plugin para WordPress, en un rato tendré lista una página con algunas instrucciones pero de momento podéis ir descargándolo aquí:

Image Captions 1.0a

Para utilizarlo simplemente descomprimidlo en la carpeta de los plugins y activadlo mediante el panel de control. Dad a las imágenes una clase de imgLeft o imgRight y escribe un atributo title que merezca la pena. Por supuesto, podéis editar el archivo para cambiar el nombre de las clases o el estilo (he mantenido todo tal cual era en el script original). El script fue publicado con licencia Creative Commons by-nc-sa y por la misma licencia se rige este plugin. Que lo disfrutéis.

Edit:
He subido una versión con un estilo más usable para que no tengáis que ir a editar el css si no queréis.

Edit 2: He creado una página muy sencilla para el plugin, http://labs.webmasterlibre.com/wp/image-captions/

Blogs, Extras, General

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

6 Respuestas a “Imágenes con estilo y pie de foto”

Agrega tu comentario

  1. Sergio dice:

    Muy buen plugin, hace tiempo estaba buscando algo asi, generalmente para destacar mis pinturas, gracias alma!!

  2. Me alegra ser útil :)

  3. Sergio dice:

    Una consulta Alma, he instalado el plugin pero necesito algunas instrucciones (ah!! maldito diseñador), si puedes poner unejemplo seria muy util, grax :)

  4. Es muy simple,

    <img src=”tuimagen.jpg” class=”imgLeft” title=”Lo que quieras que aparezca como pie de foto” />

    te daría una imagen flotada hacia la izquierda con su pie de foto. El aspecto por defecto es simple, blanco con borde y pie en gris no deberías tener mayores problemas para personalizarlo (y si los tienes aquí estoy para intentar ayudarte).

    Lo mismo pero con imgRight para que la imagen se posicione a la derecha.

    Para usarlo sin el float hay que editar el css un poquito, a ver si me pongo y subo una versión con 3 clases para abarcar cualquier situación

  5. Sergio dice:

    como de costumbre, no revisar el blog me trae problemas, gracias por la respuesta Alma, saludos :)

Trackbacks/Pingbacks

  1. Imágenes con estilo y pie de foto…

    Cuando introducimos manualmente las imágenes en un documento HTML es muy sencillo darles estilo y agregarles pies de foto. No obstante, cuando queremos introducir imágenes en nuestros sitios mediante nuestros CMS o pretendemos permitir que nuestros c…

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene más de año y medio. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández