the_thumb

Ordenando o posicionamento das imagens

Ordenando o posicionamento das imagens

Desde quando comecei a trabalhar com WP a funcionalidade mais requisitada foi sempre inserir uma imagem nas chamadas dos posts. Para isso criei uma função que puxa, do banco de dados, a primeira imagem de um post. Apartir da versão 2.6 do WP é possível ordenar as imagens do post através de um drag’n drop nas opções de galeria, como mostra a imagem ao lado, sendo assim, basta arrastar para a primeira posição a imagem que quer usar. Essa imagem não precisa necessáriamente estar sendo utilizada no conteúdo do post, apenas ter sido anexada a ele.

Para utilizar essa função, abra o arquivo functions.php do seu tema, e depois cole o código abaixo.

function the_thumb($size = "medium", $add = "")
{
  global $wpdb, $post;

  $thumb = $wpdb->get_row("SELECT ID, post_title FROM {$wpdb->posts} WHERE post_parent = {$post->ID} AND post_mime_type LIKE 'image%' ORDER BY menu_order");

  if(!empty($thumb))
  {
    $image = image_downsize($thumb->ID, $size);

    print "<img src='{$image[0]}' alt='{$thumb->post_title}' {$add} />";
  }
}

Essa função funciona como uma template tag do WordPress, basta chamá-la no local do seu tema onde você quer que a imagem apareça, opcionalmente você pode escolher o tamanho da imagem ($size) e adicionar alguns parâmetros à tag da imagem ($add), como classes, largura, altura, etc.

Acho que é mais fácil mostrando uns exemplos.

1. Mostrar a imagem no tamanho médio (padrão 300 x 300) sem nenhum dado adicional:

<?php the_thumb('medium'); ?>

Resultaria em:

<img src='http://seusite.com/caminho/da/imagem-300x300.jpg' alt='titulo-da-imagem' />

2. Carregar uma miniatura da imagem (padrão 150 x 150) com a classe ‘alignleft’:

<?php the_thumb('thumbnail', 'class="alignleft"'); ?>

Retornaria:

<img src='http://seusite.com/caminho/da/imagem-150x150.jpg' alt='titulo-da-imagem' class='alignleft' />

3. Forçar uma imagem média a um tamanho diferente:

<?php the_thumb('medium', 'width="300" height="275"'); ?>

Apresentaria:

<img src='http://seusite.com/caminho/da/imagem-300x300.jpg' alt='titulo-da-imagem' width='300' height='275' />

Notem que forçando um tamanho para uma imagem apenas altera seu tamanho via html, o que pode distorcer a imagem se não for usado proporcionalmente.

Tela de configuração de mídia

Tela de configuração de mídia

Também é importante lembrar que é possível definir o tamanho das imagens nas configurações do WordPress, para isso vá em ‘Configurações > Mídia’ e altere as medidas a seu gosto.

Esses dias vi um artigo no wprecipes que mostrava como pegar a primeira imagem de um post e mostra-la, o problema da função deles é que ela exige que a imagem esteja no conteúdo do post o que muitas vezes não é interessante, primeiro pois força o autor a usar uma imagem no conteúdo e segundo por que a imagem que aparece na chamada tem sempre que ser a primeira que aparece no post.


Deixe um Comentário










Comentários RSS

17 comentários

Marcelo Mesquita

Denny,
a partir da versão 2.9 o WordPress adicionou o suporte aos thumbs. Tem um artigo do Leandro Vieira explicando com utilizar esse novo recurso que atende a sua necessidade de utilizar a imagem independente do post.

Abraço.


Denny

Boa noite, estou com um problema pareciso, que é: quando uma imagem está já em outro post, não consigo aproveitar a mesma para um outro post, tenho que carregar a mesma imagem novamente ou outra, e acontece que isso vai duplicando imagens na biblioteca, tenho 10 15 cópias de uma mesma imagem.. tem alguma solução pra isso


