JMiur [E]

Hace unos dias, Gem@ comentaba que en algunos casos, utilizando Json para mostrar resúmenes de entradas, la miniatura que se mostraba era la imagen por defecto aún cuando esa entrada tuviera una imagen.

Algo similar preguntaba shinigami : "¿cómo sabe el sistema qué imagen va a tomar como miniatura que represente la entrada en gadgets o modificaciones como entradas populares, últimas entradas, entradas relacionadas, etc?"

Yo no puedo contestar esa pregunta porque desconozco el método que usa Blogger pero, ese es un dato que se incluye de manera automática y es visible en el código fuente generado (no en la plantilla) ya que se encuentra en una etiqueta:
<link rel="image_src"  href="http://2.bp.blogspot.com/......./s72-c/......." />
En principio, la imagen que toma es la primera que se encuentra en la entrada pero, algunas veces es otra o ninguna; esto puede ser porque el post se haya editado o actualizado o porque se le da lagana; no hay manera de controlar eso sin embargo, podríamos evitar el problema modificando los scripts para que, en lugar de leer ese dato, se lea la lista de imágenes de la entrada y entonces, seleccionar una. Para eso, podemos adaptar parte de un script que mostraba Ariane en un truco que usaba Json para mostrar entradas con ciertas etiquetas.

Supongo que hay muchas variantes de estos scripts pero, en general, usando Json, la imagen de la miniatura la detectábamos así:
if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = imgxdefecto;
}
donde:
imgxdefecto es la URL de la imagen que usaríamos si no se encuentra ninguna
postimg es la URL de la imagen a mostrar

Lo que hace ese código es verificar si existe el dato entry.media$thumbnail.url que es esa imagen que define Blogger y, si no existe, se usa la que nosotros hayamos estabelcido por defecto.

Esa es la parte que cambiaremos así:
var s, a, b, c, d;
postimg = imgxdefecto; // esta es la imagen por defecto que usaremos

s = entry.content.$t; // leemos el código HTML de la entrada
a = s.indexOf("<img"); // buscamos la etiqueta IMG
b = s.indexOf("src=\"",a); // buscamos el atributo SRC de esa etiqueta
c = s.indexOf("\"",b+5); // buscamos el final del atributo SRC
d = s.substr(b+5,c-b-5); // leemos el valor del atributo SRC

// si hay una etiqueta IMG ( a!=-1 ), y tiene un atributo SRC ( b!=-1 ) con un valor ( d!="" )
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
  // quiere decir que encontramos la URL de la primera imagen
  postimg = d;
}

39 comentarios:

Yurika-Chan  

Y esto sirve para facebook, cuando se comparten entradas???

Responder
JMiur  

No, en absoluto.

Responder
Faznet  

Vagabundia un favor necesito que te averigues de esto
http://www.aboutecho.com/arktanliveblogging
es un sistema de comentarios y otras cosas mas pero ami me interesa la parte de comentarios queda muy bien se puede comentar con todos las redes sociales lo que quiero saber si se puede adaptar a blogger yo ya lo intente pero dieron una key pero no se como agregarlo al blog tambien me dan unos Jquerys pero no nada no me sale si podrias hacer un tutorial como adaptarlo a blogger serias lo maximo te lo dejo de tarea segire intentanto por mi parte saludos suerte!

Responder
JMiur  

Faznet:

Lo mire y huí. Lo voy a ver de nuevo con tiempo pero no prometo nada; a simple vista me pareció excesivamente complejo, muy pesado de cargar y pésimamente explicado; ni siquiera estoy seguro de qué parte es gratuita y que parte es de pago.

En fin. Como dije, lo miraré otra vez y tal vez me arrepienta de lo dicho pero no sé, cuando algo es tan "retorcido" y poco claro, siempre dudo.

Responder
Ark  

Jmiur@ Permíteme que me aleje un poco del contenido principal de tu entrada...

