English version of this article
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 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.
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:
1 | <a href="<?php the_permalink() ?>"><?php the_post_thumbnail() ?></a> |
1 | <?php wp_smart_image() ?> |

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

1 | La opción no existe |
1 | <?php wp_smart_image('type=direct') ?> |

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" /> |
1 | La opción no existe |
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.

1 | La opción no existe |
1 | <?php wp_smart_image('type=url') ?> |

1 | El atributo "width/height" es automático y no se puede desactivar |
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”.

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”
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”

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

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

1 | La opción no existe |
1 | Configurable desde la caja del editor |

1 | La opción no existe |
1 | Configurable desde el panel de opciones, incluyendo tamaños y motores RSS |

| 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í |

The Ultimative Guide For the_post_thumbnail In WordPress 2.9 – WP Engineer
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.
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.
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') ?> |
?
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.
Carlos, no entendí bien tu planteamiento ¿puedes explicarlo con más detalles?
Excelente plugin, lo estoy probando en local y pienso implementarlo pronto en el nuevo theme que estamos desarrollando.
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.
Dário, como hago para poner una Default image path como tengo q poner el link ?
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).
No pasa nada ^^ contesta cuando puedas.
Ya encontre como se tiene q hacer, mira como quero el theme:
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.
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.
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 !
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!!!
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> |
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.
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!!
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
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.
@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