JMiur [E]

Panoramio es un sitio donde los usuarios pueden explorar el mundo a través de fotografias subidas por los miembros de la comunidad. Hace tiempo fue comprado por Google y en estos días, Blogger in Draft ha anunciado que hay un API que nos permite integrar un widget a cualquier blog.

A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:
http://www.panoramio.com/wapi/template/photo.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/slideshow.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/list.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/photo_list.html?opcion1&opcion2&opcion3 ...
La primera opción es la unica obligatoria y la más importante: el tipo de fotos a mostrar y para eso, podemos seleccionar un usuario (user=IDusuario), una categoría (tag=categoria) o simplemente seleccionamos alguna palabra genérica como set=all, set=public, set=recent. Algunos ejemplos:
http://www.panoramio.com/wapi/template/photo.html?tag=sea
http://www.panoramio.com/wapi/template/slideshow.html?user=98350
http://www.panoramio.com/wapi/template/list.html?set=public
http://www.panoramio.com/wapi/template/photo_list.html?set=recent
El resto de las opciones definen la forma de mostrar el widget y son optativas:
  • width y height establecen el tamaño
  • bgcolor es el color de fondo (formato hexadecimal donde reemplazamos el caracter # por %23; por ejemplo, %23FFFFFF es el color blanco)
  • columns y rows son la cantidad de columnas y filas en los widgets de tipo lista
  • orientation indica si se las listas se mostrarán de manera vertical u horizontal
  • list_size es la cantidad de imágenes en el widget de tipo photo_list
  • position es la posición de la foto en el widget de tipo photo_list
  • delay es el tiempo del efecto en el widget de tipo slideshow
Así que, seguimos agregando las opciones para construir la URL final:
http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921
http://www.panoramio.com/wapi/template/slideshow.html?user=98350&opcion2&delay=1.5
http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal
http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344
Ya está, ahora, podemos insertar el IFRAME:
<iframe src="la_URL_generada" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="valor" height="valor"></iframe>

WIDGET PHOTO


<iframe src="http://www.panoramio.com/wapi/template/photo.html?tag=sea&amp;bgcolor=%23101921" frameborder="0" width="400" height="400" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

WIDGET SLIDESHOW

<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?user=98350&amp;delay=1.5&amp;bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="400" height="400"></iframe>

WIDGET LIST


<iframe src="http://www.panoramio.com/wapi/template/list.html?set=public&amp;width=280&amp;height=140&amp;rows=2&amp;columns=4&amp;orientation=horizontal&amp;bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

WIDGET PHOTO LIST


<div style="-moz-border-radius:10px;-moz-box-shadow:0 0 10px #DDD inset;background-color:#234;border:2px solid #ABC;height:425px;margin:0 auto;padding:15px 15px 0;width:425px;"><iframe src="http://www.panoramio.com/wapi/template/photo_list.html?set=recent&amp;position=right&amp;list_size=8&amp;bgcolor=%23223344" width="425" height="410" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></div>

REFERENCIAS:Dicas Blogger

11 comentarios:

Graciela  

Huyyy qué bonito Jmiur, me gusta mucho el slidehow :)

Te hago una pregunta fuera del tema total, hoy me he desperato ante que las gallinas, veo en Mozilla todo cambiado, softonic? buscar web, jugar, tv gratis. Eso lo ha incluído, o es algo venido del más allá?

Responder
J.Guti  

J.Miur Genial por tu plantilla.Me gustaria si me puedes indicar como has hecho para poner la flechita hacia abajo para abrir y expandir las entradas y posteriormente a la inversa para cerrarlas, en vez del +y-.ya que el resto de la plantilla ya la tengo.Gracias por tu ayuda

Responder
Malina  

Hola!
una buena opción para simplicar la insercción de sliders. No conozco el servicio, pero se pueden crear albumnes diversos? para mostrar widgets independientes para cada album?

Y ahora una consulta off-topic que necesito y es a lo que yo venía, jeje.
Tengo un blog al que debo cambiar todas las fuentes, a Trebuchet. Y aunque he ido cambiando las variables, contenido de los posts, sidebar, widgets, etc... siempre por algún sitio aparece la fuente antigua.

