Plugin Thumbnail Viewer

Se trata de un plugin instalado por defecto que permite, de una forma muy sencilla, mostrar las imágenes insertadas en entradas y páginas de una forma mucho más atractiva a la hora de hacer click sobre las mismas para verlas en un tamaño mayor. Podemos ver el efecto que se consigue en la imagen siguiente.

 

Ejemplo Thumbnail Viewer

 

Su utilización es muy sencilla, pudiendo distinguir dos formas de utilizarlo.
Si lo que tenemos es la url de una imagen debemos editar una entrada/página utilizando la vista HTML y realizar los siguientes pasos:

 

  1. Insertamos un enlace utilizando la url de la imagen que queremos que se muestre al pulsar sobre la imagen que se verá en la entrada/página. Para ello utilizamos el botón ‘link’.
    Por ejemplo:
    <a href="http://farm4.static.flickr.com/3135/2332248063_b4b32c55e0_b.jpg">

     

  2. Ahora añadimos la siguiente línea al enlace: rel=”thumbnail”. Veamos cómo queda siguiendo el ejemplo anterior:

    <a href="http://farm4.static.flickr.com/3135/2332248063_b4b32c55e0_b.jpg" rel=”thumbnail” >

     

  3. Pulsando en el botón ‘img’ insertamos la url de la imagen que deseamos poner en nuestra publicación. Continuando con el ejemplo anterior:

    <a href="http://farm4.static.flickr.com/3135/2332248063_b4b32c55e0_b.jpg" rel=”thumbnail” > <img src="http://farm4.static.flickr.com/3135/2332248063_b4b32c55e0_m.jpg" alt="Dunny amor" />

     

  4. Por último tenemos que pulsar de nuevo el botón ‘/link’ y finalmente tendremos:

    <a href="http://farm4.static.flickr.com/3135/2332248063_b4b32c55e0_b.jpg" rel=”thumbnail” > <img src="http://farm4.static.flickr.com/3135/2332248063_b4b32c55e0_m.jpg" alt="Dunny amor" /> </a>

     

 

Si observamos el ejemplo anterior podemos ver que la url utilizada en el enlaces es distinta a la url utilizada en la imagen que se muestra en la entrada/página. Esto se debe a que algunas de las páginas que nos permiten almacenar nuestras imágenes, como Flickr, nos permiten elegir entre distintos tamaños de la imagen a la hora de obtener su url y utilizarla en otro lugar. De esta forma ,he mos utilizado la imagen en un tamaño pequeño cuando la hemos insertado en la entrada/página y, posteriormente, hemos utilizado la imagen en un tamaño mayor en el enlace para obtener el efecto mostrado en la imagen anterior.

 

Si con lo que vamos a trabajar es con una imagen que nosotros tenemos en nuestro ordenador debemos editar una entrada/página utilizando la vista Visual y realizar los siguientes pasos:

 

  1. Insertamos la imagen utilizando el botón imagen-6. Para ello basta seleccionar la imagen deseada.

     

  2. En la página de propiedades que nos aparece una vez cargada la imagen pulsamos el botón ‘URL de archivo’ e indicamos el tamaño en el que deseamos que se muestre la imagen en la entrada/página. Se recomienda no utilizar ‘Tamaño completo’ para poder aprovechar al máximo la funcionalidad del plugin.

    imagen-22

     

  3. Pulsamos el botón ‘Insertar en entrada’.

     

  4. Cambiamos la vista de edición a HTML y añadimos la siguiente línea al enlace de la imagen: rel=”thumbnail”.

    <a href="http://diarium.usal.es/ayuda/files/2009/07/monstruos-copia.jpg" rel=”thumbnail” ><img class="alignnone size-medium wp-image-100" title="monstruos-copia" src="http://diarium.usal.es/ayuda/files/2009/07/monstruos-copia-300x125.jpg" alt="monstruos-copia" width="300" height="125" /></a>

, ,

4 Respuestas para Plugin Thumbnail Viewer

  1. boo 3 septiembre 2009 en 0:37 #

    Me sirvió tu explicación, muy bueno el plugin. Saludos!

  2. Dana 14 octubre 2009 en 0:37 #

    Ayuda!. La imagen se abre pero no en la misma pagina, sino en otra ventana y sin ese marco negro.

  3. admin 9 noviembre 2009 en 19:52 #

    Hola Dana, tienes que asegurarte de colocar rel=thumbnail en el enlace de la imagen.

Trackbacks/Pingbacks

  1. gllaxqdo - 23 enero 2010

    gllaxqdo…

    gllaxqdo…