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
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.
Parabéns, muito interessante!
Pingback: Cómo mostrar la primera imagen de un post en la página principal | Alankun
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.
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.
Muito bom isso… foi muito util para o blog…
Obrigado mesmo continue assim…
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.
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.
Marcelo,
Parabéns…. Ótimo função.
Me ajudou muito !
Abraços
Fala Marcelo,
seguinte, ser eu utilizar a função em uma page ao invez de post, vai funcionar?
Vlw!
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!
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,
Hey Marcelo,
Great function. Is there a way to get it to return the full size image rather than the thumbnail? Thanks!
Hi Drew,
to use the big size image, use ‘high’ as the first parameter of the function. Example:
the_thumb(‘high’);
Regards.
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} />”;
}
}
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
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.
Pingback: Thumbnail sem custom fields e plugins - Tutorials - Sinopse
Pingback: Thumbnail sem custom fields no wordpress - Difluir
Prezados Senhores:
Em functions.php, depois ou antes de qual frase devo incluir esse código?
Os dados já incluídos no meu arquvio function.php e que aguardo um breve retorno de você, por favor, é o seguinte:
”, ‘after_widget’ => ”, ‘before_title’ => ”, ‘after_title’ => ”, )); function popular_posts($no_posts = 6, $before = ”, $after = ”, $show_pass_post = false, $duration=”) {global $wpdb;$request = “SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS ‘comment_count’ FROM $wpdb->posts, $wpdb->comments”;$request .= ” WHERE comment_approved = ’1′ AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = ‘publish’”;if(!$show_pass_post) $request .= ” AND post_password =””;if($duration !=”") { $request .= ” AND DATE_SUB(CURDATE(),INTERVAL “.$duration.” DAY) comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts”;$posts = $wpdb->get_results($request);$output = ”;if ($posts) {foreach ($posts as $post) {$post_title = stripslashes($post->post_title);$comment_count = $post->comment_count;$permalink = get_permalink($post->ID);$output .= $before . ‘ ‘ . $post_title . ‘ ‘ . $after;}} else {$output .= $before . “N�o Encontrado” . $after;}echo $output;} ?>
Thiago,
tem uma solução mais simples para utilizar os thunbnails, dá uma lida nesse artigo que explica tudo certinho: http://imasters.uol.com.br/artigo/15597
Abraço.