SlideShow WidgetKit WordPress

Escrito por Jose M Ramirez en . Publicado en Desarrollo Web

SlideShow WidgetKit WordPress

Ya explique anteriormente de que se trata el plugin WidgetKit de YooTheme y sus funciones en general, pero esta vez voy profundizar un poco más en una que puede ser de las más atractivas para nuestros visitantes como es el SlideShow. Lo genial es que este puede ser integrado en cualquier widget de la plantilla como también directamente en las entradas mediante shortcode y gracias a su motor es compatible con la mayoría de los exploradores. ¡Y es gratis! El SlideShow ha se implementado últimamente en muchos sitios como una forma muy elegante de mostrar “Feature Post” en la cabecera del tema, así los visitantes tienen todo el contenido fresco sin bajar la página. Algunos temas lo traen predefinido, sin embargo son limitados los estilos que se pueden aplicar, además de la complicación de usarlo en otros sitios fuera de la cabecera. El SlideShow de WidgetKit rompe con esas limitaciones y te permite configurar el tamaño de las imágenes, la transición, los vínculos y el lugar.

Para crear nuestro SlideShow nos vamos al menú del plugin en la opción ‘SlideShow’ y presionamos ‘Create Your First Slideshow’

01

Automáticamente pasamos a otra pantalla donde lo primero que debemos hacer es colocarle el nombre a nuestro Slideshow que servirá para identificarlo como objeto más no será relevante como título en los widgets o donde lo incrustes, así que puedes usar cualquier nombre solo para ti sin problemas.

02

A continuación vemos una caja de texto idéntica a la que usamos para crear entradas, con título, caja de escritura y un campo adicional llamado ‘Caption’. Al empezar aparece solo uno pero podemos agregar cuantos sea necesario y cada caja de texto será el equivalente a una imagen en nuestro SlideShow, por ende; puede ser configurada de forma individual.

03

Debajo de la caja y al lado del botón para guardar los cambios tenemos otro llamado ‘Add New Item’ que sirve para agregar nuevos campos de texto que serán el equivalente a nuevas imágenes en nuestro SlideShow, lo que es igual a; si vamos a mostrar 10 imágenes en nuestro SlideShow, requerimos 10 cuadro de texto, agregando cada uno con este botón.

04

Pero vamos a armar un SlideShow para hacer más interactivo el ejemplo. Empezamos agregando un título y usaremos la galería de WordPress para subir la imagen que deseamos mostrar. Luego agregamos el caption que desde la última versión de WordPress soporta enlaces y esa descripción será visible para todos en el SlideShow. Luego salvamos los cambios.

Debemos tener en cuenta que todas las imágenes tengan el mismo tamaño, ya que aunque podemos redimensionar la imagen desde la propia galería, si la colocamos del tamaño exacto, ahorramos recursos de servidor y evitamos tener imágenes desproporcionadas que dañan la elegancia del SlideShow.

05

Es todo, solo vamos agregando cuantos ítems sean necesarios como ya explique y subiendo imágenes con sus enlaces y caption para que sean varias imágenes las que mostramos en nuestro SlideShow.
En la configuración tenemos una buena cantidad de cosas para editar y personalizar, pero la más importante es la primera, el estilo del SlideShow.

06

Por defecto nos pone el estilo ‘default’ pero tenemos siete estilos diferentes y podemos usar el que mejor se ajuste a nuestro tema y lo que buscamos mostrar. Veamos todos los estilos uno por uno.

Default

Es un estilo simple pero bonito, depende mucho del fondo de tu tema para sobresalir.

  • 01
  • 02
  • 03
  • 04
  • Esta es la primera imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption
  • Esta es la segunda imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption’
  • Esta es la tercera imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption’
  • Esta es la cuarta imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption’

List

El estilo de lista es el más similar los usados en la mayoría de los sitios, pero debemos poner atención a lo largo de los títulos para no desfigurar el SlideShow.

  • 01
  • 02
  • 03
  • 04

Screen

Este es parecido a una pantalla de tv, posee su propio marco con borde negro.

  • 01
  • 02
  • 03
  • 04
  • Esta es la primera imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption
  • Esta es la segunda imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption’
  • Esta es la tercera imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption’
  • Esta es la cuarta imagen del SlideShow y esta es la descripción que agregamos en el campo ‘Caption’

Showcase Box

Este estilo es más simple e incluye sus botones para ir de una imagen a otra, aunque conserva los de las imágenes.

  • 01
  • 02
  • 03
  • 04

Showcase Buttons

Este es un estilo muy limpio, casi como el Default pero este no integra el caption.

  • 01
  • 02
  • 03
  • 04

Tabs

El estilo Tabs es como su nombre lo indica, al igual que Lista debemos cuidar los títulos.

  • 01
  • 02
  • 03
  • 04

Tabs Bar

Este es igual al anterior, solo que enmarca los títulos en una barra.

  • 01
  • 02
  • 03
  • 04

En las demás configuraciones podemos personalizar el ‘autoplay’, que permite que las transiciones empiecen sin que el usuario interactúe, el ancho y el alto de la imagen que si colocamos nuestra imagen del tamaño exacto que vamos a usar podemos dejarlo en ‘auto’. La duración en milisegundos de la transición y cual imagen queremos se muestre primero

07

Luego tenemos el orden, que nos permite hacer que nuestras imágenes se muestren una tras de otra en el orden que las colocamos o mostrarse en orden aleatorio, saltando una imagen a otra sin importar el orden. Mostrar u ocultar los botones de navegación y escoger entre una gran cantidad de efecto de transición entre las imágenes.

08

Por ultimo tenemos una caja donde mediante drag and drop podemos mover nuestras imágenes para ordenarlas a nuestro gusto.

09

Lo mejor es que podemos usar el Slideshow en varias partes mediante el shortcode, además podemos copiar un slideshow igual que lo hacemos con los módulos en Joomla y ahorrar tiempo para crear otros. Me parece que es uno de los más completos y si quedaron algunas dudas los comentarios están para eso.

Imágenes desde Flirck de Paintball Photos

Etiquetas:

Trackback desde tu sitio.

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs