martes, 31 de enero de 2012

Guía: Condiciones Blogger según tipo de página. Simples

Este es un recordatorio-guía sobre las distintas condiciones que podemos manejar en Blogger y que nos sirven para mostrar o ejecutar ciertas cosas, justo en el tipo de página que queremos y no en otras.

Anteriormente ya vimos una pequeña explicación sobre qué era esto de las condiciones y sobre cómo usarlas, pero como desde entonces ha llovido mucho, observo que es una pregunta habitual y sobre todo, entonces fui algo más desordenado, pues allá vamos.

Las páginas Blogger (esto no se aplica en otras plataformas) también manejan las direcciones de las páginas y sus distintos tipos con etiquetas data. Este sería el catálogo:

  • data:blog.homepageUrlDirección de la página Inicio
    Ejemplo: http://www.oloblogger.com
  • data:blog.pageTypeTipo de página
  • Puede tener los siguientes valores:
    • indexHome, páginas de etiquetas y recientes/antiguas
      Ejemplo: http://www.oloblogger.com/search/label/BPT
    • archiveNavegación a través del gadget Archivo
      Ejemplo: http://www.oloblogger.com/search?updated-min=2011-01-01T00...
    • static_pagePágina estática
      Ejemplo: http://www.oloblogger.com/p/contacto.html
    • itemUna entrada individual
      Ejemplo: http://www.oloblogger.com/2010/02/otra-pantalla-de-presentacion-facil.html

Otra variable que nos va a hacer falta para montar las condiciones es data:post.url, que nos remite a la dirección de la página dónde estamos actualmente.


Bien, ya tenemos todo lo necesario para empezar a condicionar cosas. Lo importante es entender la estructura porque a medida que avancemos la cosa se complica. Blogger no permite poner cosas del tipo "Si es este tipo de página y no este", ni ninguna otra combinación tipo AND/OR, así que hay que ir usando nuestra propia lógica para anidara las condiciones.

Una condición básica sería de la forma:

<b:if cond='data:post.dateHeader'>
Ejecuta lo que hay entre los dos if si la fecha del post existe
</b:if>


Pero para lo que nos ocupa -discriminar el tipo de página- necesitaremos hacer una comparación para ver si se cumple la igualdad y no sólo comprobar si un valor existe o no:

<b:if cond='data:post.dateHeader == &quot;17/02/2010&quot;'>
Ejecuta lo que hay aquí si la fecha del post es igual a 17/02/2010.
</b:if>


