Blogger: Miniaturas cuadradas o rectangulares

Hay muchísimos scripts que usan Json para leer información de alguno de los feeds de Blogger y luego mostrarlos.

Generalmente, esos scripts nos permiten leer datos como el título, la URL de las entradas, hacer un resumen de estas y extraer una imagen asociada; los usamos para mostrar las últimas entradas, los posts relacionados, las etiquetas, etc.

En todos esos casos, lo que más dudas provoca es el tema de las imágenes.

Dependiendo del script que se use, esa imagen es extraída usando dos métodos distintos; en un caso, lo que se hace es leer el HTML de la entrada y buscar dentro de este una etiqueta IMG; generalmente, la primera que haya; de este modo, la imagen a mostrar será la imagen real que hayamos incluido y bastará re-dimensionarla con CSS o con atributos width y height para mostrar una miniatura.

Otra forma de hacer lo mismo es leer un dato del feed que es el que contiene esa miniatura creada automáticamente por Blogger:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = "URL_imagen_por_defecto";
}

Este método es el que suele generar dudas por varios motivos; primero, porque Blogger puede no generar esa imagen, tal vez porque el post fue editado, tal vez porque ... quien sabe. Es algo bastante común y son muchos los que se quejan de ello. Nada puede hacerse para resolverlo, no tenemos ninguna herramienta disponible para establecer cuál será esa miniatura. Quien tenga problemas constantes con eso, deberá usar el método alternativo.

Una segunda duda es el tamaño de esa imagen y allí sí tenemos algunas posibilidades ya que esas imágenes tienen el formato clásico de todas las que subimos a Blogger o Picasa donde todo lo que importa es saber que el tamaño de la imagen a ser mostrada, está definido por uno de los parámetros de esa URL; el que vemos justo antes del nombre; por ejemplo:

http://xxxxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s320/demoIMGs_01.jpg

es una miniatura de 320 pixeles de ancho (o de alto si no es apaisada) y en el caso de las miniaturas de los feeds, ese dato dice: s72-c:

http://xxxxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s72-c/demoimg.jpg

Todas estas son miniaturas de 72x72 y cuadradas que es lo que indica ese dato 72 y la letra c

Así que, dada cualquier imagen subida a Blogger o Picasa, basta cambiar ese parámetro para cargar una miniatura de otro tamaño o hacerla cuadrada agregándole -c:

Esta imagen original mide 680x935 y tiene esta dirección:
http://........../s000/demoimg.jpg



La miniatura que teóricamente usará Blogger será:
http://........../s72-c/demoimg.jpg


si no quisiera que fuera cuadrada, le quitaría el -c y como la imagen es más alta que ancha, tendrá 128 pixeles de alto:
http://........../s72/demoimg.jpg




si quisiera mostrar una cuadrada más grande, por ejemplo de 128x128:
http://........../s128-c/demoimg.jpg

por último, si quisiera mostrar una de 128 sin que se deformara:
http://........../s128/demoimg.jpg

Pero, el dato del feed me envia la cuadrada de 72x72 ¿es posible hacer que el script la cambie por otra?

Sí; bastaría agregar una línea extra en el código; por ejemplo, asi la reemplazamos por una de 128 que no sea cuadrada:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
  postimg = postimg.replace('s72-c','s128');
} else {
  postimg = "URL_imagen_por_defecto";
}

Las pseudo-clases son palabras especiales que se pueden adicionar a ciertas reglas de CSS. De manera habitual, usamos varias pero, sobre todo, la famosa :hover que permite cambiar ciertas propiedades cuando ponemos el cursor del ratón encima de un elemento.

No es la única pseudo-clase que vemos en el CSS, suele haber más que se aplican a los enlaces u otras etiquetas.

Tres de las pseudo-clases menos utilizadas y más interesantes que nos trae el CSS3 y con las cuales podemos identificar elementos de manera muy precisa.

leer artículo actualizado

Circus by Joker
	Contiene 5 íconos de 256x256, en formato PNG. descargar

jCodeCollector es un pequeño programa que funciona tanto en Windows como en Mac y Linux y que nos permite almacenar y tener ordenados snippets, es decir, porciones de códigos de todo tipo que uno va acumulando a lo largo de los años y que suelen quedar desperdigados por toda nuestra PC, escondidos, perdidos en alguna carpeta cosa que no los encontremos cuando los necesitamos.

El programa no sólo permite agregarlos sino también ordenarlos en distintas secciones, agregarles etiquetas o comentarios y posee un buscador interno que nos facilita encontrarlos.

De modo automático, reconoce distintos lenguajes (CSS, HTML, SQL, PHP, JavaScript, etc) y muestra los códigos con la sintaxis resaltada en diferentes colores, lo que incluso, hace que sea fácil encontrar errores y solucionarlos.

liteAccordion es un pequeño plugin para JQuery que nos permite agregar acordeones donde se mostrarán imágenes, animándolas con distintos efecto que funcionarán en cualquier navegador, incluyendo Internet Explorer 8.

