22 de Diciembre de 2009 — Darío Ferrer

The Post Thumbnail

The Post Thumbnail is a new tag which debuts natively with WordPress 2.9. It has the role to display an image next to each entry, either in the index, category, widget, page, or any area that involves a list of items. Its syntax by default is the_post_thumbnail() and it must to be placed within the loop.

After testing the_post_thumbnail () for a while, I have no choice but to support the Bill Robbin’s comment, calling this tag as “a step in the right directions, but still isn’t quite what most of us are looking for”. While their usefulness is beyond doubt, it is also true that the_post_thumbnail () is broken starting from a certain level of requirements.

The common blogger, who 1) tends to avoid all contact with the code and 2) is satisfied with an image next to the post, will find on the_post_thumbnail() a relatively quick solution. But the web designer, developer or advanced blogger need much more than this to satisfy their requirements.

WP Smart Image II

WP Smart Image II is a WordPress plugin whose main task is similar to The Post Thumbnail: show the post and its thumbnail. However, WP Smart Image II was built thinking of the designer and web developer, a point that from the beginning involved a lot of requirements, among whom was given the possibility of modeling the whole structure of the image in one step, while the function is limited to the available data of WordPress system, without addition or accessories.

Surprisingly, many bloggers have found good support in this plugin (hence the construction of a complete graphical interface for ease of use), but what really matters is what it does, how it does and how many steps should takes the user to achieve what he/she need.

Download WP Smart Image II

Comparison between functions

Here are a number of features could be observed when testing both tags the_post_thumbnail() and wpsi(). First, the property is mentioned, and then the procedure needed for each function to achieve the goal:

Thumbnail with link to post:

With The Post Thumbnail:

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

With WP Smart Image II:

1	<?php wpsi() ?>

separador

Thumbnail without a link:

With the Post Thumbnail:

1	<?php the_post_thumbnail() ?>

With WP Smart Image II:

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

separador

Thumbnail with a link to the full size:

With the Post Thumbnail:

1	The option does not exist

With WP Smart Image II:

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

separador

Extract image’s elements:

Suppose you want to individually process each item of this image:

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

With the Post Thumbnail:

1	The option does not exist

With WP Smart Image II:

1 2	<?php wpsi('size=medium&element=width') ?> Result: 300

1 2	<?php wpsi('size=medium&element=height') ?> Result: 274

1 2	<?php wpsi('size=medium&element=title') ?> Result: My title

1 2	<?php wpsi('size=medium&element=alt') ?> Result: Alt text for My Img

1 2	<?php wpsi('size=medium&element=mimetype') ?> Result: image/jpeg

Notice: WPSI II can extract the values of any version of the posted image. E.g, it is possible to post the Thumbnail size, while writing the ‘size=full’ parameter to obtain Full Size elements.

separador

Getting only image URL:

With the Post Thumbnail:

1	The option does not exist

With WP Smart Image II:

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

separador

Getting image size attributes:

With the Post Thumbnail:

1	The "width/height" attribute is automatic and cannot be deactivated

With WP Smart Image II:

1 2	<?php wpsi('wh=css') ?> The attribute is shown as: style="width: 300px; height: 274px;"

1 2	<?php wpsi('wh=html') ?> The attribute is shown as: width="300" height="274"

Notice: if there is not a ‘wh’ parameter, the image will not has the “width/height” attribute.

separador

Assign attributes to the image (class, id):

With the Post Thumbnail:

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

Notice: if there is not a ‘class’ parameter, the image tag returns a default class: class=”attachment-[tamaño] wp-post-image”

With WP Smart Image II:

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

Notice: if there is not a ‘class’ parameter, the image will not have the “class” attribute.

separador

Preparing the function to pass to PHP parameters:

With the Post Thumbnail:

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

With WP Smart Image II:

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

separador

Assign LOTS OF ATTRIBUTES to the image and to its link:

Lets to build this img tag:

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

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

With WP Smart Image II:

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

separador

Showing random thumbnails per post:

With the Post Thumbnail:

1	The option does not exist