Hay dos tipos de operadores para comparar, == cuyo significado es evidente y !=, que quiere decir "no es igual". Por causa de que Blogger nos exige una redacción de código muy estricta, los valores a comparar y el operador deben ir entre comillas simples (') y si uno de los dos valores no es una etiqueta data sino una cadena de caracteres normal (caso de una fecha, caso de una dirección), ese valor literal debe ser escrito entre &quot; en sustitución de lo que normalmente serían comillas dobles.


Con todo esto ya podemos discriminar las cosas que sí queremos que se vean sólo en el Home y no en otras páginas:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Ejecuta lo que hay aquí si la dirección de la página en la que estamos coincide con la dirección pricipal del blog.
</b:if>


Por el contrario si queremos que algo se ejecute en todos los tipos de página excepto en la de inicio, tendríamos que usar !=:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Ejecuta lo que hay aquí sólo cuando la dirección de la página en la que estamos NO es la dirección pricipal del blog.
</b:if>


A partir de aquí obviaré que todas las expresiones con == tienen su contraria con != para no ser demasiado exhaustivo.


Para distinguir una entrada en concreto usaríamos este mismo tipo de expresión:

<b:if cond='data:blog.url == &quot;http://www.oloblogger.com/2010/02/codificacion-facil.html&quot;'>
Ejecuta lo que hay aquí únicamente cuando la dirección de la página coincide con la expresada a la derecha.
</b:if>


Seguimos con los casos fáciles. Ver algo sólo cuando estamos en una entrada individual cualquiera.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Ejecuta lo que hay aquí únicamente cuando la dirección de la página coincide con la de una entrada.
</b:if>


Ver algo sólo cuando estamos en una página correspondiente a un elemento del gadget Archivo.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Ejecuta lo que hay aquí si hemos accedido al sistema de navegación desde el Archivo.
</b:if>


Con las páginas estáticas lo más habitual es que queramos ocultar algo, así que en este caso el ejemplo va en negativo, aunque obviamente podría hacerse a la inversa.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Ejecuta lo que hay aquí siempre que NO estemos en una página estática.
</b:if>


Ver algo en Inicio, páginas de etiquetas y páginas recientes/antiguas. Recordamos que estas tres se agrupan en el tipo Index.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
Ejecuta lo que hay aquí cuando la dirección de la página corresponde al Home o a una página de navegación.
</b:if>

jueves, 26 de enero de 2012

Una solución para la paginación de comentarios antiguos

No sólo hemos tenido algunos problemas aquellos que nos hemos pasado forzosa o voluntariamente al nuevo sistema de comentarios hilados, agrupados o anidados (nomenclatura a elegir). También los que han conservado el antiguo sistema, igualmente de manera voluntaria o por causa de fuerza mayor, tienen algunos problemillas con ellos.


Los síntomas son distintos, pero el origen de la enfermedad es el mismo. De momento ya tengo conocimiento de dos. Uno es el que ayer comentaba J.Miur respecto a la desaparición del nuevo estilo que hasta ahora estaba insertado en la plantilla. Eso ha provocado que las modificaciones que pudieras haber hecho directamente en esa parte ya no estén y que los comentarios se vean de aquella manera.

La solución es volver a regenerar el estilo, pero si todavía no te lo han borrado de tu plantilla puedes aplicar una pequeña modificación preventiva que se explica en el anterior enlace de Vagabundia.


El segundo problema es el de la paginación de comentarios en posts con más de 200. Aquí lo que ocurre es que no se puede acceder a dichas páginas, siendo imposible ver nada a partir del que hace 201.

Pero también alguien -que no fui yo- ha encontrado una manera de arreglar esto. Se trata de un pequeño JavaScript que aprovechando las variables data oportunas y las direcciones que maneja Blogger para mostrar las distintas páginas, reproduce el sistema de paginación.

Aclaro que no restaura lo que sea que se haya perdido, sino que directamente construye las páginas y los enlaces a ellas con un código alternativo.


Ese alguien es el editor de Simplex Design y a continuación voy a intentar traducir lo mismo que allí podréis encontrar. Cuando no he probado algo lo advierto y esta es una de esas veces porque no tengo el sistema antiguo en ningún post con más de 200 comentarios, aunque siguiendo la lógica del código, debería funcionar y bien.

Y como hace tiempo que no lo digo, recuerdo que los experimentos se hacen con gaseosa y que para hacerlos con tu plantilla real, antes siempre deberías guardar una copia de seguridad por si se te va una tecla de más y borras algo importante accidentalmente.


Recomponer paginación de comentarios


1. Escritorio ► Pantilla ► Editar HTML ► Continuar ► Expandir plantillas de artilugios

2. Añadir estas líneas antes de ]]></b:skin>

#commentpaging {float:right;}
#commentpaging a {margin-right:5px;}

3. Añadir el JavaScript antes de <body> (supongo que también sirve antes de </head>)

<script type='text/javascript'>
//<![CDATA[
function commentpagination(url,comment){
var posturl= url;
var comment = comment;
cmpage = Math.ceil(comment/200);
document.write('<a href="'+posturl+'?commentPage=1">Primeros</a>');
for (var i = 1; i <= cmpage; i++) {
document.write('<a href="'+posturl+'?commentPage='+i+'">'+i+'</a>');
}
document.write('<a href="'+posturl+'?commentPage='+cmpage+'">Últimos</a>');
}
//]]>
</script>

4. Encuentra la línea <b:includable id='comments' var='post'> y justo a continuación insertas la llamada al script

<b:includable id='comments' var='post'>
<span id='commentpaging'>
<script type='text/javascript'>commentpagination(&quot;<data:post.url/>&quot;,&quot;<data:post.numComments/>&quot;);</script>
</span>

5. Graba los cambios.

Actualización: Una mejora propuesta por J.Miur para que no salga la paginación cuando sólo hay una página, sería añadir una condición que saltaría la impresión en ese caso. En verde lo que habría que añadir:

...
cmpage = Math.ceil(comment/200);
if(cmpage>1) {
....... document.write ....... etc etc
}

Cómo funciona


Primero este script toma el número de comentarios del post y lo divide por 200. Redondea el resultado al entero mayor y así se sabe cuantas páginas hay que construir. Por ejemplo, si una entrada tiene 250 comentarios: 250:200=1,25 ► 2 páginas. De esta manera, la primera página tendrá 200 comentarios y la segunda 50.

La dirección a una página de comentarios tiene la estructura:
http://dirección del post.html?commentPage=número de página

