soy Kseso y esto EsCSS

Posts aleatorios configurable por etiqueta, número, extensión del sumario y tamaño de imagen

Un script para obtener y mostrar posts al azar. Configurable si se seleccionan por etiqueta o de entre todos los publicados así como el número, extensión del sumario y tamaño de la imagen mostrada.

Posts aleatorios configurable por etiqueta, número, extensión del sumario y tamaño de imagen

·Por Kseso ✎ 8
Posts aleatorios configurable al máximo: Por etiqueta, número, extensión del sumario y tamaño de imagen

Por necesidad para el nuevo tema del blog tuve que dedicar algún rato y muchas búsquedas a un script para mostrar artículos de forma aleatoria. Random post lo llaman en alguna parte.

Y si bien es cierto que hay cientos miles de artículos en la internet dedicados a este tema (muchos de ellos ecos de ecos) todos dejaban algo que desear para cubrir lo que yo necesitaba en esta ocasión.

Había un detalle especialmente doloroso: todos los que encontré (no fueron tantos) que me permitían lograr más o menos lo deseado tenían un fallo: la imagen la cargaban al tamaño natural que tuviese en el artículo y la redimensionaban o bien vía Css o con el atributo width y/o height.

Resultado: Penalización en el rendimiento de la página y deformación de las imágenes.

Y como necesidad obliga no tuve otra que modificar algo ya existente para que hiciese lo que necesitaba.

Funciones del script para post aleatorios configurable al gusto

Las características principales, configurables, de este script para mostrar post aleatorios son:

  1. Selección de artículos por una etiqueta (categoría o label) o entre todos los publicados.
  2. Longitud, en caracteres, del sumario.
  3. Tamaño real de la imagen (anchura) mostrada.
  4. Posibilidad de elegir si mostrar o no cada una de las partes que lo componen:
    • Título
    • Sumario
    • Imagen

El script

Como todas estas realizaciones basadas en Json, necesitamos un primer script para obtener y tratar las partes del feed que nos interesan y un segundo para acceder al feed de la página o blog del que queramos mostrar los posts.

Aquí es donde debería otorgar los créditos de los varios scripts en lo que me he basado para confeccionar éste. Pero sinceramente, son tantos los ecos y réplicas que he encontrado que me resulta imposible saber su fuente.

<script type='text/javascript'> //<![CDATA[ var random_Posts = true; // Activa la aleatoriedad var num_Posts = 1; // Cantidad de entradas a mostrar var ver_Titulo = true; // Mostrar títulos var ver_Sumario = true; // Mostrar sumarios var long_Sumario = 200; // Extensión del sumario var ver_Imagen = true; // Mostrar imagen var size_Imagen = '/s400/'; // Tamaño de la imagen function randomLabel_1(json){ var src_1=/\/s\d*\//; var src_2=/\/s\d*-c\//; var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array(); for(var i=0;i<numPosts;++i){indexPosts[i]=i} if(random_Posts==true){ indexPosts.sort(function(){return 0.5-Math.random()}) } if(num_Posts>numPosts){num_Posts=numPosts} for(i=0;i<num_Posts;++i){ var entry_Ksesocss=json.feed.entry[indexPosts[i]]; var posttitle_Ksesocss=entry_Ksesocss.title.$t; for(var k=0;k<entry_Ksesocss.link.length;k++){ if(entry_Ksesocss.link[k].rel=='alternate'){posturl_Ksesocss=entry_Ksesocss.link[k].href;break} } if("content"in entry_Ksesocss){ var postcontent_Ksesocss=entry_Ksesocss.content.$t } s=postcontent_Ksesocss; 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 z=d.match(src_1)||d.match(src_2); var y=d.replace(z,size_Imagen); var thumburl_Ksesocss=y; } // Imagen de sustitución else var imgreemplazo_Ksesocss='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNDhDwJs4c9Xd1Hfvd4-zCHq5ZvYwnW6lHYyPtKW07eUpwCbPlp8_Vz5OMhreT8tpKJ9SLXITzjG8-OjfnjfLaEIlG6eMIhftNt3t8DhBv1-1AjyJniDKd-fFwJ-GldrWkixAWSFd_fwg/s350/svg.jpg'; document.write('<a class="random_Ksesocss" href="'+posturl_Ksesocss+'">') if(ver_Titulo==true){ document.write('<h3>'+posttitle_Ksesocss+'</h3>'); } if(ver_Imagen==true){ document.write('<img src="'+thumburl_Ksesocss+'" alt="'+ posttitle_Ksesocss+'"/>'); } var re=/<\S[^>]*>/g; postcontent_Ksesocss=postcontent_Ksesocss.replace(re,""); if(ver_Sumario==true){ if(postcontent_Ksesocss.length<long_Sumario){ document.write('<span>'+postcontent_Ksesocss+'</span>'); } else{ postcontent_Ksesocss=postcontent_Ksesocss.substring(0,long_Sumario); var quoteEnd_Ksesocss=postcontent_Ksesocss.lastIndexOf(" "); postcontent_Ksesocss=postcontent_Ksesocss.substring(0,quoteEnd_Ksesocss); document.write('<span>'+postcontent_Ksesocss+'...</span>'); } } document.write('</a>') } } //]]> </script>

Configuración del script

Las opciones configurables están justo al inicio del script con su comentario explicativo. Sólo reseñar que el tamaño real de la imagen mostrada sólo funcionará si las imágenes están alojadas en el servicio de Google que usan los blogs basados en Blogger.

Para seleccionar el deseado sólo se necesita cambiar en la variable var size_Imagen = '/s400/'; el valor 400 por el deseado.

Para acompañar los artículos que no cuenten con imagen el la línea 40 está, como valor de la variable var imgreemplazo_Ksesocss, la ruta a la que quieras usar como sustituta.

El escript lo tienes listo para c&p en el pen de Codepen que te enlazo al final del artículo

El segundo script de acceso al feed

Hecho lo anterior sólo nos resta indicar de qué blog (o página) deseamos obtener los datos y el lugar de nuestro blog donde mostrarlos.

Para obtener los posts del mismo blog en donde usemos el script por una etiqueta concreta usamos el siguiente script

<script src='//feeds/posts/default/-/XXlabelXX?alt=json-in-script&callback=randomLabel_1&max-results=999' />
  • Sustituye el valor XXlabelXX por el nombre de la etiqueta que desees.
  • Si quieres acceder al feed de un dominio distinto al del sitio donde uses el script has de poner la ruta absoluta al inicio del atributo src.

En caso de no querer filtrar por categoría o etiqueta, la dirección cambia ligeramente:

<script src='//feeds/posts/default?alt=json-in-script&callback=randomLabel_1&max-results=999' />

Marcado Html y Estilos

Una nota sobre el marcado html generado por el script: verás que, aprovechando el que Html5 lo permite, cada unidad generada está contenida en un mismo enlace.

Así mismo el título está etiquetado como <h3> y el resumen o sumario como <span>.

Esta sencillez de marcado facilita el crear los estilos necesarios. Sólo cuatro reglas css:

.random_Ksesocss { /* estilos del bloque */ } .random_Ksesocss h3 { /*estilos del título */ } .random_Ksesocss img { /* estilos de la imagen */ } .random_Ksesocss span { /* estilos del sumario */ }

La demo en funcionamiento

Aquí tienes una pequeña demo de este script en funcionamiento en Codepen. Así podrás jugar todo lo que quieras con él sin miedo a romper nada.

See the Pen MwZedx by Kseso (@Kseso) on CodePen.

Ver Demo a Full Script Minimizado

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