The Post Thumbnail Vs. WP Smart Image II

21 de Diciembre de 2009 — Darío Ferrer

English version of this article

The Post Thumbnail

The Post Thumbnail es una nueva etiqueta que se estrena de forma nativa con Wordpress 2.9. Su función es mostrar una imagen al lado de cada entrada, bien sea en el index, categoría, widget, page o cualquier zona que involucre una lista de artículos. Su sintaxis predeterminada es the_post_thumbnail() y va ubicada dentro del loop.

Luego de trastear un rato con the_post_thumbnail(), no me queda más remedio que apoyar a Bill Robbins en su comentario, ubicando a dicha etiqueta como “un paso dado en la dirección correcta, pero aún está lejos de ser lo que la mayoría estamos buscando”. Si bien su utilidad está fuera de dudas, también es cierto que the_post_thumbnail() se quiebra a partir de cierto nivel de exigencias.

El blogger común, quien 1) tiende a evitar todo tipo de contacto con el código y 2) se conforma con una imagen junto a su entrada, encontrará en the_post_thumbnail() una solución relativamente rápida. Pero el diseñador web, el programador o el blogger avanzado necesitan mucho más de una etiqueta para poder satisfacer sus requerimientos.

WP Smart Image II

WP Smart Image II es un plugin de Wordpress cuya tarea principal es similar a The Post Thumbnail: mostrar la entrada con su imagen. No obstante, WP Smart Image II se construyó pensando en el diseñador y desarrollador web, un aspecto que desde el momento de su concepción involucró un cúmulo de exigencias, entre las cuales se encontraba ofrecer la posibilidad de modelar toda la estructura de la imagen en un solo paso y limitándose exclusivamente a la data presente en el sistema Wordpress, sin añadidos ni accesorios.

Sorprendentemente muchos bloggers han encontrado buen respaldo en este plugin (de allí la construcción de una completa interfaz gráfica para mayor facilidad de uso), pero lo que realmente importa es lo que hace, cómo lo hace y cuántos pasos debe dar el usuario para lograr lo que necesita.

Descargar WP Smart Image II

Comparación entre funciones

A continuación una serie de factores que pudieron ser observados al probar ambas etiquetas the_post_thumbnail() y wp_smart_image(). Se menciona primero la característica y luego se indica el procedimiento que debe realizar cada función para lograr el objetivo:

Miniatura con enlace al artículo:

Con The Post Thumbnail:

1
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail() ?></a>

Con WP Smart Image II:

1
<?php wp_smart_image() ?>

separador

Miniatura sin enlace:

Con The Post Thumbnail:

1
<?php the_post_thumbnail() ?>

Con WP Smart Image II:

1
<?php wp_smart_image('type=single') ?>

separador

Miniatura con enlace a la imagen original:

Con The Post Thumbnail:

1
La opción no existe

Con WP Smart Image II:

1
<?php wp_smart_image('type=direct') ?>

separador

Extraer elementos de la imagen:

Supongamos que deseamos procesar esta imagen para obtener cada elemento de forma individual:

1
<img src="folder/my-img.jpg" width="300" height="274" title="My Title" alt="Alt text for My Img" />

Con The Post Thumbnail:

1
La opción no existe

Con WP Smart Image II:

1
2
<?php wp_smart_image('size=medium&element=width') ?>
Resultado: 300
1
2
<?php wp_smart_image('size=medium&element=height') ?>
Resultado: 274
1
2
<?php wp_smart_image('size=medium&element=title') ?>
Resultado: My title
1
2
<?php wp_smart_image('size=medium&element=alt') ?>
Resultado: Alt text for My Img
1
2
<?php wp_smart_image('size=medium&element=mimetype') ?>
Resultado: image/jpeg

Nota: WPSI II puede extraer el valor de cualquier versión de la imagen publicada. Por ejemplo, es posible publicar el tamaño miniatura y escribir el parámetro ’size=full’ para obtener los valores del tamaño Full.

separador

Obtener URL de la imagen:

Con The Post Thumbnail:

1
La opción no existe

Con WP Smart Image II:

1
<?php wp_smart_image('type=url') ?>

separador

Obtener atributos de dimensiones de la imagen:

Con The Post Thumbnail:

1
El atributo "width/height" es automático y no se puede desactivar

Con WP Smart Image II:

1
2
<?php wp_smart_image('wh=css') ?>
Las dimensiones se muestran como: style="width: 300px; height: 274px;"
1
2
<?php wp_smart_image('wh=html') ?>
Las dimensiones se muestran como: width="300" height="274"

Nota: si el parámetro ‘wh’ no está presente, la imagen no tendrá el atributo “width/height”.

separador

Asignar atributos a imagen (clase, id):

Con The Post Thumbnail:

1
<?php the_post_thumbnail(array('class' => 'foo' , 'id' => 'bar')) ?>

Nota: si el parámetro ‘class’ no existe, la imagen devuelve una clase por defecto: class=”attachment-[tamaño] wp-post-image”

Con WP Smart Image II:

1
<?php wp_smart_image('type=single&class=foo&id=bar') ?>

Nota: si el parámetro ‘class’ no existe, la imagen no tendrá el atributo “class”

separador

Preparar función para paso por parámetros:

Con The Post Thumbnail:

1
<?php $var = get_the_post_thumbnail() ?>

Con WP Smart Image II:

1
<?php $var = wp_smart_image('echo=0') ?>

separador

Asignar FULL ATRIBUTOS a la imagen y su enlace:

Vamos a construir esta etiqueta:

1
<a href="enlace/al-articulo.html" class="link-foo" id="link-bar" rel="my-rel" target="_blank"><img src="folder/my-img.jpg" width="300" height="274" title="My Title" alt="Alt text for My Img" /></a>

Con The Post Thumbnail:

1
<a href="<?php the_permalink() ?>" class="link-foo" id="link-bar" rel="my-rel" target="_blank"><?php the_post_thumbnail(array('class' => 'foo' , 'id' => 'bar')) ?></a>

Con WP Smart Image II:

1
<?php wp_smart_image('class=foo&id=bar&aclass=link-foo&aid=link-bar&wh=html&rel=my-rel&target=blank') ?>

separador

Mostrar imágenes aleatorias por entrada:

Con The Post Thumbnail:

1
La opción no existe

Con WP Smart Image II:

1
Configurable desde la caja del editor

separador

Configurar imágenes para feeds RSS:

Con The Post Thumbnail:

1
La opción no existe

Con WP Smart Image II:

1
Configurable desde el panel de opciones, incluyendo tamaños y motores RSS

separador

Tabla comparativa de características

Desarrollo web
Característica the_post_thumbnail() wp_smart_image()
Consultas a base de datos por imagen 3 4
Ofrece la posibilidad de manejar las tareas repetivivas a través de PHP, ahorrando queries a la base de datos No Sí
Elegir entre return y echo Sí Sí
Extraer atributos individuales de la imagen (alto, ancho, tipo mime, alt, title, id) No Sí
Compatible con versiones 2.8.X No Sí
Posibilidad de eliminar de la Base de Datos toda la información generada por el plugin Sí (Manual, entrada por entrada) Sí (Por entrada y globalmente)
Enlaces
Característica the_post_thumbnail() wp_smart_image()
Enlace al artículo No Sí
Enlace a la imagen original No Sí
Modificar atributo target No Sí
Definir target de marcos No Sí
Asignar clase CSS al enlace No Sí
Asignar ID al enlace No Sí
Asignar atributo REL al enlace No Sí
Imágenes
Característica the_post_thumbnail() wp_smart_image()
Mostrar imágenes con y sin enlace No Sí
Mostrar imágenes de forma aleatoria No Sí
Asignar imágenes no asociadas con el artículo Sí Sí
Asignar clase CSS a la imagen Sí Sí
Asignar ID a la imagen Sí Sí
Asignar imágenes por defecto en artículos sin imágenes No Sí
Elegir entre mostrar o no las imágenes por defecto No Sí
Mostrar/ocultar/personalizar atributos width/height No Sí
Opera con todos los tamaños prestablecidos de imágenes No (excluye el Full) Sí
Opera con tamaños personalizados extra de imágenes No Sí
Asignar imágenes a feeds RSS No Sí
Elegir tamaños de las imágenes en feeds RSS No Sí
Elegir/descartar distintos tipos de feeds para asignar imágenes (RSS/RDF, RSS2 y Atom) No Sí
Obtener sólo la URL de la imagen en lugar de la etiqueta completa No Sí
Usabilidad
Característica the_post_thumbnail() wp_smart_image()
Interfaz gráfica en el editor Sí Sí
Interfaz gráfica de opciones Sí Sí
Funciones automatizadas, fáciles de implementar, sin intervención de HTML estático No Sí

