Cómo obtener la primera imagen del post en Blogger sin Javascript

En Blogger hay una infinidad de etiquetas propias de la plataforma, entre las cuales existen las denominadas <data>. Estas tags nos permiten mostrar determinados elementos dentro de nuestro blog, y para nuestra ventaja podemos reubicarlas a nuestro antojo.

Por ejemplo, si deseamos mostrar el contenido de la entrada, símplemente recurrirmos a <data:post.body/>, o bien si necesitamos mostrar el título de ésta, añadimos <data:post.title/> a nuestro código. Para no desviarnos del objetivo principal de esta entrada, no nos adentraremos con detalles sobre el uso de estas etiquetas.
 
En Blogger también podemos obtener la imagen en miniatura de la entrada, pero sólamente la obtendremos a un tamaño de 72 píxeles. La etiqueta que se encarga de ello es <data:post.thumbnailUrl/>, y devuelve una URL en el siguiente formato:

http://X.bp.blogspot.com/-XXXXXXXXXXXXXXXXXX/s72-C/nombre-imagen.png

El valor s72 en la URL indica que la imagen tendrá un tamaño de 72 píxeles, mientras que el valor -C indica que la imagen se mostrará cortada en forma de cuadrado.

Aquí viene el problema, si intentamos aumentar el tamaño de la imagen mediante CSS, debido a su baja resolución se verá pixelada.

La solución:
Si estás utilizando la combinación <data:post.snippet/> y <data:post.thumbnailUrl/> (Para obtener el resúmen y la imagen en miniatura correspondientes), puedes optar entonces por utilizar <data:post.firstImageUrl/>, la cual devolverá la primera imagen de la entrada en su tamaño real.

Para utilizarla bastaría con incluir el siguiente código en tu plantilla:

<img alt='alguna keyword' expr:src='data:post.firstImageUrl'/>

Por ejemplo, si quieres que las entradas del índice se vean como una tarjeta:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class="entrada-indice">
        <a class="titulo-indice-post" expr:href="data:post.url">
           <data:post.title/>
       </a>
           <p class="resumen-post">
                <data:post.snippet/>
                <div style="clear:both" /> 
          </p>
     <img alt='thumb' class="miniatura" expr:src='data:post.firstImageUrl'/>
    </div>

<b:else/>
        <!-- Código original de la entrada, el cual se mostrará normalmente dentro de ellas y páginas estáticas -->
</b:if> 

Lo que devolvería lo siguiente:

<div class="entrada-indice">
        <a class="titulo-indice-post" href="http://www.tublog.blogspot.com/2013/04/entrada.html">
          Soy el título de alguna entrada.
       </a>
           <p class="resumen-post">
                Soy un breve resúmen de la entrada que se muestra debajo de la imagen en miniatura.
                <div style="clear:both" /> 
          </p>
                <img alt='thumb' class="miniatura" src='URL-PRIMERA-IMAGEN'/> 
    </div>

En el caso del ejemplo, los selectores CSS serían los siguientes:

.entrada-indice {
/*Atributos para cada entrada dentro del índice*/  
}

.titulo-indice-post {
/*Atributos para el título de cada título*/  
display:block; /*Para pasar el enlace de inline a block*/ 
}

.resumen-post {
/*Atributos para el contenedor del resumen*/
}

.miniatura {
/*Atributos para la imagen*/ 
}

Dentro de cada selector deberás añadir las propiedades que creas convenientes para tu plantilla.

Nota: No es necesario reconstruir la sección completa, bastaría con buscar algo parecido a esto si ya utilizas el sistema que se encuentra en Oloblogger:

<img expr:src='data:post.thumbnailUrl'/>

Por esto:

<img alt='alguna keyword' expr:src='data:post.firstImageUrl'/>