With WP Smart Image II:

1	Can be set from the editor box

separador

Setting images for RSS feeds:

With the Post Thumbnail:

1	The option does not exist

With WP Smart Image II:

1	Can be set from the Settings page, including sizes and RSS engines

separador

Feature comparison table

Web development
Feature	the_post_thumbnail()	wpsi()
DB queries per image	3	4
Offers the possibility to handle common task through PHP, saving DB for queries	No	Yes
Choose between return and echo	Yes	Yes
Extract image attributes separately (width, height, mimetype, alt, title, id)	No	Yes
WP 2.8.X compatible	No	Yes
Possibility to delete all generated info from database	Yes (Manually, post per post)	Yes (Per post and globally)
Enlaces
Feature	the_post_thumbnail()	wpsi()
Link to the entry	No	Yes
Link to the full version of the image	No	Yes
Modify target attribute	No	Yes
Define frame targets	No	Yes
Assign CSS class to the link	No	Yes
Assign ID to the link	No	Yes
Assign REL attribute to the link	No	Yes
Images
Feature	the_post_thumbnail()	wpsi()
Show images with and without link	No	Yes
Show random images per post	No	Yes
Assign images that are not attached with the post	Yes	Yes
Assign CSS class to the image	Yes	Yes
Assign ID to the image	Yes	Yes
Assign default images on imageless posts	No	Yes
Choose between showing or not default images	No	Yes
Show/hide/customize width/height attributes	No	Yes
Works with all WP default sizes	No (it exclde the Fullsize)	Yes
Works with WP custom sizes	No	Yes
Assign images to RSS feeds	No	Yes
Choose image sizes on RSS feeds	No	Yes
Choose/discard different kind of RSS engines to show images (RSS/RDF, RSS2 and Atom)	No	Yes
Get only the image URL instead the whole tag	No	Yes
Usability
Feature	the_post_thumbnail()	wpsi()
Editor graphic interface	Yes	Yes
Setting graphic interface	Yes	Yes
Automated functions, easy to apply, without using statin HTML	No	Yes

separador

External references:

The Ultimative Guide For the_post_thumbnail In WordPress 2.9 – WP Engineer

8 comentarios

craig dijo:
4 de Enero de 2010 a las 1:31 am
Great article and it also contained a piece of code I’d been looking for!
Cheers :)
Marina dijo:
25 de Enero de 2010 a las 11:56 am
Hi,
I’m new to WordPress, so sorry if my question is silly! I love your plugin, and I wanted to use it to create a menu of the latest articles in my sidebar, showing not the title of the article but just the first picture. However I cannot configure the plugin! So far what I see is the first image for each article ONLY if I open the article. Imagine I have article 1, 2 & 3 and each has an image related to it, how can I have a sidebar showing the first image of each article ALWAYS?
Thanks!
Darío Ferrer dijo:
25 de Enero de 2010 a las 12:45 pm
Hello Marina,

Sounds like the wp_smart_image() tag is not within the loop yet. Normally the plugin should show the posts + their corresponding images. Can you show me the piece of code you’re using?.
Marina dijo:
25 de Enero de 2010 a las 1:54 pm
Hi Darío, thanks for the support! this is the code as taken from the sidebar:

post->post_parent)) {
$parent = get_the_ID();
$parent_title = get_the_title();
}
else {
$parent = $wp_query->post->post_parent;
$parent_data = get_post($parent);
$parent_title = $parent_data->post_title;
}
$wp_list_pages = wp_list_pages(‘title_li=&depth=1&child_of=’ . $parent . ‘&echo=0′);
}

?>

What do I do wrong? :/
Thanks for your help!
Darío Ferrer dijo:
25 de Enero de 2010 a las 6:24 pm
Hi Marina,

You must to place the tag into a loop (view reference). Also view this screenshot which show you the right location where you must to put it.

On the other hand, the next version 0.1.4 will gives to you the possiblity of locate the tag out of the loop through a new parameter. I’ll release it this week.

Marina dijo:
26 de Enero de 2010 a las 4:05 am

