Usar CSS para crear etiquetas repetitivas

Cuando las entradas que escribimos tienen algún tipo de código repetitivo, a veces, solemos adornar eso con alguna imagen. Es algo bastante común, indica una descarga, una referencia externa, una firma de alguna clase, un tipo de archivo, cualquier cosa.

Esto, que es algo habitual, se puede tranformar en un trastorno cuando, por casualidad, cambiamos el diseño o deseamos modificar esa imagen.

Muchas veces hay consultas sobre cosas similares ¿es posible modificar todas las entradas del blog sin tener que editarlas una por una? Y, la verdad es que no, que no hay forma de hacer eso.

Es cierto que podemos usar JavaScript para modificar ciertas cosas onfly, es decir que el codigo que hayamos escrito, se modifique cada vez que cargamos una página pero, para que esto funcione, debemos tener identificado claramente eso que deseamos modificar y, debe ser algo relativamente pequeño, que no exija un tiempo importante de ejecución.

Si, por ejemplo, yo tuviera algo así en varias entradas:

<a href="URL_archivo"> <img src="URL_mi_imagen" style="......." /> DESCARGAR ARCHIVO </a>

podría crear una función que cambiara automáticamente esa imagen por otra, llamando a la función y enviándole el contenido HTML de la entrada para que busque allí dentro:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <p><data:post.body/></p>
  <div style='clear: both;'/>
</div>
<script type='text/javascript'>cambiaralgo(&#39;<data:post.id/>&#39;);</script>

<script type='text/javascript'>
//<![CDATA[
function cambiaralgo(id) {
  var imagen; 
  var contenido = document.getElementById("post-" + id);
  if(contenido!=null) {
    var listaimagenes = contenido.getElementsByTagName("img");
    if(listaimagenes.length>0){
      for(var i=0; i<listaimagenes.length; ++i) {
        imagen = listaimagenes[i].src;
        if(imagen=="URL_mi_imagen"){
          listaimagenes[i].src = "URL_NUEVA_imagen";
        }
      }
    }
  }
}
//]]>
</script>

DESCARGAR ARCHIVO

ejemplo cambiar imagen | [restaurar]

La función leería el contenido de la entrada, buscaría las etiquetas IMG y, si una de ellas tuviera la imagen buscada, la cambiaría por la nueva y el cambio, sería prácticamnetre imperceptible para el visitante.

Es una solución que puede ser aplicada a casi cualquier otra cosa pero, no es lo ideal.

Lo lógico, cuando se quieren usar este tipo de códigos repetitivos, es usar CSS, crear clases y ahí, establecer las propiedades; puedo hacerlo de manera sencilla o puedo complicarlo hasta cualquier extremo. El uso de una clase para este tipo de cosas, me permitirá modificar todas las entradas, cambiando las reglas una sola vez.

En el ejemplo anterior:

<a class="descargar" href="URL_archivo"> <img src="URL_mi_imagen" style="......." /> DESCARGAR ARCHIVO </a>

usaríamos una regla de estilo como esta:

.descargar {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFE3QY9llCYWtbzp8TJWE2SPq5sguR61xuaYjzwHyRuzPGi8TI94u3yxmjwj5E2rj2Db41nLESjI4zS7kPVHx0z2o5KEAgCgJhtkdULOaRGDzkGSQ2MaC5Lh9vdNsRajVunLk9t09y-mYs/s0/downloadfile.gif) no-repeat left top;
    color: #4B9043 !important;
    font-family: Verdana !important;
    font-size: 14px !important;
    padding-left: 35px;
    vertical-align: middle;
}

DESCARGAR ARCHIVO

Más aún, también podríamos generar el texto con CSS:

.descargar:after {
    content: "DESCARGAR ARCHIVO";
}

Con este tipo de sistemas, bastará cambiar el CSS y no hará falta editar las entradas.