soy Kseso y esto EsCSS

El widget "Entrada destacada": versión Blogger vs a la manera #EsCss

Con motivo del lanzamiento del nuevo widget oficial para Blogger "Entrada Destacada" lo evalúo, lo descarto por simplista y poco o nada configurable y te comparto la "manera #EsCss ", cómo lo hago yo en el blog.

El widget "Entrada destacada": versión Blogger vs a la manera #EsCss

·Por Kseso ✎ 24

Ayer día 11 de Diciembre de 2015 el pequeño ecosistema de usuarios de Blogger se alborotó (bueno, no mucho) con el anuncio por parte de esta plataforma de un nuevo widget disponible para su uso.

Entrada destacada o Highlight the posts that matter the most que es el título del artículo en que lo dan a conocer.

Básicamente lo que hace es que seleccionas un artículo cualquiera de los que tengas publicados y te lo mostrará allá donde quieras colocarlo en la plantilla de tu blog.

La configuración, como suele ser normal, es de lo más simple y a prueba de cualquiera:

Entrada destacada a la manera Blogger

captura pantalla nuevo widget entrada destacada
Opciones entrada destacada en Blogger

Cuando quieras leer esto seguro que ya habrá cienes y cienes de píos a mayor gloria de la Nueva Buena que para eso estamos en Adviento. Así que yo también me sumo para mayor gloria y difusión

Pero para lamentar que siendo un widget nativo de la brigada en la sombra (aka desarrolladores de Blogger) sea algo tan simplista y carente de funciones básicas.

En un vistazo rápido vemos que, sin entrar en qué recursos necesita el widget, sus carencias principales son:

tamaño imagen cargada
  1. Sólo puedes seleccionar una entrada.
  2. Siempre será el mismo post. Resultado: a la segunda o tercera visita a tu página pasará desapercibido por repetitivo.
  3. El sumario no es optativo y tampoco puedes controlar su tamaño.
  4. La imagen es cargada a su tamaño y peso natural y redimensionada vía Css.
  5. La imagen es cargada con el protocolo http así que si usas el seguro https en tu blog...
  6. La imagen "será la primera de la entrada" y ¿si no hay imagen? No investigué si pillará cualquiera (el avatar de un comentario i.e.) o qué hara porque no hay opción a especificar una como reserva.
  7. El orden de los elementos (título, sumario, imagen) tampoco lo puedes configurar.

A grandes rasgos y sin analizarlo en profundidad estas son las limitaciones o contras que le encuentro. Algunas imperdonables y que para mi, al menos, lo hacen digno de irse al limbo.

Aunque quizás todas estas carencias que yo le he encontrado sean corregibles buscando en el código fuente los scripts que cargue y recursos que necesite para funcionar y modificarlos según convenga. Quizás.

Entradas destacadas aleatorias a la #EsCss

Los usuarios habituales del blog posíblemente hayan reparado que en la plantilla que estoy usando en estos momentos, tanto en el índex del blog como en el aside de las entradas o artículos se muestran resúmenes de posts similares a esta "entrada destacada".

Unas veces con imagen asociada y otras si ellas y con o sin sumario. Pero de forma aleatoria: con cada carga de la página cambian (o deberían) lo mostrado.

Ya todos conocéis mi ignorancia de javascript. Lo siguiente no es algo que yo haya creado. Cuando tuve necesidad de ello hice aquello de: "busca, compara, combina y modifica". Esto es, lo siguiente es fruto de trabajos de terceros (desconozco autoría original) mezclados y alterados por mi como buenamente pude para cubrir mis necesidades.

A continuación el script que uso en los casos que quiero y muestro una imagen con cada post. Las características principales son las opciones de configuración que puedes ver en su inicio:

<script type='text/javascript'> //<![CDATA[ var num_Posts=1; //número posts a mostrar var random_Posts=true; //false: muestra siempre el más nuevo de esa label var ver_Sumario=true //false: sin sumario var long_Sumario=300; //número caracteres sumario var ver_Imagen=true; //false: no muestra imagen var size_Imagen="/s400/"; //anchura REAL de la imagen var sin_Imagen="ruta/tu/imagen/de/sustitución/mi.jpg"; //ruta a tu imagen sustitución var src_1=/\/s\d*\//; var src_2=/\/s\d*-c\//; //nombre función coincidente con parámetro 'callback=' script del feed function bardialon(r){ var t=r.feed.openSearch$totalResults.$t; var f=new Array(); for(var h=0;h<t;++h){f[h]=h} if(random_Posts==true){f.sort(function(){return 0.5-Math.random()})} if(num_Posts>t){num_Posts=t} for(h=0;h<num_Posts;++h){ var l=r.feed.entry[f[h]]; var e=l.title.$t; for(var g=0;g<l.link.length;g++){ if(l.link[g].rel=="alternate"){ posturl_Escss=l.link[g].href;break} } if("content" in l){var p=l.content.$t} s=p; a=s.indexOf("<img"); b=s.indexOf('src="',a); c=s.indexOf('"',b+5); d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ var n=d.match(src_1)||d.match(src_2); var o=d.replace(n,size_Imagen); //cambia ruta imagen a protocolo https var m=o.replace("http:","https:") } else{var m=sin_Imagen} //imprime el marcado html salida: título e imagen document.write('<figure><a href="'+posturl_Escss+'"><h3>'+e+"</h3>"); if(ver_Imagen==true){document.write('<img src="'+m+'" alt="'+e+'"/>')} var q=/<\S[^>]*>/g; p=p.replace(q,""); if(ver_Sumario==true){ if(p.length<long_Sumario){document.write(p)} else{ p=p.substring(0,long_Sumario); var j=p.lastIndexOf(" "); p=p.substring(0,j); //imprime sumario con marcado html document.write("<figcaption>"+p+"…</figcaption>") } } //cierra marcado html generado document.write("</a></figure>") } }; //]]> </script> //Llamada al RSS feed del mismo blog donde se incluyen las entradas destacadas //Si las quieres es otro blog distinto añade al inicio el nombre del blog: //src='http://nombreBlog.blogspot.com/feeds/posts... <script src='/feeds/posts/default/-/LABEL?alt=json-in-script&callback=bardialon&max-results=500'></script>

Antes de seguir con las explicaciones puedes ver la demo y el script usado limpio de comentarios y codificación html para que el blog lo muestre. Pero lo mejor es que edites el pen para poder modificar todas y cada una de las opciones.

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

Opciones de configuración