Flavio Henrique

Para quem teve problemas na versão 2.7 do Wordpress, segue uma pequena alteração:

WHERE ID = ($post->ID – 1)

O que ocorre que nesta versão o campo “post_parent” fica com valor 0, assim não retornando nenhuma resultado.

A alteração é buscar o ID do post -1, que é o ID correspondente ao anexo da imagem. Ex, o ID do seu post é o 21, ele irá buscar pelo ID 20 que correspondem a imagem. Segue código completo:

function the_thumb($size = “medium”, $add = “”)
{
global $wpdb, $post;

$thumb = $wpdb->get_row(”SELECT ID, post_title FROM {$wpdb->posts} WHERE ID = ({$post->ID} – 1) AND post_mime_type LIKE ‘image%’ ORDER BY menu_order”);

if(!empty($thumb))
{
$image = image_downsize($thumb->ID, $size);

print “post_title}’ {$add} />”;
}
}


Marcelo Mesquita

Hi Drew,
to use the big size image, use ‘high’ as the first parameter of the function. Example:
the_thumb(’high’);

Regards.


Drew

Hey Marcelo,
Great function. Is there a way to get it to return the full size image rather than the thumbnail? Thanks!


Denis Forigo

Oi Marcelo!

estou tentando adicionar essa função ao thematic, através dos “theme filters” dele, mas sem sucesso… tem alguma idéia de como fazer isso? Conhece o Thematic?

abraços,


Marcelo Mesquita

E aê Marcelo,
funciona sim, essa função buscas os arquivos de imagem anexados à tabela posts, onde se encontram tanto as páginas quanto os posts.

Abraço!


Marcelo César

Fala Marcelo,

seguinte, ser eu utilizar a função em uma page ao invez de post, vai funcionar?

Vlw!


Filipe Siciliano

Marcelo,

Parabéns…. Ótimo função.

Me ajudou muito !

Abraços


Marcelo Mesquita

Olá parente…
que bom que esta função está te servindo. Ela busca o endereço da imagem direto no banco de dados, se você altera a configuação da imagem, é preciso fazer o upload novamente para que os novos parâmetros comecem a valer.

Abraço.


Sigales

Olá!
Primeiramente, parabens pela função! Esta sendo de muita valia.
Estou com uma pequena dificuldade, quando altero o tamanho das imagens nas configurações>midia esta função não localiza a imagem.

Exemplo:
thumbnail: 150×200
a função continua a procura pela imagem 150×150.

ps.: tbm sou mesquita!

Aguarco contato.


Vitor

Muito bom isso… foi muito util para o blog…
Obrigado mesmo continue assim…


Marcelo Mesquita

Hi Luke,
this function has no dependencies, you just have to put it on functions.php file then call <?php the_thumb(); ?> as a template tag in your theme. That function returns the image attached from your post, not necessarily on the content.

If you continuing have problem, send me a link with a example so is easier to debug.

Thanks.


Luke Stempien

Hi Marcelo Mesquita,

I’m having difficulty getting your code to return my thumbnails. Any suggestions or are their any dependencies? I’m not getting any php errors so at least that’s a start.

If I change

if(!empty($thumb))

to

if(empty($thumb))

it will return

in the generated html page so I guess it’s just not seeing any images associated with the posts?

Much appreciated, this is exactly what I was looking for.


Guilherme

Parabéns, muito interessante!


TrackBack

TrackBack

Thumbnail sem custom fields e plugins - Tutorials - Sinopse

[...] vi esse código no blog do Marcelo Mesquita e só adicionei no final do código o else pra mostrar uma imagem caso o post não tenha nenhuma. [...]


Cómo mostrar la primera imagen de un post en la página principal | Alankun

[...] existe otra función, que personalmente, me gusta más. Fue desarrollada por Marcelo Mesquita, un desarrollador Web. Este código usa las miniaturas generadas automáticamente por WordPress, y [...]