Adicionar imagem em destaque em postagens únicas

A imagem em destaque de seus arquivos (Post Thumbnail) será extraída da imagem em destaque, independentemente de como você a adiciona na tela Editar Post.

A imagem exibida antes ou depois de seu título de entrada de postagem única é extraída da primeira imagem inserida na postagem, a menos que você a remova.

Você pode remover ou modificar o código que exibe uma imagem antes ou depois de seus títulos de entrada de postagem única usando um dos trechos de código nesta página.

Se você adicionar uma imagem como uma imagem em destaque, ela será exibida em seus arquivos como uma miniatura de postagem e não como uma imagem em destaque após o título de suas postagens únicas.

Se você não adicionar uma imagem em destaque, a primeira imagem em sua postagem será exibida antes ou depois de seus títulos de entrada de postagem única, bem como em suas páginas de arquivo.

Neste post, fornecerei algumas linhas de código PHP que você pode simplesmente colar no final do arquivo functions.php dos seus temas filhos.

O código permitirá que você exiba sua imagem de postagem, antes ou depois de seu título em postagens únicas.

Dan fez esta pergunta recentemente:

Estou quebrando a cabeça pesquisando, usando código diferente encontrado neste fórum e resultando em um novo post.

Usando o Minimum Pro, eu gostaria simplesmente de exibir a imagem em destaque de um post em uma página de “post único”. De preferência acima do conteúdo do texto. Eu encontrei código neste fórum e coloquei em functions.php. É exibida a imagem em destaque, mas simultaneamente eliminou o conteúdo do texto. Então, obviamente, estou fazendo algo errado.

Nota: Por favor, use o último trecho de código PHP neste post se você estiver executando a marcação XHTML antiga e não HTML 5, pois os ganchos foram alterados.

Exibir imagem em destaque após o título

Este código exibe a imagem após o título do seu único post.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Exibir imagem em destaque antes do título

Este código exibe sua imagem antes do título do seu único post.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Exibir imagem em destaque em páginas estáticas

Se você também quiser que isso funcione para páginas únicas estáticas, basta adicionar a página ao código assim:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Exibir imagem em destaque em páginas estáticas e postagens únicas

Se você também quiser que isso funcione para páginas e postagens estáticas, basta adicionar a página ao código assim:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

A posição que sua imagem em destaque exibe pode ser determinada usando o terceiro parâmetro para prioridade de posicionamento.

No código acima é simplesmente uma questão de alterar o 3º parâmetro de 5 para 15.

Alterar tamanho da imagem

Aqui está um exemplo de como usar um tamanho grande de acordo com suas configurações de mídia.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Você também pode usar qualquer um dos outros tamanhos padrão configurados em Configurações > Mídia.

• miniatura
• médio
• ampla
• completo

Você também pode usar qualquer tamanho personalizado adicionado ao seu arquivo de funções.

Exemplo:

portfólio

 add_image_size( 'portfolio', 540, 340, TRUE );

Usando ganchos de loop XHTML antigos

Se você ainda está executando XHTML e ainda não converteu para HTML 5, você precisará usar os antigos Loop Hooks:

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Adicionando espaço entre título e imagem

Aqui está um exemplo de código CSS que você pode adicionar ao final do arquivo style.css de seus temas filhos antes do código para consultas de mídia, que adiciona uma margem entre sua imagem em destaque e o título da entrada em postagens únicas.

 .single .post-image { margin-bottom: 30px; }

Use este exemplo para páginas:

 .page .post-image { margin-bottom: 30px; }

Alinhar a imagem em destaque (pós-imagem) à direita

Você também pode alinhar suas imagens de postagem à direita.

Basta adicionar este código CSS antes de suas consultas de mídia perto do final do arquivo style.css de seus temas filhos:

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

O código acima alinhará a imagem que você adicionar como uma imagem em destaque em todas as postagens únicas à direita do seu conteúdo para que o texto seja agrupado assim:

Você também pode adicionar a classe alignright ao código PHP em vez de usar CSS.

 'class' => 'alignright'

Basta substituir post-image no código PHP por alignright e seu texto irá envolver sua imagem no lado direito do seu conteúdo.

Alinhar imagem em destaque (pós-imagem) à esquerda

Você também pode alinhar suas imagens em destaque de postagens únicas à esquerda.

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

E aqui está o resultado:

Você também pode adicionar a classe alignleft ao código PHP em vez de usar CSS.

 'class' => 'alignleft'

Simplesmente substitua post-image no código PHP por alignleft e seu texto irá envolver sua imagem no lado esquerdo do seu conteúdo.

Remover um link href da imagem em destaque

Um membro me perguntou como remover o link do código, então aqui está:

Basta substituir esta parte do código:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

Com isso:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;

Postagens relacionadas

• 2 maneiras de usar diferentes imagens em destaque para postagens únicas e páginas de arquivo
• Título da entrada sobre a imagem em destaque em postagens únicas
• Caixa de seleção para adicionar ou remover imagens em destaque em postagens ou páginas individuais
• Vincular imagem em destaque ao URL personalizado
• Personalize a exibição de imagens em destaque em postagens únicas
• Adicionar imagem em destaque antes do conteúdo em qualquer tema
• Definir imagem em destaque de fallback para cada categoria