separador

Referencias externas:


The Ultimative Guide For the_post_thumbnail In WordPress 2.9 – WP Engineer

  • Bitacoras.com
  • Meneame
  • Twitter
  • del.icio.us
  • Facebook
  • Digg
  • Technorati
  • BarraPunto

19 comentarios

  • Carlos dijo:
    30 de Diciembre de 2009 a las 4:17 pm

    Una cosa que note es que para que funcione the_post_thumbnail uno debe subir una imagen primero, luego seleccionarla (esto se hizo por si en una entrada habian varias imagenes) pero el problema esta es que si tenemos una sola imagen en la pagina tenemos que subir la imagen, grabar la entrada y luego recien ahi seleccionar el thumbnail.

  • Alyen dijo:
    4 de Enero de 2010 a las 10:59 am

    Olha, me a gostadoi mucho el plugin pero tengo una duda, tengo una web q tine 10años y tengo muchas img antiguas.

    Mi dudas es ¿ si el plugin genera thumbs de los post antiguos ?

    Gracias.

  • Alyen dijo:
    4 de Enero de 2010 a las 11:41 am

    tenho troa pergunta:

    WPSI II puede extraer el valor de cualquier versión de la imagen publicada. Por ejemplo, es posible publicar el tamaño miniatura y escribir el parámetro ’size=full’ para obtener los valores del tamaño Full.

    se pude poder um tamaño exacto en la img, algo asi:

    1
    <?php wp_smart_image('size=200-400') ?>

    ?

  • Darío Ferrer dijo:
    4 de Enero de 2010 a las 4:25 pm

    Hola Alyen,

    Existe un plugin que utilicé hace poco para regenerar las miniaturas de un sitio y funcionó bien. Espero te sirva:

    http://wordpress.org/extend/plugins/regenerate-thumbnails/

    se pude poder um tamaño exacto en la img, algo asi:

    Hasta ahora se obtiene el tamaño real de la imagen. El texto que citaste trata de la extracción de elementos y atributos, por ejemplo el siguiente código:

    1
    <?php wp_smart_image('size full&element=width') ?>

    … te devolverá el valor del ancho en texto plano como: “650″. Revisa este demo para aprender más sobre el parámetro ‘element’.

    Saludos.

  • Darío Ferrer dijo:
    4 de Enero de 2010 a las 4:27 pm

    Carlos, no entendí bien tu planteamiento ¿puedes explicarlo con más detalles?

  • Alyen dijo:
    5 de Enero de 2010 a las 10:12 am

    Darío gracias por la ayuda !

  • Pablo dijo:
    16 de Enero de 2010 a las 2:22 pm

    Excelente plugin, lo estoy probando en local y pienso implementarlo pronto en el nuevo theme que estamos desarrollando.

  • Pablo dijo:
    18 de Enero de 2010 a las 6:00 am

    Ya está en funcionamiento el plugin en el nuevo theme de Sonicbyte, realmente es mucho más de lo que esperaba. Felicitaciones y gracias por tu trabajo.

  • Alyen dijo:
    19 de Enero de 2010 a las 1:34 pm

    Dário, como hago para poner una Default image path como tengo q poner el link ?

  • Darío Ferrer dijo:
    20 de Enero de 2010 a las 1:39 pm

    Ante todo ofrezco disculpas por la tardanza en la aprobación de comentarios. Estuve ausente un tiempo.

    Pablo! qué bonito quedó el theme. Me encantan esas tonalidades. Y por supuesto me alegra que hayas encontrado buena solución en el plugin. Cualquier duda házme saber.

    Alyen, sólo debes apuntar la URL al directorio donde tienes los archivos :D. Una buena guía de cómo hacerlo es presionar el botón “Llenar/Restaurar datos”, el cual poblará el formulario con algunos datos predeterminados (incluyendo los enlaces a la imagen por defecto).

  • Alyen dijo:
    22 de Enero de 2010 a las 12:08 pm

    No pasa nada ^^ contesta cuando puedas.

    Ya encontre como se tiene q hacer, mira como quero el theme:

    Games Planeta Informática

    sola una duda mas, se puede excluir las thums de una categoria ?

    —–

    Otra cosa si quieres puedo hacer la traducción al português del plugin, y luego hacer un post de destaque en mi pagina de ayuda para wordpress, que es esta: Ajuda WordPress

    Saludos.

  • Darío Ferrer dijo:
    22 de Enero de 2010 a las 1:49 pm

    Hola Alyen,

    No pasa nada ^^ contesta cuando puedas.

    El botón que te mencioné está ubicado en la parte inferior izquierda de la página de opciones. Una vez lo presionas, verás que el formulario se llena de datos predeterminados, entre los cuales se encuentran las rutas hacia algunas imágenes por defecto que vienen con el plugin. Igulamente puedes cambiar libremente esas rutas hacia el directorio que desees.

    Ya encontre como se tiene q hacer, mira como quero el theme:

    Games Planeta Informática

    Ya veo. Lo puedes hacer fácilmente agregando la etiqueta wp_smart_image() dentro del loop, mientras le das los estilos necesarios.

    sola una duda mas, se puede excluir las thums de una categoria ?

    Sí se puede. Sólo debes ayudarte de la condicional necesaria, por ejemplo:

    1
    <?php if(!in_category('32')) wp_smart_image() ?>

    Con eso estarás indicando que no ejecute la función en la categoría con ID “32″.

    Otra cosa si quieres puedo hacer la traducción al português del plugin, y luego hacer un post de destaque en mi pagina de ayuda para wordpress, que es esta: Ajuda WordPress

    Saludos.

    ¡Excelente, qué buena noticia! Una vez lo hayas traducido, por favor envía los archivos .mo y .po en portugués al correo especificado en el plugin. Muchas gracias por tu colaboración Alyen.

    Saludos.

  • Alyen dijo:
    22 de Enero de 2010 a las 1:56 pm

    Dário muchas gracias otra vez por la ayuda, ahora saldra las thumbs para las noticias nuevas y las thumbs la categorias video.

    Bueno ya te enviare las los archivos los mas rapido possible.

    Saludos !

  • 23r9i0 dijo:
    10 de Febrero de 2010 a las 6:25 pm

    Hola Dario!!
    Lo primero decirte que este plugin es fantastico pero yo solo necesito usar una opcion de tu plugin y me preguntaba si sabes la posibilidad de hacerlo sin el plugin.
    Te explico:
    Estoy creando un nuevo theme y uso el plugin FancyBox for Wordpress que permite el ver la imagen en toda la pantalla añadiendo la class lightbox al enlace de la imagen (aunque estoy pensando de añadirlo directamente al theme ya que tiene funciones ajax incorporadas) pero la funcion has_post_thumbnail no me permite usar la url de la imagen con el efecto de no poder usarlo, basicamente si pudieses decirme como podria cambiar eso para que lo haga en todas las imagenes que aunque esten en miniatura muestre la url de la imagen.
    Gracias!!!

  • 23r9i0 dijo:
    10 de Febrero de 2010 a las 6:48 pm

    Disculpa pero te añado un codigo que consigo extraer la url pero solo cuando esta en miniatura pero si entro en la pagina de la entrada sale de nuevo la url de la entrada.

    1
    2
    3
    4
    5
                <a href="<?php
    $thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ), 'thumbnail' ) ;
    echo $thumbnail[0]; ?>">
                <?php the_post_thumbnail( array( 75, 75 ), array( 'class' => 'alignleft lightbox' ) ); ?>
                </a>
  • Darío Ferrer dijo:
    10 de Febrero de 2010 a las 9:10 pm

    Hola 23r9i0, si el sistema sólo te envía la URL de la miniatura es porque estás especificando que sea así. Para el tamaño medio, por ejemplo:

    1
    $thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ), 'medium' ) ;

    Recuerda que los tamaños son: ‘thumbnail’, ‘medium’, ‘large’ y ‘full’. Puedes usarlos todos en la función que muestras.

  • 23r9i0 dijo:
    11 de Febrero de 2010 a las 8:27 am

    Hola y gracias por contestar tan rapido.
    Pero creo que no me entendistes, me refiero que me gustaria usar el lightbox en la pagina de la entrada pero al no añadir la imagen en la entrada sino solo una miniatura cuando el content actua la imagen se añade automaticamente pero con la url de la pagina de la entrada y es hay donde quiero añadir la url de la imagen de la miniatura.
    Saludos!!

  • Andrés Miranda dijo:
    22 de Febrero de 2010 a las 10:27 am

    Dario, primero que nada Felicitaciones. He tratado de jugar con TimThumb, pero cuando veo la url generada me dan inmediatas nauseas.

    He encontrado la función que viene con WP 2.9, y viendo WP Smart Image sin duda es la mejor opción. Aunque no logro encontrar en específico la solución a lo siguiente:

    Imaginemos que tengo un sitio de real estate o x sitio donde necesite mostrar varias thumbnails por post (para luego su respectivo lightbox, o una galería con hoverzoom) para ver la imagen en grande.

    No logro encontrar solución ya que siempre se habla de una imagen (un thumbnail) por post.

    Cuentame que puedo hacer!

    Atte,

    Andrés M

  • Darío Ferrer dijo:
    1 de Marzo de 2010 a las 4:40 pm

    Hola Andrés,

    Disculpa el retraso en la respuesta; me ha faltado tiempo para darle un “cariñito” al blog.

    Te comento que hace algún tiempo discutíamos acerca de implementar la opción de habilitar más de una imagen para mostrar. Lo que relatas tiene pleno sentido; intentaré implementar la función en la próxima versión del plugin.

    Saludos.