El demo completo podemos descargarlo desde github pero para agregarlo a un sitio, sólo necesitamos dos archivos: liteaccordion.jquery.js y liteaccordion.css. Entonces, primero agregamos jQuery antes de </head> si es que no la tenemos:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Luego, el script con el plugin:

<script src="URL_liteaccordion.jquery.js"></script>

o lo agregamos directamente en al plantilla, copiando y pegando el contenido de ese archivo:

<script type='text/javascript'>
//<![CDATA[
  ....... aquí pegamos el contenido del archivo liteaccordion.jquery.js .......

//]]>
</script>

Por último, el estilo, del mismo modo:

<style>
  ....... aquí pegamos el contenido del archivo liteaccordion.css .......
</style>

Eso es todo; ahora, hay que crear el HTML allí donde quisiéramos utilizarlo:

<div id="miejemplo" class="accordion">
  <ol>

    <!-- cada una de las pestaña -->
    <li>
      <h2><span>Pestaña UNO</span></h2>
        <div>
          <!-- el demo original usa etiquetas de HTML5 pero, el contenido puede ser cualquier otra -->
          <span class="figure">
            <img src="URL_imagen1" />
            <span class="figcaption">un texto optativo</span>
         </span>
      </div>
    </li>

  </ol>
</div>

Podemos activarlo colocando el llamado a la función debajo de eso o bien, con el resto de los scripts siempre y cuando nos aseguremos que se ejecute cuando la pagina se haya cargado, estableciendo en ese llamdo, las opciones :

<script>
$(document).ready(function(){ 
  $('#miejemplo').liteAccordion({
    onActivate : function() { this.find('span').fadeOut(); },
    slideCallback : function() { this.find('span').fadeIn(); },
    autoPlay : true, pauseOnHover : true, theme : 'dark', rounded : true, enumerateSlides : true     
  }).find('span:first').show();
});
</script>

Algunas de las opciones se agregan ahí y otras en el plugin mismo donde, por ejemplo, se define el ancho y alto:

containerWidth : 600 // ancho total
containerHeight : 350 // alto total
headerWidth : 48 // ancho delas pestañas cerradas
firstSlide : 1 // el número de la primer pestaña activa
slideSpeed : 800 y cycleSpeed : 6000 // velocidad de la animación
rounded : false // si no se quieren bordes redondeados
enumerateSlides : false // muestra u oculta un número en cada pestaña
theme : 'basic' // el tema CSS que puede ser 'basic', 'light', 'dark', o 'stitch'

Esto ultimo, también puede ser modificado ... con paciencia y si se usan textos, habría que agregarle propiedades extras como:

span.figure {
  display: block;
  height: 100%;
  margin: 0;
  width: 100%;
}
span.figcaption {
  background: #000;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  bottom: 20px; 
  color: #FFF;
  padding: 10px 15px;
  position: absolute;
  right: 30px; 
  z-index: 3;
}

Partiendo de la idea de usar CSS para generar columnas auto-ajustables, podemos recrear cosas existentes aunque no funcionen en Internet Explorer y deberemos esperar que ese navegador incorpore estas propiedades que son unas de las más interesantes porque permiten pensar el diseño de un sitio web desde un ángulo totalmente diferente.

Vamos a jugar y usar un ejemplo previo, crear una página con un resumen de entradas que incluya paginación y simplemente, vamos a dejar todo como está pero cambiaremos algunas de las reglas de estilo. El modelo original es el que podía verse acá.

En ese ejemplo, el DIV cuyo ID es resultados es el rectángulo donde se muestran las entradas y, cada una de ellas es otro DIV cuya clase es paginaposts. El script, simplemente lee una cantidad determinada de entradas, extrae una imagen y la muestra junto al título que es una etiqueta H6. Nada de eso cambiará, sólo lo mostraremos de manera distinta, simulando el estilo mosaico de las Vistas Dinámicas de Blogger.

Y estas serán las reglas de estilo diferentes:

<style>
  #resultados { /* se mostrará todo en cuatro columnas */
    -moz-column-count: 4;
    -moz-column-gap: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    column-count: 4;
    column-gap: 0;
    margin-left: 0;
  }
  .paginaposts { /* cada entrada */
    background-color: #EEE;
    border-bottom: 4px solid #101921;
    display: inline-block;
    margin: 0;
    opacity: 0.8;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 205px;
  }
  .paginaposts:hover { opacity: 0.8; }
  .paginaposts a { vertical-align:top; }
  .paginaposts img { width: 205px; }
  .paginaposts h6 { /* el título permanece invisible hasta que ponemos el cursor encima */
    background-color: #AAA;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 204px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;transition: all 1s;
  }
  .paginaposts h6 a {
    color: #000;
    font-size: 18px;
    text-shadow: 1px 1px 1px #FFF;
  }
  .paginaposts:hover h6 { opacity: .8; }
</style>

Mosaico

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/AVvXsEiqXVri7_3_zpgtUXJpkz6SzhQmcAEoD5Rc7qyvHrH5A3kH50_6TFIK5UEQmD7hWx-WwfFP2FnDAEJnmQPvqsQebPm9H350hxy6hekO73_sLBmxQbeUKr_CfsNy_yB8fk2BBuLVsQ/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.