Llevo un tiempo plantándome esta pregunta, ¿Es posible incluir algún código en la platilla, para que la primera imagen del post siempre enlace a la posición ---more--- ? causando el mismo efecto que al pulsar el leer más...

Se que se puede hacer manualmente cambiando los enlaces, pero los automatismos me encantan. Creo que en blogs que usan siempre imágenes de cabecera para presentar sus post, sería muy útil esta posibilidad...

A ver que opinas...

Responder
JMiur  

Ark:

Si, seguramente que si pero eso debe hacerse con JavaScript y dependerá de cada caso en particular, de si se usa un script para mostrar los posts resumidos o no, etc.

Responder
Gra  

Genial!!!..Gracias!!!!..
Debo confesar que esperaba esto para probar!!!..jeje.

Ví la página de Gema y veo que todavia no le salen algunas miniaturas...casualmente en esas entradas no hay imagenes sino menues,slides de imagenes, etc...(perdon por mi burdo lenguaje!!)

SALUDOS!!!

Responder
Ariane  

JMiur, você bem podia reunir seus posts sobre o Blogger e publicar um e-book ou livro mesmo. Eu compraria! :D

Sempre aprendendo muito com você, abraços!

Responder
JMiur  

Esto, mostrará la imaen que haya. Por supuesto, si n ohay ninguna, se mostrará la imagen por defecto.

Si n ose ve ni siquiera esa imagen por defecto, es mu yprobable que el post no tenga etiquetas.

Responder
Ark  

Voy a seguir mirando algunos días más, por si encuentro algún script que haga algo parecido. A ver si tengo suerte, de todas formas siempre se puede hacer manualmente....

Gracias jmiur.

Responder
JMiur  

Un abrazo, Ariane :D

Ark:
En el caso de tu blog en particular habría que pensarlo y crear un script específico para detectarlas y cambiarles el enlace que ahora tienen.

Responder
Gem@  

Ariane tiene mucha razón, disponer de los post en e-book sería una gran idea aunque yo me inclino por los libros de papel.
Mi abrazo también para Ariane ;)

Responder
Thor  

Yo también tengo el problema en los post relacionados con miniaturas, hace un par de semanas, pregunté sobre las imágenes que blogger tomaba por defecto para thumbnail.
Luego de leer esta entrada y de revisar el código de mi plantilla, me doi con la sorpresa de que esto ya lo tengo implementado (en los post relacionados con miniaturas) casi tal cual está aquí, pero igual tengo el problema; aunque creo que hay algún error.

Este segmento es lo que tengo en el código. Ya intente borrando moviendo, copiando, pero no pude hacer que funcionara xD

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;
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!="")){
thumburl[relatedTitlesNum]=d;
}
else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
}

Responder
JMiur  

Thor:
No sabría decirte porque desconozco que hace eso de try y catch que se lo que, al parecer, no se ejecuta.

Responder
Gem@  

Olvidé decir que me funcionó de fábula y ahora todas las entradas con imagen la muestran.
Gracias mil :D

Responder
JMiur  

Perfecto, Gem@ :-D

Responder
Adalberto  

Desde que empecé a editar mis posts con el windows live writer me di cuenta que pasaba esto cuando se me ocurría editar para actualizar las entradas. Sin embargo basta pasarse por acá, para poder solucionar los problemas. Te las sabes todas man! Gracias!!

Responder
Martín Rocha  

Jmiur aplique como me recomendaste esta mejora que creaste, la aplique pero ahora me aparece como indefinido tanto el resumen como la miniatura aca.
Se puede solucionar? un saludo que andes bien y muchas gracias.

Responder
JMiur  

Vas a tener que revisar el script; por ejemplo imgxdefecto no está definido, allí deberías colocar la URL de la imagen por defecto.

Responder
Martín Rocha  

