Posts aleatorios configurable por etiqueta, número, extensión del sumario y tamaño de imagen 1.8.15
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 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:
- Selección de artículos por una etiqueta (categoría o label) o entre todos los publicados.
- Longitud, en caracteres, del sumario.
- Tamaño real de la imagen (anchura) mostrada.
- 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
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.
@Kseso EsCss Kseso
Todavía recuerdo la época en que éste era un blog de CSS ...
ResponderEliminar¡Qué tiempos aquellos!
xD xD xD xD xD xD xD xD xD xD xD xD xD xD
EliminarEl contrato nada dice sobre que haya de permanecer impávido e inmutabe.
Además, amigo Furoyatu aportación al cambio no es poca por sólo colaborar con javascript.
xD xD xD xD xD xD xD xD xD xD xD xD xD xD
hola me puedes ayudar con un script auto compartir con solo darle clics a la imagen y automático se le etiquete a mis amigos
ResponderEliminareinsss?
EliminarLa imagen es un enlace, amigo vlad
[img]http://2.bp.blogspot.com/-gLWgeGBScLo/Vbvaednr_iI/AAAAAAAALa8/JygImYkl3Os/s275/adivino.jpg[/img]
si lo se que es un enlace pero necesito un script para compartir poreso es que te pido la ayuda si tu puedes por favor
EliminarLo planteo de otra manera, vlad a ver si tengo suerte:
Eliminar¿estás pidiendo en un blog 99% sobre Css un trabajo a medida de javascript que haga cosas de las que nunca se han tratado en estas páginas?
No parece ser el lugar más adecuado.
Suerte en ello.
Hola, quería preguntarte si conoces alguna forma de ordenar los post en blogger por fecha, ubicando la publicación más antigua al principio y la más reciente al final, pero sin hacer el truco de cambiar las fechas en el borrador.
ResponderEliminarHola Hernestina
EliminarSi la inversión del orden que necesitas hacer es sólo en los X posts mostrados en cada página del home es relativamente sencillo hasta con sólo CSS.
Pero si es para el total del lo posts del blog con código nativo de Blogger lo veo casi imposible.
Podría lograrse tomando como base algún script de los usados para construir sitemaps (como el que uso en este blog y al que dediqué algún artículo).
Pero ello supondría resolver otras cuestiones, algunas abordadas en el blog bajo el concepto de "Blogger extremo" para que en el home no se ejecute el código nativo de Blogger y lidiar con las demoras y costes en la carga entre otras.
Un saludo