var num_Posts=1;
¿Cuántos post quieres mostrar?
var random_Posts=true;
'true' para que los muestre de forma aleatoria; 'false' mostrará siempre el más reciente de la etiqueta seleccionada.
var ver_Sumario=true
'false' no muestra sumario
var long_Sumario=300;
número caracteres que se mostrará en el sumario.
var ver_Imagen=true;
'false' no mostrará imagen.
var size_Imagen="/s400/";
La anchura REAL de la imagen que se cargará. Mantén siempre la 's' previa a los dígitos.
var sin_Imagen="ruta";
La ruta a tu imagen sustitución que se mostrará en caso de que el post no tuviese.
function bardialon(r){
Este nombre de la función has de colocarlo en el valor del parámetro callback= del segundo script que llama al feed del que esnifa los posts.
var m=o.replace("http:","https:")
Como blogger puede servir las imágenes almacenadas en su servicio con protocolo seguro aquí lo elegimos.
//imprime el marcado html salida:
A partir de este comentario en el script es la parte que imprime el contenido del las entradas destacadas. Deberías adaptar el marcado html a tus necesidades.
<script src='/feeds/posts/default/-/LABEL?alt=...
En este segundo script has de cambiar la cadena textual 'LABEL' por el nombre de la etiqueta que desees emplear para obtener los posts correspondientes a ella. Asegúrate también que el valor del parámetro callback= de este script es el mismo que el de la función mencionada antes function bardialon(r){
Esto es importante porque si quieres mostrar en la misma página "entradas destacadas" de varias etiquetas tendrás que repetir ambos scripts para la otra etiqueta cambiando el nombre de la función.

Estos dos scripts los has de colocar en tu plantilla allí donde quieras que se muestren. Esto es, dentro del elemento que hará de caja padre de tus 'entradas destacadas'.

Y este es el 'entradas destacadas' a la manera #EsCss que yo vengo utilizando en el blog en estos momentos (Diciembre 2015) desde que cambié a esta plantilla.

Y como en la página de inicio del blog abuso del "entradas aleatorias por etiquetas" habrás observado que en otros casos sólo muestro el título. Para esos listados de enlaces empleo otro script que no necesita tanto.

Pero este mejor para otra entrada del blog. Eso sí, recuerda que si lo quieres o necesitas sólo tienes que ver el código fuente y hacerte con él ;-)

Actualización

Por las razones apuntadas por Jorge en los comentarios, el script previo lo modifiqué un poco para facilitar y aligerar la carga de la página así como el ejecutar la llamada al feed de forma asíncrona.

Al usar document.querySelector(''); permite colocar ambos scripts al final del documento y mostrar las entradas en el elemento indicado en entre las comillas.

El código final es el siguiente: [ver en codepen con marcado html de lista en los ítems]

<script type='text/javascript'> //<![CDATA[ function cherrinchales(r){ var elemtShow = '.aside-0'; // el elemento donde mostrar los ítems identificado pos su clase (mejor que sea única) var num_Posts=150; var random_Posts=false; var ver_Sumario=false; var long_Sumario=150; var ver_Imagen=false; var size_Imagen="/s400/"; var sin_Imagen="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aajSJXTQ2LGiL8klM_SZHW4k_5cKJwqSBsDbxxa16LdDwTPIU2pZykgEPu1x-whKB4zI-RnlMxhckWIjba54_fwKqxg8B1TOmpQ59BSM6jKrXyUs9hf4FEmgF22u_-mubrjRaBeSBwo/s400/dragon.jpg"; var src_1=/\/s\d*\//; var src_2=/\/s\d*-c\//; var widgetRWD=document.querySelector(elemtShow); var salidaRWD=""; var t=r.feed.openSearch$totalResults.$t; var f=new Array(); for(var h=0;ht){num_Posts=t} for(h=0;h<num_Posts;++h){ var l=r.feed.entry[f[h]]; var e=l.title.$t; for(var g=0;g<l.link.length;g++){ if(l.link[g].rel=="alternate"){ posturl_Escss=l.link[g].href;break} } if("content" in l){var p=l.content.$t} s=p; a=s.indexOf("<img"); b=s.indexOf('src="',a); c=s.indexOf('"',b+5); d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ var n=d.match(src_1)||d.match(src_2); var o=d.replace(n,size_Imagen); var m=o.replace("http:","https:") } else{var m=sin_Imagen} salidaRWD+='<a class="aleatorio" href="'+posturl_Escss+'"><h3>'+e+'</h3>'; if(ver_Imagen==true){salidaRWD+='<img src="'+m+'" alt="'+e+'"/>'} var q=/<\S[^>]*>/g; p=p.replace(q,""); if(ver_Sumario==true){ if(p.length<long_Sumario){salidaRWD+=p} else{p=p.substring(0,long_Sumario); var j=p.lastIndexOf(" "); p=p.substring(0,j); salidaRWD+='<span>'+p+'...</span></a>'; } } } widgetRWD.innerHTML='<h4>CSS Grid Layout</h4>' + salidaRWD; // Título de la relación de posts }; //]]> </script> <script async='async' src='//escss.blogspot.com/feeds/posts/default/-/NOMBRE_ETIQUETA?alt=json-in-script&callback=cherrinchales&max-results=500' type='text/javascript'/>

avatar del Editor del blog

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.
@Kseso EsCss Kseso