Una de las cosas que, en mi opinión, más embellece una bitácora, es una buena selección de imágenes relativas a cada categoría.

Lo más lógico para implementar una imagen a una categoría, es cambiar el código añadiendo algo así:

<img src="http://tuweb.com/img/<bit:anotacion_nombre_categoria() />.png"><h2 class="title"><bit:anotacion_titulo() /></h2>

Sin embargo, con sólo esto, a pesar de conseguir una imagen diferente por categoría, el aspecto es muy mejorable.

Para solucionarlo, lo mejor es implementar tanto la imagen como el título en una tabla, de modo que modificamos el código anterior dejándolo tal que:

<table border="0"><tr><td width="86" align="center"><img src="http://goremania.bitacoras.com/<bit:anotacion_nombre_categoria() />.jpg"></td><td><h2 class="title"><bit:anotacion_titulo() /></h2></td></tr></table>

Width es el ancho de la tabla, al que yo le he dado una valor, en píxel, del ancho mayor de todas las imágenes que implemento en las categorías, de modo que el título siempre salga en el mismo lugar, y no varíe su posición dependiendo de la anchura de la imagen. El align="center" es para centrar la imagen dentro de la celda.

Todo parecía perfecto. Pero, pronto surgió un problema. Las categorías
compuestas por más de una palabra o con palabras provistas de tildes, no servían para nuestro propósito. La dirección de la imagen quedaba tal que http://tuweb/img/otros géneros.jpg

Por supuesto, subir una imagen a Internet con ese nombre es algo imposible.

Así pues, me quedaba cambiar el nombre de las categorías, o buscar otra forma de crear las imágenes por cada categoría.

Entonces, pensé que podía utilizar el comando <code><bit:anotacion_url_categoria() /> para mis propósitos, mediante una sencilla operación, que consistía en crear una carpeta con el nombre categorias en el espacio de la bitácora, y subir allí las imágenes. Modificando el código, claro, para que quedase de esta forma:

<table border="0"><tr><td width="86" align="center"><img src="<bit:anotacion_url_categoria() />.jpg"></td><td><h2 class="title"><bit:anotacion_titulo() /></h2></td></tr></table>

Entonces, las imágenes se me creaban, en teoría, en direcciones del tipo http://goremania.bitacoras.com/categorias/otros_generos.jpg.

Sin embargo, la teoría no se correspondía con la realidad, y este método me fue infructuoso.

Parecía que tenía que resignarme a, o cambiar el nombre de las categorías, o cejar en mi empeño de poner una imagen por categoría.

Pero, entonces, navengando por una bitácora bitacorera, encontré la solución (muchas gracias a CrackVan por esa solución). Utilizar la descripción de cada categoría para crear esas palabras simples y sin tildes que necesitaba, de modo que el código quedase así:

<table border="0"><tr><td width="86" align="center"><img src="http://tuweb/img/<bit:anotacion_descripcion_categoria() />.jpg"></td><td><h2 class="title"><bit:anotacion_titulo() /></h2></td></tr></table>

Así todo quedaba perfecto. Y, el resultado a la vista está.

En los siguientes días modificaré más cosas... así que nadie se extrañe de ver cosas raras por la bitácora.

Escrito por Psicopanadero

5 Comentarios • 0 Referencias • Enlace Permanente