JMiur [E]

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>

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(http://1.bp.blogspot.com/-rJtLjUni9DA/TjxbZVih-PI/AAAAAAAASks/pBsDRtuoCpU/s00/downloadfile.gif) no-repeat left top;
    color: #4B9043 !important;
    font-family: Verdana !important;
    font-size: 14px !important;
    padding-left: 35px;
    vertical-align: middle;
}


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.

6 comentarios:

NMitra  

selectors css

a[href^="URL_archivo"] {...}


Sus lecciones me han ayudado mucho!

Responder
Beben Koben  

fixed <iv class=... ;)

Responder
nEjO  

Tambien pueden alojar la imagen en Dropbox, luego si necesitan modificar la imagen pueden editarla desde sus pc y guardarla con el mismo nombre y extencion de archivo en su carpeta de Dropbox instalada en la pc.

Responder
JMiur  

nEjO:
Obvio pero, justamente, se trata de no hacer eso ya que las personas usan distintos servicios para alojar imágenes y no solo uno.

Responder
MUDVDFULL  

Hola como estas?
Ya se que hay muchas personas que ya entienden de "taquito" esto del CSS, pero la verdad yo no :(
Y este truco me interesa ya que me paso eso mas de una ves... y es muy pero muy molesto tener que editar una por una las entradas para cambiar una imagen.
Me gustaria saber bien en donde o despues de que, van los codigos que diste arriba en el post.
Desde ya muchas gracias.
Un abrazo.

Responder
JMiur  

Tendrías que decirme a qué parte te refieres ya que hay varias.

El CSS va con el resto de las propeidades de estilo, entre <b:skin> y </b:skin>; el script, antes de &lt/head> y para agregar esto:
<script type='text/javascript'>cambiaralgo(&#39;<data:post.id/>&#39;);</script>
debes buscar el código que ya está en tu plantilla, tal como muestra la entrada.

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