DANBAT

Con la baja del dominio anterior y el alta del dominio nuevo el sitio estuvo cerrado un tiempo. Al regresar y configurar WordPress aproveché para actualizar unas cuantas cosas. Ya que estaba aproveché para resolver un par de bugs que venían molestando.

El primero era lo lento de la carga inicial del sitio. Como la mayoría de mis posts implican galerías de fotos, no le di la debida importancia ya que pensé que las imágenes hacían la carga más lenta. Pero cuando le presté atención vi que la carga inicial superaba los 5 MB. Demasiado. ¿El problema? Si bien las fotos las muestro como thumbnail, en realidad no estaba cargando las miniaturas sino la foto completa. Venía arrastrando un error de sintaxis desde hace mucho y con corregirlo alcanzó para reducir esos 5 MB a meros 500 KB, la décima parte. Para modificar cada post fui derecho al MySQL y utilicé la función REPLACE:

UPDATE wp_posts SET post_content = REPLACE(post_content, ‘texto_viejo’, ‘texto_nuevo’);

De esta manera y en menos de 0.3 segundos se modificaron 1250 artículos, resolviendo la carga lenta del sitio.

El segundo bug (o feature, más bien), viene de la vez que tuve la brillante idea de que la galería se viera como una hoja de diapositivas. Entre mi pobre dominio de CSS y la pobre implentación del CSS en los navegadores, la tarea nunca fue sencilla. El problema fue centrar las fotos dentro de la caja de la diapositiva. La primera solución al problema lo hice haciendo tres cajas: una para la diapositiva, otra para la foto vertical y otra para la horizontal. Esto implicaba que tenía dos versiones segun la orientación de la foto.

<div class="foto">
  <div class="imagenv"> o <div class="imagenh">
    imagen
  </div>
</div>

Pero esto no funcionaba con las panorámicas, que no tienen el tamaño estandarizado de las demás fotos. Una manera de solucionarlo vino implementando una tabla dentro de un div. ¿¡Cómo!? Los puristas me saltan al cuello cuando lo menciono, pero ciertamente la propiedad vertical-align funciona muy bien dentro de las tablas, así que por un tiempo quedó así:

<div class="foto">
  <table><tr><td>
    imagen
  </td></tr></table>
</div>

Afortunadamente tanto mi manejo de CSS como los navegadores evolucionamos y ya pude implementar un código más limpio y resolverlo solo con CSS, de manera que quedó bien prolijo.

<div class="foto">
  imagen
</div>

Ahora, de pronto me di cuenta de que a lo largo de mis posts tengo TRES implementaciones de las diapositivas. ¿Cómo uniformar todo? Fácil, haciendo el mismo replace en el SQL con los cinco segmentos a cambiar:

<div class=»diapositiva»> donde antes estaban:

<div class=»foto»><div class=»imagenv»>
<div class=»foto»><div class=»imagenh»>
<div class=»foto»><table><tr><td>

Y </div> donde antes estaban:

</div></div>
</td></tr></table></div>

Y eso fue todo. Ahora me queda limpiar la barra lateral y hacer funcionar de nuevo las panorámicas, que por alguna ignota razón dejaron de poder verse.

Addenda: de pronto se me ocurrió que les podría interesar el código que usé:

.diapositiva {
	border: 3px solid #fff;
	padding: 3px;
	position: relative;
	float: left;
	width: 130px;
	height: 130px;
	background-color: #444;
        border-radius: 10px;
}

.diapositiva img {  
    max-height: 120px;  
    max-width: 120px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #444;  
}