Por ejemplo, en la página del autor, la página 2 de comentarios sería así:
http://www.thesimplexdesign.com/2011/02/simplexenews-latest-version-fixed.html?commentPage=2

Una vez conseguidos el número total de páginas de comentarios y la estructura de la dirección de cada página, el siguiente paso es muy simple, sólo escribimos debajo los enlaces a todas las páginas que pudiera haber con un bucle.

domingo, 22 de enero de 2012

¿Blog en blanco? Solución al problema con IE tras instalar los comentarios anidados

Es posible que desde que instalaste los nuevos comentarios anidados, tu blog tenga problemas al intentar verlo con Internet Explorer.

Los síntomas son una pantalla congelada que no responde a ninguna acción del ratón y que incluso llega a quedarse totalmente en blanco. Si te ocurre eso, aquí tienes una forma de arreglar el problema mientras Blogger no lo hace y así poder mantener los nuevos comentarios.


Dentro del JavaScript del nuevo sistema (threaded_comment_js), existe una primera llamada que lleva un atributo defer. Esto hace que el navegador retrase (difiera) la ejecución del script hasta que la página se haya cargado. Por algún motivo, parece que este atributo es el causante del problema en Internet Explorer y quizás también, el origen de otros problemas, cosa sobre la que voy a solicitar vuestra ayuda al final de la entrada.

La solución rápida es cambiar el atributo defer por otro quizás no tan eficaz para la carga del resto de la página, pero algo mejor que la alternativa de hacer la carga normal. Este sería async. Aquí podéis obtener más información sobre los modos de carga de un script: normal, defer y async.


Para realizar ese cambio nos vamos a Plantilla ► Editar HTML ► Expandir Plantillas de artilugios y allí buscamos esta línea.

&lt;script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/&gt;

Luego tenemos simplemente que cambiar los dos defer que vemos por sendos async, quedando de esta otra manera:

&lt;script async='async' expr:src='data:post.commentSrc' type='text/javascript'/&gt;


Desde que he hecho este cambio, no he observado ninguna anomalía adicional en mi blog y en Internet Explorer ya funciona mi página tan mal como siempre ;)


Y aquí es dónde requiero vuestra ayuda. Necesitaría saber si otros problemas como que no funcione el botón Responder con scriptaculous, la incompatibilidad con los gadgets oficiales de Twitter, que en Firefox el foco se vaya al formulario de comentarios al acceder a un post y otros asuntos similares derivados de la activación de los comentarios anidados se solucionan también con este cambio o tenemos que seguir buscando soluciones mientras Blogger no se de por enterado de estos problemas y ponga algún remedio

El mérito de la idea es de Simple Blogger Tutorials y nosotros sólo la hemos traducido y explicado a nuestra manera.


Actualización:
El tema de la incompatibilidad con scriptaculous también se soluciona con este truco si utilizamos además el cargador de librerías en lugar de la llamada directa.

Tras varias comprobaciones adicionales no puedo garantizar que funcione esto último. Para el problema de IE sigue valiendo lo explicado en el post, pero seguimos sin poder simultanear comentarios anidados y scriptaculous. También parece que hay problemas con Motools, así como con ciertos gadgets de Twitter.

No obstante dejo el código del cargador por si a alguno le solucionara, por casualidad, el problema.


<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, &quot;1&quot;);
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load(&quot;scriptaculous&quot;, &quot;1&quot;);
</script>

jueves, 19 de enero de 2012

Almacenar y recuperar datos Blogger. Variables DATA (2)

Viene de Almacenar y recuperar datos Blogger. Variables DATA (1).

Cada tipo de dato va en una data distinta y así el navegador puede ir dibujando nuestra página con ellos. Un dato único es el nombre del blog (data:blog.title), pero ¿cómo se gestionan los que almacenan diversos datos como por ejemplo data:post.title que sirve para conseguir los títulos de todos y cada uno de los posts?

Pues para distinguir elementos homogéneos, por ejemplo una fecha de un post de la fecha de otro post, cada entrada tiene asignada automáticamente un número distinto (id, identificación) que va asociado a cada petición. Así, cuando pida de la correspondiente tabla de la base de datos un título de un post y además indique de qué post se trata (con la id), inequívocamente tendremos justo el título que se necesita.


Nos falta ver qué utilidad tiene saber esto, pero si a estas alturas lo tengo que explicar....

Como la relación de etiquetas es extensísima (pensad que TODO se guarda en ellas), a continuación sólo relaciono algunas de las variables que más se usan en las modificaciones de plantilla, así las tenemos más a mano:

GLOBALES

data:blog.title: Título del blog
data:blog.pageType: Tipo de página. item, archive o index.
data:blog.url: La dirección de la página en la que se está.
data:blog.homepageUrl: La dirección Home del blog.

CABECERA

data:title: El título (nombre) del blog
data:description: La descripción del blog

POSTS

data:olderPageUrl: Dirección para navegar hacia entradas más antiguas
data:olderPageTitle: El texto del enlace hacia entradas más antiguas
data:newerPageUrl: Dirección para navegar hacia entradas más recientes
data:newerPageTitle: El texto del enlace hacia entradas más recientes
data:commentLabel: El texto a usar para los comentarios. Ej: Opiniones

data:post.dateHeader: La fecha de cada post
data:post.id: La identificación numérica de cada entrada
data:post.title: El título del post
data:post.body: Todo el contenido del post, excepto fecha y título.
data:post.url: Dirección de cada entrada

data:post.labels: Las etiquetas de cada post. Hay que extraerlas con un bucle.
data:post.comments: Los comentarios asociados a cada post
data:post.numComments: Número de comentarios de un post

Ahora que has visto estas ¿está más claro? No. Pues el tema es que si necesitamos por ejemplo mostrar el número de comentarios en una portada a la que le hemos quitado cosas para que parezcan sumarios y no nos muestra ese número, sólo tendremos que añadir un <data:post.numComments/> dónde queremos que se vea.

O bien, podemos replicar el código de data:olderPageUrl y data:newerPageUrl para que existan dos bloques de enlaces de navegación por antiguos/recientes en nuestro blog. Actualmente yo tengo tres de estos, uno en la cabecera del post, en su pie y en el footer.

Otra utilidad es poder reconocer qué variable tengo que quitar para poder personalizar algo con mi propio texto o código. Por ejemplo, data:post.jumpText contiene el texto que se muestra cuando existe un "leer más" en el post, pero si no quiero usar el de la variable, sólo tengo que buscarla en el código y luego sustituirla entera por la palabra "Más" o "¿Quieres ver el artículo completo?" o lo que nos plazca. Igual podríamos hacer con partes más complejas.


Este es otro tipo de DATA
Si alguien quiere ver más sobre etiquetas data, en esta página de la ayuda de Blogger viene una lista bastante completa. Falta todo lo que se ha ido incorporando después de su publicación (2010), que ha sido mucho, pero creo que está lo más importante.

Por ejemplo, faltan aquellas que usamos para hacer sumarios sin javascript y que contenían una miniatura de imagen de cada post (data:post.thumbnailUrl), así como la otra que nos proporcionaba un pequeño resumen de texto (data:post.snippet).

Pero en cierta manera es fácil reconocerlas con una plantilla de pruebas: quitamos una cuyo contenido desconozcamos, nos fijamos en qué cosa desaparece y ¡voilá!. Es un sistema rudimentario, pero mientras Blogger no se digne a explicar con más detalle estas cosas, es la única solución que se me ocurre.

martes, 17 de enero de 2012

Todo sobre el nuevo sistema de comentarios Blogger

Parafreseando la divertida película de Woody Allen, aquí todo lo que siempre quiso saber sobre los nuevos comentarios y nunca se atrevió a preguntar.

A continuación, una pequeña guía de artículos publicados en sitios de toda confianza, que explican diversos aspectos sobre el nuevo sistema de comentarios anidados. Incluimos fuentes diversas por si algunos no nos explicamos adecuadamente y la manera de otros os resulta más fácil de entender.

Actualización (25-01-2012): Iré incorporando a esta entrada las nuevas publicaciones sobre este tema que aporten alguna novedad y sobre todo, que solucionen algún problema. De hecho ya hay algunas más.

Actualización (27-01-2012): Salvo lo de los gadgets de Twitter ya están todos los problemas solucionados con trucos fácilmente reversibles. Hoy incorporo enlace para resolver cuando el foco se va directo a los comentarios en IE y FF al cargar un post.

Actualización (31-01-2012): Vuestras plegarias han sido escuchadas y Blogger ha arreglado por su cuenta los problemas existentes.




Resumen de artículos publicados sobre el nuevo sistema de comentarios anidados Blogger.


☑ LA NOTICIA.
  • Involucra a tus lectores con comentarios anidados. Blogger Buzz.
  • Nueva función en los comentarios del blog (responder comentarios). Compartidisimo.
  • Las nuevas plantillas añaden Reply (sistema de respuesta en comentarios). Gem@ Blog.
  • Nuevos comentarios anidados en Blogger. Oloblogger.