Hi Darío, it looks like there’s something wrong, as my Loop starts as mentioned by wordpress but has no ending. I’m using a pre-built theme.
I’ve now placed it here as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
if (have_posts()) {

// Archive headers
$post = $posts[0];

if (is_day()) {
echo "; the_time(get_option('date_format')); echo '';
}
elseif (is_month()) {
echo ''; the_time('F Y'); echo '';
}
elseif (is_year()) {
echo ''; the_time('Y'); echo '';
}
elseif (is_author()) {
echo 'Author Archive';
}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {
echo 'Blog Archives';
}

while (have_posts()) {
the_post();
?>

Homem Robô dijo:
19 de Mayo de 2010 a las 1:48 pm
Hola!

Como faço para fazer o thumbnail com resize personalizado:

the_post_thumbnail(array(135, 200), array(‘class’ => ‘alignleft’));

Usando o seu plugin?

[]‘s

Homem Robô
Darío Ferrer dijo:
20 de Mayo de 2010 a las 3:31 pm
WPSI não muda o tamanho das imagens. Recomendo que você tente Max Image Size Control. Usá-lo em combinação com WPSI. Você vai ver os resultados. :D

Comentar este artículo

Secciones

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

comentarios recientes

@Andrés en Dictador Micheletti: Haré lo que sea para convencer a Obama: Darío…! y yo queme mataba de la risa viendo cómo los Testigos de...

@Daniel en Dos tips sobre Adobe Reader: Detener AcroRd32Info.exe e impedir actualizaciones automáticas: muchas gracias man!!! genial la info que...

@Sebastian en ¿Joomla Vs. Wordpress? (1ª parte): Hola, excelente artículo, actualmente me encuentro definiendo que CMS usar y ando evaluando entre...

@Alyen en The Post Thumbnail Vs. WP Smart Image II: Gracias Darío, espero tu respuesta. Otra cosa tengo la traduccion desde hace tiempo, te aviso...

@Andrés en Cómo extraer miniaturas de imágenes en Wordpress (2da revisión – Código mejorado): Hola Darío: Ya solucioné mi problema. -...

@Andrés en Cómo extraer miniaturas de imágenes en Wordpress (2da revisión – Código mejorado): Hola a todos: He seguido todos los pasos...

@uri en 240 plugins JQuery: buenas Darío, buena recopilación… estoy buscando un plugin para wordpress que al pinchar a una imagen me la...

@ramon en ¿Joomla Vs. Wordpress? (1ª parte): felicidades por el articulo y por esa capacidad de analisis. Voy a contar mi experiencia y voy a...

Darío Ferrer — Blog personal

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

66 consultas a la BD en 0,757 segundos. Blog alojado en DreamHost

Darío Ferrer - Blog

¿Joomla Vs. WordPress? (1ª parte)

The Post Thumbnail Vs. WP Smart Image II [English]

The Post Thumbnail

WP Smart Image II

Comparison between functions

Thumbnail with link to post:

With The Post Thumbnail:

With WP Smart Image II:

Thumbnail without a link:

With the Post Thumbnail:

With WP Smart Image II:

Thumbnail with a link to the full size:

With the Post Thumbnail:

With WP Smart Image II:

Extract image’s elements:

With the Post Thumbnail:

With WP Smart Image II:

Getting only image URL:

With the Post Thumbnail:

With WP Smart Image II:

Getting image size attributes:

With the Post Thumbnail:

With WP Smart Image II:

Assign attributes to the image (class, id):

With the Post Thumbnail:

With WP Smart Image II:

Preparing the function to pass to PHP parameters:

With the Post Thumbnail:

With WP Smart Image II:

Assign LOTS OF ATTRIBUTES to the image and to its link:

With the Post Thumbnail:

With WP Smart Image II:

Showing random thumbnails per post:

With the Post Thumbnail:

With WP Smart Image II:

Setting images for RSS feeds:

With the Post Thumbnail:

With WP Smart Image II:

Feature comparison table

External references:

8 comentarios

Comentar este artículo

Secciones

Anteriores

comentarios recientes