Se puede hacer algo para que todo el contenido cambie a una fuente concreta? oséa alguna instacia que tenga importancia por encima de las demás y afecte a: header, main, sidebar, footer, vamos... al blog completo! :)

Un abrazo!

Responder
Malina  

más trabajillo que vengo a darte ;) te cuento...

tengo las entradas resumidas en malinamaniac, podría ser que eso dejase de funcionar para algunas entradas en concreto?
crees que se podría incluir algún código en esas entradas para que no le afectase el script de leer más?
pienso que quizá incluyendo un condicional al script para esos casos, no sé... el experto eres tú.
Esto no me urge, pero es importante que lo pudiese hacer para estas entradas ya que resumidas pierden toda la utilidad del formato que elegí para publicar recursos.

Ya me contarás... no urge!
Un abrazote y como siempre gracias por tu ayuda :)

MaLiNa

Responder
JMiur  

Graciela: ¿Cómo es eso, Graciela? ¿Dónde ves eso?

J.Guti: Simplemente, cambias el texto del enlace por una imagen cualquiera usando la etiqueta IMG.

Malina: Es un servicio que tiene bastante tiempo online y Google lo compro hace unpar de años si mal no recuerdo. Creo que si, que se pueden crear diferentes albums y en el post he puesto varios juntos sin problema, son independientes. No conozco los detalles porque no tengo cuenta en Panoramio.

Lo de las fuentes se puede pero no se puede; puedes definir las fuentes de este modo:

body {font-family:Trebuchet MS,Trebuchet,sans-serif;}
a, a:visited, a:link {font-family:Trebuchet MS,Trebuchet,sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family:Trebuchet MS,Trebuchet,sans-serif;}

para abarcar todo pero, aún así, si luego, hay alguna definición posterior, también deberás cambiarla. Podrías probar agregarle a esas tres que te digo, la palabra !Important:

body {font-family:Trebuchet MS,Trebuchet,sans-serif !important;}
a, a:visited, a:link {font-family:Trebuchet MS,Trebuchet,sans-serif !important;}
h1, h2, h3, h4, h5, h6 {font-family:Trebuchet MS,Trebuchet,sans-serif !important;}

Así, salvo que haya otro !important posterior, fuerzas ese cambio.

Lo de no resumir ciertas entradas, creo que es posible. no sé exactamente cómo es la plantilla así que sólo te doy la idea. Lo que deberías hacer ese eso, condicionarlas y eso es lo "complicado" o engorroso ya que vas a tener que repetir muchas veces los códigos pero, el condicional sería este:

<b:if cond='data:blog.url == &quot;DIRECCION_URL_DEL_POST&quot;'>
... esto sólo se ejecutará en este post y nada más que en este post ...
</b:if>

Responder
Malina  

JMiur gracias por las respuestas.
Lo de las fuentes clarisimo, lo de condicionar la entradas, genial que se pueda hacer aunque me quedan dudas de como.
Otro día vuelvo a darte un poquito de guerra y te lo planteo, para dosificarte el trabajo, jajaja

Gracielaaaaaa un besazo! que hace mucho que no te digo nada, mamitaaaaaa!!

Mua y remuas para ambos.

Responder
JMiur  

No será sencillo pero, es posible, Malina. Paciencia :D

Responder
Graciela  

Te envié un correo, no recuerdo lo que me dijiste cuando tuve otro problemita parecido. Volver al día anterior, no recuerdo.

Está todo muy loco, blogger era mejor con la vista previa anterior, ahora carga el blog para hacerlo! bueno no me voy a quejar por éstas pavadas...aunque...pensándolo Hoy estoy quejosa :)

Responder
JMiur  

Recibido el mail. Creo que ya todo está normal. Siga quejándose que eso evita la úlcera :D

Responder
Graciela  

Muchas gracias! chuchi cuchi jajaja todo solucionado :P
Úlcera, por ahora no ha aparecido acidéz.

Responder
JMiur  

:D :D

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