Secretos al descubierto de la plantilla #maCSSonry para Blogger 13.9.17

Unos detalles de los códigos HTML y Javascript que hacen posible el funcionamiento del nuevo tema #maCSSonry del blog

Secretos al descubierto de la plantilla #maCSSonry para Blogger

·Por Kseso ⧉ 13.9.17 ⚑ blogger ⚑ nuevo tema ✎ 0

Hace aproximadamente un mes que cumpliendo con la tradición cambié la piel al blog a la que ahora (Septiembre 2017) luce: el tema #maCSSonry layout. Y en este mes los usuarios asiduos del blog habéis ido sufriendo el pulido del mismo día a día. Refactoringo Refactorización lo llaman por ahi los pros ;-)

Habrá a quienes haya molestado esta forma de proceder, mis disculpas. Pues lo que un día era al siguiente o ya no estaba o había cambiado por completo.

Quizás alguno, mínimos, hayan abierto el inspector de códigos para ver el qué y el cómo de algún detalle.

Pues para los curiosos va esta entrada: algunos detalles (códigos e ideas) que hacen posible la estética y funcionamiento de la plantilla maCSSonry layout actual. El CSS, el HTML nativo de Blogger y Javascript.

Modificaciones del código HTML de la plantilla #maCSSonry

Inicialmente la generación de los ítems del home del blog los generaba mediante javascript. Esa parte la heredé del tema as TweetDeck anterior.<7p>

Pero sabía que penalizaba el funcionamiento del blog y que era obligado volver a usar las funcionalidad de Blogger para mostrar los artículos más nuevos.

Para poderlo hacer no fue suficiente con actuar en el <b:includable id='post' var='post'> que es donde se encuentra en las plantillas tradicionales, normalmente, el código que genera el contenido del artículo, si es un post o página estática, o los sumarios en caso de páginas tipo ítem, búsquedas, étc.

Para asegurarme que lo mostrado en el home no se viese contaminado por nada y mostrase única y exclusivamente lo que quería y necesita como lo quería y necesitaba es necesario actuar en el <b:includable id='main' var='top'>.

Lo que he hecho ha sido meter todo lo que en él había en un condicional <b:if ... que afecta a todo tipo de página del blog excepto al índex o home. Y a continuación generar con su condicional lo específico para la portada:


<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <section role='main'>
   <div class='last-posts' role='feed'>
    <b:loop index='postNum' values='data:posts' var='post'>
     <b:include data='post' name='post'>
      <figure expr:class='&quot;item-&quot; + data:postNum' role='article'>
       <a expr:href='data:post.url' expr:tabindex='data:postNum + 10' expr:title='&quot;Ir al post &quot; + data:post.title'>
        <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
         <img class='thumbnailReplace' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' role='img'/>
        </b:if>
        <h2><data:post.title/></h2>
       </a>
       <figcaption class='published update' expr:content='data:post.timestampISO8601' itemprop='datePublished' rel='bookmark'>
        <data:post.timestamp/>
        <span class='hide intro' data-content='Sinopsis' itemprop='description'>
         <data:post.snippet/>
        </span>
       </figcaption>
      </figure>
      <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
       <b:if cond='data:postNum == 0'>
        <figure class='item-C'/>
       </b:if>
      </b:if>
     </b:include>
    </b:loop>
   <figure class='item-19' role='article'>
     <!-- link al sitemap -->
   </figure>
  </div>
 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
  <script>
   // NOTA 2  
  </script>
 </b:if>
  </section>
 </b:if>
</b:if>

A poco que te hayas manejado con el código nativo de Blogger, todo lo anterior no te será de sobra familiar, conocido y comprensible. Por eso sólo he resaltado unos pocos detalles significativos para comentar aquí y ahora.

expr:tabindex='data:postNum + 10'

En esta plantilla he procurado prestar un poco más de atención al tema de la accesibilidad añadiendo algún detalle que contribuya a ello. Caso de los atributos role y tabindex para facilitar la navegación por teclado.

La expresión expr:tabindex='data:postNum + 10' lo que hace es asignar un valor numérico a cada posts, comenzando como en javascript por el 0 [cero] al primero.

¿Y porqué le sumo 10 más? Porque en el header hay 6 ítems y por el item-C resaltado en el código previo que uso para generar 3 posts al azar.

img class='thumbnailReplace'

Blogger tiene el data code>post.thumbnailUrl que devuelve la dirección de la primera imagen del post, pero con un tamaño de 72 px y cuadrada: s72-c. Imagen que en la mayoría de los casos es del todo punto inadecuada en la mayoría de las situaciones.

Sería toda una mejoría que este data contase con modificadores de su tamaño. Algo como post.thumbnailUrl(w:400 & h:300). Pero hoy por hoy no es posible, así que el único camino es recurrir a javascript para traer una imagen del tamaño deseado. Yo lo hago usando esa clase como selector en el script de la nota 2:

Post aleatorios o al azar

Inicialmente los había colocado en una sección aparte y después de los últimos comentarios. Pero tras darle una pensada creo que a ellos no llegaba nadie a verlos. Cargaban en exceso el funcionamiento para su posible utilidad.

Así que lo que he hecho ha sido eliminar dicha sección e incluir tres post de la olvidoteca integrados entre los demás ítems.

Para ello utilizo el figure class='item-C' sólo en la versión del blog pedida y servida a los no móviles con ayuda del condicional data:blog.isMobileRequest == "false"

Y hacerlo a continuación (tras) el ítem deseado (el primero o más nuevo) y como hermanos del resto de ítems lo hago mediante el condicional:

<b:if cond='data:postNum == 0'> <figure class='item-C'/> </b:if>

El cómo lo comentaba de forma detallada en el artículo Posts aleatorios configurable por etiqueta, número, extensión del sumario y tamaño de imagen. El javascript base ha ido sufriendo modificaciones con el tiempo.

Además en esta disposición había dos detalles a corregir o mejorar:

Queda feo si como post aleatorio se muestra alguno de los más recientes que aún están en la portada. Por duplicado.
El administrador está obligado a cambiar manualmente la etiqueta o label utilizada para su selección y así evitar la monotonía y añadir un poco más de aleatoriedad

Debido a mi ignorancia declarada de javascript estoy seguro que mi solucción será manifiestamente mejorable.

Para ello sólo han sido necesarias dos pequeñas modificaciones en el javascript que lo hace posible:

Crear una matriz que contenga las etiquetas que deseemos usar y tomar una de ellas al azar en cada carga de la página.
Utilizar esa etiqueta en la dirección del script que accede al feed de los post. Y para evitar que tenga en cuenta los post que ya están en la portada excluirlos con el modificador &start-index

See the Pen TOTAL Random posts a la #EsCss by Kseso (@Kseso) on CodePen.

La razón de utiliza el item-C como selector para generar en él los posts y a continuación eliminarlo es que en mi ignorancia fue la forma que mejor funcionaba al introducirlo en el código de la plantilla.

Recarga el pen para ver el cambio tanto en los post al azar que se muestran como de la etiqueta usada como base de selección. Y llegados a este punto mejor no hacer más soporífero el artículo incluyendo los códigos y explicaciones. Están en el pen y los detalles en el artículo que te enlazaba anteriormente dedicado al tema.

Cualquier mejora a este engendro de javascript se agradece. Eso sí, no hagas mucha sangre que ya he avisado de mi ignorancia en la materia... o mejor, ¡Qué C*ñ*! ¡A degüello!

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.