<?xml version="1.0" encoding=""?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>onestic &#187; thumbnail</title>
	<atom:link href="http:///tag/thumbnail/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>blog de onestic</description>
	<lastBuildDate>Thu, 09 Sep 2010 13:02:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Mostrar los thumbnails de los posts en Wordpress 2.9</title>
		<link>/mostrar-los-thumbnails-de-los-posts-en-wordpress-2-9/</link>
		<comments>/mostrar-los-thumbnails-de-los-posts-en-wordpress-2-9/#comments</comments>
		<pubDate>Wed, 20 Jan 2010 17:03:33 +0000</pubDate>
		<dc:creator>Sergio Nieto</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[miniatura]]></category>
		<category><![CDATA[tema wordpress]]></category>
		<category><![CDATA[thumbnail]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wordpress 2.9]]></category>

		<guid isPermaLink="false">http://onestic.com/?p=724</guid>
		<description><![CDATA[Una de las nuevas características incluidas en la nueva versión 2.9 de Wordpress es la de obtener un thumbnail o preview de una imagen para cada post sin necesidad de usar plugins adicionales. De esta forma podemos ponerle una 'carátula' que sea una imagen a cada post que escribamos en Wordpress de una forma rápida [...]]]></description>
			<content:encoded><![CDATA[Una de las nuevas características incluidas en la nueva versión 2.9 de Wordpress es la de obtener un thumbnail o preview de una imagen para cada post sin necesidad de usar plugins adicionales. De esta forma podemos ponerle una 'carátula' que sea una imagen a cada post que escribamos en Wordpress de una forma rápida y sencilla.

Lo primero que debemos tener en cuenta es que la nueva funcionalidad de Magento no extrae automáticamente las imágenes de los posts, si no que al editar la entrada hay que indicar cual es la imagen específica que va a tener como 'Miniatura de entrada'.

1.- Habilitar esta nueva funcionalidad

Para habilitar estas funciones debemos incluir en el fichero functions.php unas líneas de código. Además podemos especificar tamaños adicionales a los que vienen por defecto en Wordpress y que se especifican en el administrador (thumbnail, medium y large). Pongo un código de ejemplo, que además está preparado para hacer nuestro tema compatible con versiones anteriores de Wordpress:

<div class="igBar"><span id="lphp-7"><a href="#" onclick="javascript:showCodeTxt('php-7'); return false;">PLAIN TEXT</a></span></div><div class="syntax_hilite"><span class="langName">PHP:</span><br /><div id="php-7">
<div class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#616100;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span> <a href="http://www.php.net/function_exists"><span style="color:#000066;">function_exists</span></a><span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#FF0000;">'add_theme_support'</span> <span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#FF9933; font-style:italic;">// A partir de la 2.9</span></div></li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">add_theme_support<span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#FF0000;">'post-thumbnails'</span> <span style="color:#006600; font-weight:bold;">&#41;</span>;</div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">set_post_thumbnail_size<span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#CC66CC;color:#800000;">50</span>, <span style="color:#CC66CC;color:#800000;">50</span>, <span style="color:#000000; font-weight:bold;">true</span> <span style="color:#006600; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// Especificamos el tamaño por defecto de los thumbnails</span></div></li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">add_image_size<span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#FF0000;">'thumbnail-para-la-home'</span>, <span style="color:#CC66CC;color:#800000;">400</span>, <span style="color:#CC66CC;color:#800000;">9999</span> <span style="color:#006600; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// Especificamos un tamaño específico que se llamará 'single-post-thumbnail'</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div></li></ol></div>
</div></div><br />

Recordad que este código funcionará sólo con las nuevas imágenes subidas.

2.- Añadir el código para que se muestre la miniatura en la plantilla de Wordpress:

Para añadir el código del thumbnail del post simplemente hay que añadir estas líneas, dejando abierta la opción por si el post no tiene imagen en miniatura o no está habilitada esta función:

<div class="igBar"><span id="lphp-8"><a href="#" onclick="javascript:showCodeTxt('php-8'); return false;">PLAIN TEXT</a></span></div><div class="syntax_hilite"><span class="langName">PHP:</span><br /><div id="php-8">
<div class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#616100;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span><a href="http://www.php.net/function_exists"><span style="color:#000066;">function_exists</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'has_post_thumbnail'</span><span style="color:#006600; font-weight:bold;">&#41;</span> &amp;&amp; has_post_thumbnail<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div></li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">the_post_thumbnail<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#616100;">else</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div></li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#FF9933; font-style:italic;">// ejemplo de código adicional si no hay imagen en miniatura</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#0000FF;">$postimage</span> = get_post_meta<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF;">$post</span>-&gt;<span style="color:#006600;">ID</span>, <span style="color:#FF0000;">'post-image'</span>, <span style="color:#000000; font-weight:bold;">true</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div></li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#616100;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF;">$postimage</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><a href="http://www.php.net/echo"><span style="color:#000066;">echo</span></a> <span style="color:#FF0000;">'&lt;img src=&quot;'</span>.<span style="color:#0000FF;">$postimage</span>.<span style="color:#FF0000;">'&quot; alt=&quot;&quot; /&gt;'</span>;</div></li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div></li></ol></div>
</div></div><br />

Podemos pasarle como parámetro a la función <code class="php plain">the_post_thumbnail() el nombre del tamaño que queremos mostrar en pantalla. Por ejemplo, para obtener las miniaturas en los tamaños estandar de Wordpress podemos usar 'thumbnail', 'medium' o 'large':
<div class="igBar"><span id="lphp-9"><a href="#" onclick="javascript:showCodeTxt('php-9'); return false;">PLAIN TEXT</a></span></div><div class="syntax_hilite"><span class="langName">PHP:</span><br /><div id="php-9">
<div class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">the_post_thumbnail<span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#FF0000;">'medium'</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div></li></ol></div>
</div></div><br /></code>

También podemos usar los tamaños que hemos predefinido anteriormente en el fichero functions.php:
<div class="igBar"><span id="lphp-10"><a href="#" onclick="javascript:showCodeTxt('php-10'); return false;">PLAIN TEXT</a></span></div><div class="syntax_hilite"><span class="langName">PHP:</span><br /><div id="php-10">
<div class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">the_post_thumbnail<span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#FF0000;">'thumbnail-para-la-home'</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div></li></ol></div>
</div></div><br />

Para añadir un estilo específico, podemos usar la siguiente clase en nuestra css:
<div class="igBar"><span id="lphp-11"><a href="#" onclick="javascript:showCodeTxt('php-11'); return false;">PLAIN TEXT</a></span></div><div class="syntax_hilite"><span class="langName">PHP:</span><br /><div id="php-11">
<div class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">.wp-post-image <span style="color:#006600; font-weight:bold;">&#123;</span></div></li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">border: 2px solid <span style="color:#008000; font-style:italic;">#ccc;</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div></li></ol></div>
</div></div><br />

3.- Controlar en detalle el código html del thumbnail del post

La función que pinta la imagen en miniatura del post acepta un array como segundo parámetro cuyos valores usará luego para construir la etiqueta img. Aunque hay algunos atributos, como el título de la imagen, que se crearán automáticamente a partir de los valores de los campos que se completaron cuando se incluyó la imagen como miniatura en el post. La versatilidad de esta función la podemos ver mejor con otro ejemplo de uso:
<div class="igBar"><span id="lphp-12"><a href="#" onclick="javascript:showCodeTxt('php-12'); return false;">PLAIN TEXT</a></span></div><div class="syntax_hilite"><span class="langName">PHP:</span><br /><div id="php-12">
<div class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">the_post_thumbnail<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'medium'</span>, <a href="http://www.php.net/array"><span style="color:#000066;">array</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'class'</span> =&gt; <span style="color:#FF0000;">'alignleft'</span>, <span style="color:#FF0000;">'alt'</span> =&gt; <span style="color:#FF0000;">'alttext'</span>, <span style="color:#FF0000;">'title'</span> =&gt; <span style="color:#FF0000;">'titletext'</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div></li></ol></div>
</div></div><br />

4.- Añadir un thumbnail a los posts

Por último sólo queda configurar los posts para que muestren la imagen en miniatura en nuestra plantilla. Esto se logra accediendo a la edición de un post, y seleccionando la imagen a mostrar (o subiendo una nueva) en el enlace del administrador que aparece a la derecha justo debajo de las categorías.

También podemos especificar directamente que una imagen sea la imagen en miniatura, en la interfaz que nos muestra Wordpress cuando estamos incluyendo la imagen en el post.

<img class="size-medium wp-image-736 alignright" title="uasMiniatura" src="http://onestic.com/wp-content/uploads/2010/01/uasMiniatura-300x126.png" alt="" width="300" height="126" /><a href="http://www.kremalicious.com/2009/12/wordpress-post-thumbnails/" target="_blank"></a><img class="alignleft size-full wp-image-742" title="miniaturaImagen" src="http://onestic.com/wp-content/uploads/2010/01/miniaturaImagen2.png" alt="" width="238" height="58" />
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 413px; width: 1px; height: 1px;">

<code class="php plain">&lt;?php</code>
<div class="line alt2">
<table border="0">
<tbody>
<tr>
<td class="number"><code>2</code></td>
<td class="content"><code class="php keyword">if</code> <code class="php plain">( has_post_thumbnail() ) {</code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table border="0">
<tbody>
<tr>
<td class="number"><code>3</code></td>
<td class="content"><code class="spaces"> </code><code class="php comments">// the current post has a thumbnail</code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table border="0">
<tbody>
<tr>
<td class="number"><code>4</code></td>
<td class="content"><code class="php plain">} </code><code class="php keyword">else</code> <code class="php plain">{</code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table border="0">
<tbody>
<tr>
<td class="number"><code>5</code></td>
<td class="content"><code class="spaces"> </code><code class="php comments">// the current post lacks a thumbnail</code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table border="0">
<tbody>
<tr>
<td class="number"><code>6</code></td>
<td class="content"><code class="php plain">}</code></td>
</tr>
</tbody>
</table>
</div>
<table border="0">
<tbody>
<tr>
<td class="number"><code>7</code></td>
<td class="content"><code class="php plain">?&gt;</code></td>
</tr>
</tbody>
</table>
</div>]]></content:encoded>
			<wfw:commentRss>/mostrar-los-thumbnails-de-los-posts-en-wordpress-2-9/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
