<?xml version="1.0" encoding="UTF-8"?>
<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>TutoPress &#187; miniatura</title>
	<atom:link href="http://www.tutopress.com/palavra/miniatura/feed" rel="self" type="application/rss+xml" />
	<link>http://www.tutopress.com</link>
	<description>Dicas e tutoriais para seu blog WordPress</description>
	<lastBuildDate>Fri, 26 Feb 2010 22:05:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Adicione thumbnail ao lado dos seus posts!</title>
		<link>http://www.tutopress.com/dicas-e-tutoriais/adicione-thumbnail-ao-lado-dos-seus-posts.htm</link>
		<comments>http://www.tutopress.com/dicas-e-tutoriais/adicione-thumbnail-ao-lado-dos-seus-posts.htm#comments</comments>
		<pubDate>Thu, 03 Sep 2009 17:03:42 +0000</pubDate>
		<dc:creator>Denny Lira</dc:creator>
				<category><![CDATA[Dicas e Tutoriais]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[custom fields]]></category>
		<category><![CDATA[get the image]]></category>
		<category><![CDATA[miniatura]]></category>
		<category><![CDATA[thumbnail]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.tutopress.com/?p=104</guid>
		<description><![CDATA[Recentemente adicionei um novo recurso no meu site, o Informeishion, para exibir pequenas miniaturas ao lado dos meus textos, no entanto, o código que eu utilizava dependia do Custom Fields para exibir as imagens, o que tornava a experiência desagradável. Então, consegui um código diferente que, depois de adicionado no index.php, fazia todos os outros <a href="http://www.tutopress.com/dicas-e-tutoriais/adicione-thumbnail-ao-lado-dos-seus-posts.htm" class="more-link">Mais &#62;</a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.tutopress.com%2Fdicas-e-tutoriais%2Fadicione-thumbnail-ao-lado-dos-seus-posts.htm"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.tutopress.com%2Fdicas-e-tutoriais%2Fadicione-thumbnail-ao-lado-dos-seus-posts.htm&amp;source=tutopress&amp;style=normal&amp;service=bit.ly" height="61" width="50" /><br />
			</a>
		</div>
<p>Recentemente adicionei um novo recurso no meu site, o <a href="http://informeishion.com">Informeishion</a>, para exibir pequenas miniaturas ao lado dos meus textos, no entanto, o código que eu utilizava dependia do <strong>Custom Fields</strong> para exibir as imagens, o que tornava a experiência desagradável.</p>
<p><span id="more-104"></span></p>
<p>Então, consegui um código diferente que, depois de adicionado no index.php, fazia todos os outros passos automaticamente, porém e infelizmente não existia uma maneira correta de customizar o tamanho das imagens a serem exibidas; logo, esse também não valia pra nada. Minutos depois, com a ajuda do <a href="http://www.winnext.com.br/automini-cria-miniaturas-automaticamente-de-seus-artigos">Cadu</a> que descobriu um plugin especifico para isso, consegui colocar as imagens do jeito que queria e com o tamanho que eu queria.</p>
<p style="text-align: center;"><a href="http://www.tutopress.com/wp-content/uploads/2009/09/Thumbnail-nos-posts.png"><img class="size-medium wp-image-105 aligncenter" title="Thumbnail nos posts" src="http://www.tutopress.com/wp-content/uploads/2009/09/Thumbnail-nos-posts-550x172.png" alt="Thumbnail nos posts" width="550" height="172" /></a></p>
<p>No final das contas o resultado foi o da imagem aí em cima. Agora, sem muita perda de tempo, vamos aos passos para ter esse desejável recurso:</p>
<ol>
<li>Baixe o plugin <a href="http://wordpress.org/extend/plugins/get-the-image/">Get the Image aqui</a>;</li>
<li>Descompacte-o e mande-o para o FTP (wp-content/plugins);</li>
<li>Ative o mesmo na página de administração dos plugins e, finalmente, vamos ao código de inserção no index.php:</li>
</ol>
<p>[php]<br />
&lt;img src=&quot;&lt;?php $values = get_post_custom_values(&quot;vthumb&quot;); echo $values[0]; ?&gt;&quot; /&gt;<br />
[/php]</p>
<p>Recomendo que vocês adicionem o atalho acima antes da tag <strong>content</strong>, pois só assim a thumbnail ficará perfeitamente alinhada ao seu texto e em baixo do título do post.</p>
<p>Como somente adicionar o código não resolveria muita coisa, pois a thumbnail ficaria ajustada, mas não ao lado do texto, eu mesmo fiz uma grande gambiarra de códigos com meus míseros conhecimentos (2 anos de PHP, CSS e HTML ), que se resume as seguintes linhas:</p>
<p>[html]<br />
&lt;span style=&quot;padding:3px;margin:5px;float:left;border:1px solid #ccc;padding:3px;width:80px;height:80px;&quot;&gt;&lt;?php if ( function_exists( &#8216;get_the_image&#8217; ) ) get_the_image(); ?&gt;&lt;/span&gt;<br />
[/html]</p>
<p>Vejam que o código de aplicar a função de mostrar a thumbnail já está inserido e antes disso vem minhas gambiarras. Recitando o que eu disse há pouco: Recomendo que vocês coloquem o código acima antes da tag <strong>content</strong>, ou <strong>entry</strong>. Pronto? não, ainda sim tem mais uma coisa que você deve fazer, só que dessa vez dentro de um código do plugin, para que as imagens sejam exibidas na dimensão que você desejar.</p>
<p>Para tanto, você terá de abrir a pasta que baixou do plugin e em seguida executar o arquivo <strong>get-the-image.php</strong> no Bloco de Notas, ou Notepad&#8230; Feito isso, vá até a linha 59 e no lugar de <strong>false </strong>marque <strong>true</strong>; o mesmo procedimento deve ser feito na linha 60. Agora, navegue até a linha 236 e no lugar desse código <strong>&#8220;</strong>$width = &#8216; width=&#8221;&#8216; . $width . &#8216;&#8221;&#8216;;<strong>&#8221; </strong>coloque esse <strong>&#8220;</strong>$width = &#8216; width=&#8221;80&#8243;&#8216;;<strong>&#8220;</strong>. Agora (novamente), vá até a linha 238 e troque esse código <strong>&#8220;</strong>$height = &#8216; height=&#8221;&#8216; . $height . &#8216;&#8221;&#8216;;<strong>&#8221; </strong>por esse <strong>&#8220;</strong>$height = &#8216; height=&#8221;80&#8243;&#8216;;<strong>&#8220;</strong>.</p>
<p>Veja que não precisa ser 80, você pode colocar 100, 200, 500 ou quanto mais desejar. Lembrando que o número que você coloca entre as aspas é automaticamente reconhecido como 80px, ou qualquer número que você colocar, por tanto, não é necessário colocar px após o número. Depois disso é só reenviar o <strong>get-the-image.php</strong> para dentro da pasta plugin no FTP, aceitar a substituíção de arquivos e conferir os resultados na página inicial do seu blog/site.</p>
<p>Enfim, quem descobriu como deixar personalizável o tamanho das imagens e o plugin foi o Cadu, do <a href="http://winnext.com.br">Winnext</a>, valeu ae!</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center">
<ul class="socials">
		<li class="sexy-delicious">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-digg">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-myspace">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-facebook">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-twitter">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-mail">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-comfeed">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-printfriendly">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-netvibes">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
		<li class="sexy-orkut">
			<a href="" rel="nofollow" class="external" title=""></a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://www.tutopress.com/dicas-e-tutoriais/adicione-thumbnail-ao-lado-dos-seus-posts.htm/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