☑ ALGUNAS VENTAJAS.
  • 3 grandes beneficios que ofrecen los comentarios anidados y cómo habilitarlos en plantillas personalizadas. Compartidisimo.


☑ PARA AQUELLOS A LOS QUE NO SE LES CARGÓ EL NUEVO SISTEMA.
  • Nueva función en Blogger: ¡Comentarios anidados y botón responder!. Ayuda Bloggers.
  • Blogger: Comentarios anidados, reply y dudas. Vagagundia.
  • Insertar respuestas (replies) Blogger en plantillas modificadas. Oloblogger.


☑ PROBLEMAS CONOCIDOS Y SOLUCIONES
* Incompatibilidad con gadgets oficiales Twitter (por resolver resuelto)
* Incompatibilidad con Internet Explorer (por resolver resuelto)
* Incompatibilidad con Scriptaculous (por resolver resuelto)
* Problemas de paginación en comentarios tradicionales (por resolver resuelto)
* Desaparición del estilo en comentarios tradicionales (por resolver resuelto)
* Foco en comentarios al acceder desde Firefox (por resolver resuelto)
  • Los comentarios anidados en Blogger (Responder comentarios). Ciudad Blogger.
  • Blogger: Comentarios anidados, reply y dudas. Vagabundia.
  • Posible solución al no funcionamiento del 'botón' respuesta. Grupos Google.
  • Más problemas con los comentarios de Blogger. Vagabundia.
  • ¿Blog en blanco? Solución al problema con IE tras instalar los comentarios anidadosOloblogger.
  • Otra alternativa para solucionar el problema con Internet Explorer. Felipe en un comentario.
  • Una solución para la paginación de comentarios antiguos. Oloblogger.
  • Los comentarios y el salto al final de la página. Vagabundia.
  • ¿Solucionados todos los problemas con los nuevos comentarios?. Oloblogger.


☑ CÓMO CONFIGURAR EL ESTILO VERSIÓN RELÁMPAGO.

  • Volver al diseño de comentarios previo a las replies. Oloblogger.


☑ CLASES PARA CONFIGURAR EL ESTILO A CONCIENCIA DE FORMA ORTODOXA.
  • Blogger. Configurar comentarios anidados. Lista de clases. Oloblogger.


☑ CÓMO ANULAR EL NUEVO SISTEMA Y DEJAR LAS COSAS COMO ESTABAN.
  • Blogger: Comentarios anidados, reply y dudas. Vagabundia.
  • Volver al diseño de comentarios previo a las replies. Oloblogger.


☑ CONTADOR NUMÉRICO CSS PARA LOS COMENTARIOS ANIDADOS.
  • Numerar comentarios anidados en Blogger. Ayuda Bloggers.
  • Numerar los nuevos comentarios de Blogger. Vagabundia.
  • Numerar los nuevos comentarios Blogger sin JavaScript. Opción con sub-índices. Oloblogger.
  • Alternativas para numerar los comentarios. Vagabundia.

☑ PERSONALIZAR EL ESTILO DE LOS COMENTARIOS DEL AUTOR DEL BLOG

☑ PERSONALIZACIONES DIVERSAS

  • Emoticones en el nuevo sistema de comentarios. Vagabundia.

jueves, 12 de enero de 2012

Insertar respuestas (replies) Blogger en plantillas modificadas

Hace un rato comentamos sobre la nueva función de comentarios anidados, así como la posibilidad de que a algunos no les funcionara si tenían su plantilla muy modificada. Pues realmente no es necesario que esté muy modificada pero si se ha tocado en un punto sensible, la cosa no pitará.

Sin embargo, creemos haber encontrado la solución y esta no es nada complicada.

Tenéis que editar la plantilla y con Expandir plantillas de artilugios seleccionado, buscar este trozo de código, que de todo lo que se ha insertado nuevo es la única parte que probablemente os haya quedado sin actualizar. En un principio, existen estas dos posibilidades:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>



Bien, pues tanto si tenéis una opción como la otra, todo eso hay que sustituirlo por este nuevo código y ya os funcionará lo de las respuestas:


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>


Notaréis que el estilo de presentación de los comentarios y las respuestas os cambia, pero eso ya es cosa del CSS, porque este nuevo sistema utiliza unas clases distintas a las del anterior.