Toda la razon JMiur era por el tema de que en este ejemplo vos usas imgxdefecto y en el otro una palabra distinta, lo cambie y ahora si las toma prefecto a las imágenes rpente a alguien que le paso le sirve.
Una consulta JMiur en este tipo de paginaciones http://btemplates.com/2011/blogger-template-sensitivity/demo/ que ya vinenen incluidas hay algun limitante? o sea si no va a llegar un momento en que deja de motrar entradas, un tope o funcionan sin problemas?
Un saludo que andes bien.

Responder
JMiur  

La paginación utiliza lso feeds y los feeds no son infinitos, tienen una capacidad máxima de 500 entradas o un tamaño máximo en megas así que, superado ese valor, no funcionará.

Responder
Martín Rocha  

Muchas gracias Jmiur tenia esa duda si habia mejorado o no al final es elgo que blogger tendria que agregar.
Te queria consultar sobre los botones sociales, la idea es agergar el de facebook y g+ por debajo de la miniatura, algo asi.
Como los deberia de agregar? cualquier cosa este es el blog.
Un saludo que andes bien y mil gracias.

Responder
JMiur  

Simplemente, debes colocarlos en el DIV post-footer y luego ver el estilo.

Responder
Martín Rocha  

Lo aplqiue justo por debajo de ese codigo Jmiur y aparece en ese lugar el de facebook pero no el de G+.
Y por otro lado el like generado el FB en el perfil hace referncia al nombre del blog y no al enlace en si.
Y sobre el estilo decis de meter ello dentro de otro div y darle a este un style no?
Como podria solucionar ello Jmiur, este es el codigo aplicado.
Muchas gracias Jmiur y disculpa mi pesades XD.
Que andes bien.

Responder
JMiur  

EL código del botón de Facebbok es correcto. si miras el código fuente, verás que apunta a la URL de cada entrda y no a una URL genérica.

El botón de Google no lo ves por dos motivos; está debajao y además, está tapado por el de FAcebook que tiene un ancho de 450 pixeles cuando el espacio disponible es de 198.

Responder
Martín Rocha  

Jmiur probe bastante con los botones pero no le encuentro la vuelta.
Reduci el ancho del boton de FB y si deja ver el de G+ peor este solo se muestra una vez y al hacer +1 en el hace referencia a la última entrada de la pagina y no a la que es.
Por otro lado al hacer like en FB si es correcto el enclace pero no la descripcion ni minatura, aqui una imagen de ambas cuestiones.
No se si sera util Jmiur peor mi idea es como la que aplican aqui, alli para el de G+ por ejemplo usan un iframe como el que nombran aca pero no pude agregarlo.
Muchisimas gracias JMiur que andes bien.

Responder
Martín Rocha  

Lo del Facebook no me hasgas caso JMiur je ya estoy siguiendo "Optimizar las etiquetas META para Facebook" =D.
Solo seria lo del G+ XD....saludos.

Responder
JMiur  

Lo que dicen en el sitio al que haces referencia es, simplemente ... una burrada. El IFRAME es generado por el script y es lo que alguno aclara en los comentarios de esa misma entada.

La forma de ponerlo es la indicada acá:
http://vagabundia.blogspot.com/2011/06/el-boton-google-1-en-blogger.html
http://vagabundia.blogspot.com/2011/07/actualizacion-del-boton-google1.html
o utilizando el mismo servicio de Google:
http://www.google.com/webmasters/+1/button/

para que apunte a cada post en el home debe hacerse lo mismo que con Twitter, indicar la URL:
<g:plusone expr:href='data:post.url' size='medium'></g:plusone>

Las miniaturas que envia Blogger a Facebook así como el resumen, no son controlables:
http://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html
http://vagabundia.blogspot.com/2011/08/meta-description-en-blogger-si-o-no.html

Responder
Martín Rocha  