Comentar este artículo

Nombre (Requerido)

Correo (No será publicado) (Requerido)

Sitio web

Secciones

Enlaces externos, HTML y CSS, Impresos, Joomla, La foto, Notas, PHP, Política, Portada, Recursos, Religión, Videoteca y Wordpress.

Anteriores

comentarios recientes

@Jk en ¿”WatchTower” o “CashPower”?: Hola! Solo queria decirte algo de corazon, no soy testigo, pero muchas veces...

@Glass en ¿Joomla Vs. Wordpress? (1ª parte): Muy interesante post, aunque algo parecido leí en alguna parte pero en inglés, aunque aquí se tocan...

@Ricardo Olivera en ¿Joomla Vs. Wordpress? (1ª parte): Muy interesante el post y los comentarios. Yo quiero poner una tienda tipo carrito de...

@Antonio García en ¿Joomla Vs. Wordpress? (1ª parte): Creo que la comparación no debería tomarse tan literalmente, creo que muchos usuarios no tan...

@Daniel Gonzalez en ¿Joomla Vs. Wordpress? (1ª parte): Sobre la comparación de lo que puede o no puede hacer wordpress y joomla, sería interesante...

@Bandolera en ¿Joomla Vs. Wordpress? (1ª parte): Hola chicos malos: Según he leido el artículo y los comentarios dejados, me doy cuenta que en...

@ABTOP en Construir letras capitulares en Wordpress. Parte I – PHP: Similar, but slightly different approach: http://newrussianamerica.co...

@claudia santiesteban hernandez en Malos consejos: yo tengo una enemiga por mis espaldas y hasta le tengo y me quito a angel eso me da miedo y...

Darío Ferrer — Blog personal

Sitio desarrollado con Wordpress, software libre para un mundo libre.

62 consultas a la BD en 0.842 segundos. Blog alojado en DreamHost