De momento, si os salen unas comillas o similar es porque tendréis definidas propiedades para blockquote. Si no os gustan, simplemente tenéis que cambiar de nombre en la parte CSS, vuestra clase blockquote  por .post-body blockquote. De esa manera seguiréis teniendo el estilo que definisteis para citas en los posts, pero no se aplicará en los comentarios.


Actualización: Parece ser que cuando se usa scriptaculous, hay algún tipo de conflicto. Con esa librería los enlaces responder aparecen, pero al hacer clic en ellos no funcionan. Evidentemente, quitando la librería las respuestas funcionan al 100%, pero esto ya es decisión de cada cual: respuestas o efectos. A un servidor le vienen muy bien este tipo de comentarios así que he optado por lo primero. Posiblemente pronto cambie a jQuery que me da la impresión que actualmente da menos problemas y es más completa.

miércoles, 11 de enero de 2012

Formato a imágenes con CSS. Clases.

Es muy fácil tomar una imagen, abrir un editor y añadirle efectos de todo tipo, pero cuando llevamos publicadas una buena cantidad de entradas con ilustraciones, puede que nos demos cuenta de que si esto lo tenemos que hacer para todas y cada una de ellas, la tarea se vuelve muy, muy pesada.

Ahora imaginemos que un buen día queremos cambiar la plantilla y aquello que añadimos a nuestras imágenes ya no pega, o bien que simplemente nos cansamos de ese estilo y queremos usar otro. Está claro que tendríamos que descargar TODAS las imágenes, volverlas a editar y reponerlas en su sitio. Un coñazo, vamos.

Pues bien, las hojas de estilo (CSS) están para lo que están y que es principalmente facilitarnos la tarea de cambiar el aspecto de todos los elementos de todas nuestras páginas, desde un sólo sitio y de una sola vez.

Precisamente eso es lo que vamos a ver a continuación para las imágenes de las entradas de nuestro sitio: algunos sencillos sistemas para formatearlas desde la hoja de estilo.

El resultado puede no ser tan espectacular como con un editor de imágenes, pero seguro que la ventaja del ahorro de tiempo nos compensa con creces.

En un principio, para cambiar cualquier cosa que afecte a las imágenes sólo tenemos que incluir en nuestra plantilla las propiedades necesarias para la etiqueta img, que es con seguridad la que llevan todas. Por ejemplo, pongamos un borde negro sólido de 10px. Nótese que no lleva ningún punto delante, ya que no se trata de una clase creada ex-profeso para nuestro sitio, sino una etiqueta general de HTML:

img {border: 10px solid #000000;}



Podéis probar esto pero teniendo en cuenta dos cosas:
  • La primera es que atacando directamente la etiqueta img, cambiaremos en un principio, el estilo de TODAS las imágenes del sitio web, tanto las de las entradas como las de la barra lateral o las de los gadgets. Hasta los iconos de edición rápida que sólo vemos los administradores se verán con un borde con el código del ejemplo.
  • La segunda es que si hay otra clase más cercana (rodeando) a la imagen que incluya también esta etiqueta (img), el código que se ejecutará con prioridad será este último más cercano, quedando sin efecto el primero para esos elementos en concreto

Es el caso genérico de las plantillas Blogger, que suelen incluir formatos específicos para las imágenes de las entradas. Si buscáis en vuestro código hay muchas posibilidades de que encontréis algún .post img o un .post-body img.

Así las cosas, si por ejemplo tenemos el siguiente CSS y HTML, todas las imágenes se verán con un borde negro excepto las de las entradas, ya que las propiedades de la clase .post mandarían sobre las genéricas por estar las imágenes dentro de esa clase:

img {border: 5px solid #000000;}

.post img {border: 0px;}

<div class='post'>
<img src='http://blog/imagen.jpg'>
</div>

Esto de la prioridad se puede saltar añadiendo !important a los valores de cualquier propiedad. Esa instrucción hace que lo que está junto con ella se ejecute prioritariamente, obviando lo antes explicado de la cercanía. Por tanto, para probar lo del borde a todas las imágenes y saltarnos cualquier otra clase que modifique ciertas imágenes, habría que añadir ese comando:

img {border: 5px solid #000000 !important;}

Otra opción para no usar !important sería buscar a mano las clases existentes que modifican imágenes y cambiar sus propiedades o incluso eliminarlas, según el caso.

En las plantillas estándar que proporciona Blogger, las clases utilizadas son .post img para las plantillas clásicas y .post-body img para las del nuevo diseñador. Buscando en vuestra plantilla podréis encontrar cual es la que corresponde en vuestro caso particular.