Perfecto JMiur muchas gracias quedaron d10...yo le habia agregado el parametro para que no se vieran en las paginas individuales, si se ven en el home los botones pero al pasar de pagina ya no, como lo podria solucionar?
Otra cosa JMiur, no se si es posible pero el fondo del body tarda en cargar aunque solo es un color, hay forma que cargue antes?
Un saludo y muchas gracias.

Responder
JMiur  

No se qué condición está poniendo.

El fondo de ete blog no es un color sino una imagen
http://movies-1link.blogspot.com/
y l oque tarda horrores en cargarse es el chat.

Responder
Martín Rocha  

Lo de la condicion al final po puede solucionar con esta estrada muchas gracias.
Lo del fondo me referia al del cuerpo de la entrada/sidebar, como que se carga despues de todo siendo que es algo tan liviano como un color y queria saber si era posible hacer que cargue antes.
Saludos JMiur que andes bien.

Responder
JMiur  

Sólo aliviando la carga del resto; header slider, scripts, imágenes.

Responder
Richard Osorio  

jmiur esta opcion sirve para que facebook capture la primera imagen?

JMiur  

No porque ese dato es enviado por Blogger mismo y Facebook lo toma de ahí; no lee JavaScript.

Responder
Axel Cardenas Cardenas  

jmiur yo se que tu eres un astro y me vas a ayudar hace un tiempo que andaba buscando post populares por etiqueta, y afortunadamente lo encontre, pero quiero que ese script muestre una imagen thumbnail al costado del titulo. intente unir lo que dices en este post con el script pero no e tenido mucha suerte.. este es el script si me podrías ayudar estaria muy agradecido. aca te dejo el código.
<script type='text/javascript'>
var blJJTe2=new Array();
var blJJTe4=new Array();
var blJJTe1=new Array();
var blJJTe3;function showrecentposts(j)

{
var a=j.feed.entry.length;blJJTe3=a;for(var f=0;f<a;f++)
{var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate") {g=h.link[d].href;break}}

for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html")
{b=h.link[d].title.split(" ")[0];break}}c=(JTBe)?"<b>"+c+"</b>":c;blJJTe2.push(c);blJJTe4.push(g);blJJTe1.push(b)}
sortPosts();for(var f=0;f<blCantidadJTPost;f++)
{var e='<a href="'+blJJTe4[f]+'" class="recent-link">'+blJJTe2[f]+"</a><br/>";document.write(e)};document.write('')}
function sortPosts()
{function c(d,f){var e=blJJTe2[d];blJJTe2[d]=blJJTe2[f];blJJTe2[f]=e;var e=blJJTe4[d];blJJTe4[d]=blJJTe4[f];blJJTe4[f]=e;var e=blJJTe1[d];blJJTe1[d]=blJJTe1[f];blJJTe1[f]=e}
for(var b=0;b<blJJTe2.length-1;b++)
{for(var a=b+1;a<blJJTe2.length;a++){if(parseInt(blJJTe1[b])<parseInt(blJJTe1[a])){c(b,a)}}}}document.write('<script src="'+blJDireccion+"feeds/posts/default/-/"+bletiqueta+"?max-results="+blNumeroPostFilt+'&orderby=published&alt=json-in-script&callback=showrecentposts"></script>')</script>

JMiur  

No sabría decirte, es un script muy confuso y escrito así mucho peor; habría que analizarlo con cuidado y ver. Tendrías que consultar con quien lo haya hecho que debe estar familiarizado con las variables que ha utilizado.

Axel Cardenas Cardenas  

gracias igualmente :D .. deberias hacer algo parecido a eso :D ciudate mucho siempre leo tus post son muy interesantes

Responder
kawsar  

hello there

i just tried this on a json script on blogger but its not working

please have a look at the script here

http://pastebin.com/AKLLEd2H

LOOK AT LINES
*105
*123

Can you tell me where its going wrong
help much appreciated
thank you

JMiur  

Tendría que verlo funcionando en un ejemplo concreto par poder decirte algo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR