web-dev-qa-db-fra.com

Afficher les propriétés de hauteur et de largeur avec the_post_thumbnail () ou une fonction associée

Problème

Je veux les propriétés height et width dans l'élément img de l'image sélectionnée pour un article, une page ou un type d'article personnalisé.

Environnement

  1. J'ai un thème personnalisé basé sur le thème BlankSlate .
  2. Le nouveau thème vingt-quinze ne présente pas non plus les propriétés.
  3. Dans Paramètres/Média, je n’ai pas modifié les tailles d’image par défaut.
  4. functions.php contient add_theme_support( 'post-thumbnails' );.
  5. Je n'ai pas de taille d'image personnalisée.
  6. Dans Paramètres/Média, la case "Rogner la vignette aux dimensions exactes" est non cochée. Par conséquent, j'ai des vignettes qui ne sont pas exactement 150 px x 150 px.
  7. Éditer: Je veux toujours les autres propriétés automatiques des fonctions de l'image sélectionnée, telles que alt et class.

Courant de sortie

À partir de cette page exemple sur mon site Web , le code HTML complet pour l’image sélectionnée est actuellement

<img src="http://i2.wp.com/www.hunterthinks.com/wp-content/uploads/2014/11/favicon-160x160.png?fit=150%2C150" class="attachment-thumbnail wp-post-image" alt="HunterThinks.com">

En tant qu’idéaliste, je voudrais normalement la hauteur et la largeur, mais le manque de hauteur pose un problème de mise en page avec mon thème actuel. Comme vous pouvez le constater, la dernière image sélectionnée dépasse la fin de l'élément <section>, et elle a une apparence affreuse.

Code actuel

Le fichier header.php est volumineux. Par conséquent, je le sauterai à moins que quelqu'un ne pense que mon problème existe.

category.php 

<?php get_header(); ?>
<section>
  <header><h1><?php _e( 'Main page: ', 'goldenratio' ); ?><?php single_cat_title(); ?></h1></header>
  <?php if ( '' != category_description() ) echo apply_filters( 'archive_meta', category_description() ); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <?php get_template_part( 'entry', 'summary' ); ?> # FEATURED IMAGE COMES FROM HERE
  <?php endwhile; endif; ?>
  <?php get_template_part( 'nav', 'below' ); ?>
</section>
<?php get_footer(); ?>

entry-summary.php 

<?php the_title( '<h1 class="clear">', '</h1>' ); ?>
<?php if ( has_post_thumbnail() ) { 
    echo '<figure class="clear-right"><a href="';
    the_permalink();
    echo '">';
    the_post_thumbnail( 'thumbnail' );
    echo '</a></figure>';
    } ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="Go to the page">&rArr;&nbsp;Read&nbsp;&rArr;</a>

class = "clear-right"

Je ne peux pas imaginer pourquoi cette classe affecterait les choses, mais au cas où je me trompe, je l'inclue ici.

.clear-right{
 clear:right;
 float:right;
 margin-bottom:1em;
 margin-left:1.827%;}

Tentatives infructueuses

  1. J'ai essayé d'utiliser wp_get_attachment_image_src() mais je suppose que je ne l'ai pas codé correctement car je ne pouvais même pas obtenir l'image à afficher. Je n'ai pas un échantillon du code que j'ai essayé.
  2. J'ai essayé d'utiliser the_post_thumbnail( $size, $attr ) et d'ajuster le tableau $attr en fonction de la documentation de wp_get_attachment_image() mais je suis à peu près sûr que cela ne fonctionnera jamais.

Code, concepts et références?

Quelqu'un peut-il m'aider s'il vous plaît avec le code, les concepts et les documents de référence qui me manque. J'ai l'impression que lorsque j'apprendrai la réponse, je me sentirai un peu bête, mais je veux régler ce problème.

Merci d'avance.

functionspost-thumbnailsimage-size
2
hunterhogan

Vous pouvez collecter les attributs d'image à l'aide de " wp_get_attachment_metadata ", voir l'exemple ci-dessous comme point de départ.

function mytheme_post_thumbnail( $size = 'post-thumbnail', $attr = '', $post_id = null ) {
    if ( has_post_thumbnail( $post_id ) ) {
        $meta      = wp_get_attachment_metadata( get_post_thumbnail_id( $post_id ) );

        $args['width']  = $meta['sizes'][$size]['width'];
        $args['height'] = $meta['sizes'][$size]['height'];

        $args['alt']   = isset( $attr['alt'] ) ? $attr['alt'] : apply_filters( 'post_title', get_post( $post_id )->post_title );
        $args['title'] = isset( $attr['title'] ) ? $attr['title'] : apply_filters( 'post_title', get_post( $post_id )->post_title );
        $args['class'] = isset( $attr['class'] ) ? $attr['class'] : '';

        $thumbnail = wp_get_attachment_image( get_post_thumbnail_id( $post_id ), $size, false, $args);

        echo $thumbnail;
    } else {
        printf( '<img src="%1$s/images/default-thumb.png" alt="%2$s" />', get_template_directory_uri(), the_title_attribute( [  'echo' => false ] ) );
    }
}
1
Alex Sancho

Si vous ne voulez que la taille (la largeur et la hauteur) de l'image dans la balise img comme suit

<img src="source_of_your_image" width="500" height="250"/>

Ensuite, utilisez le code php suivant:

$MySrc = "source_of_your_image";
$Myimg = "<img src='$MySrc' ";
$TheImg = (array)getimagesize($MySrc);
$Myimg .= $TheImg[3]."/>";

Pour plus d'informations sur l'utilisation de getimagesize (), visitez http://php.net/manual/fr/function.getimagesize.php

2
MMK

J'utilise normalement quelque chose comme:

if ( current_theme_supports('post-thumbnails') && has_post_thumbnail() ) {
    $post_thumb_id = get_post_thumbnail_id($id);
    $image_data = wp_get_attachment_image_src($post_thumb_id, 'thumbnail');
    $attr_title = esc_attr($title);
    $image = <<<HTML
<div class="thumbnail"><img id="attachment_{$post_thumb_id}" src="{$image_data[0]}" width="{$image_data[1]}" height="{$image_data[2]}" alt="{$attr_title}" /></div>
HTML;

} else {
    $image = '';
}

Avec votre code, essayez:

<?php the_title( '<h1 class="clear">', '</h1>' ); ?>
<?php 
if ( has_post_thumbnail() ) { 
    echo '<figure class="clear-right"><a href="';
    the_permalink();
    echo '">';
    # The next line grabs the image source meta using the post thumbnail id
    $image_data = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');
    $attr_title = esc_attr( get_the_title() );
    # image_data is an array ( src => '...', 'width' => int, 'height' => 'int', ...)
    # so you can grab $image_data[0] as the source, $image_data[1] as the width, and $image_data[2] as the height
    $image_tag = <<<HTML
<img src="{$image_data[0]}" width="{$image_data[1]}" height="{$image_data[2]}" alt="{$attr_title}" />
HTML;

    #now that tag is built, just draw it out.
    echo $image_tag;
    echo '</a></figure>';
} ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="Go to the page">&rArr;&nbsp;Read&nbsp;&rArr;</a>

Cela devrait vous donner ce que vous cherchez.

1
Privateer

wp_get_attachment_image cette fonction peut vous aider.

En utilisant cette fonction, votre fichier devrait ressembler ci-dessous ...

entry-summary.php 

<?php the_title( '<h1 class="clear">', '</h1>' ); ?>
<?php if ( has_post_thumbnail() ) { 
    $attachment_id = get_post_thumbnail_id( get_the_ID() );
    $default_attr = array(
        'src'   => $src,
        'class' => "attachment-$size",
        'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )),
    );

    echo '<figure class="clear-right"><a href="';
    the_permalink();
    echo '">';
    //the_post_thumbnail( 'thumbnail' );
    wp_get_attachment_image( $attachment_id, 'thumbnail',1 , $default_attr );
    echo '</a></figure>';
    } ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="Go to the page">&rArr;&nbsp;Read&nbsp;&rArr;</a>

Pour obtenir la hauteur et la largeur, utilisez la fonction wp_get_attachment_metadata sur la largeur supérieure au code.

Je n'ai pas testé le code de mon côté, je viens de recevoir un exemple du codex. J'espère que cela fonctionnera.

MISE À JOUR 2:

$attachment_id = get_post_thumbnail_id(get_the_ID()); 
$metadata = wp_get_attachment_metadata($attachment_id);
$height =  $metadata['height'];
$width =  $metadata['width'];
$alt = trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )) ; 
$src =  wp_get_attachment_url( $attachment_id );
$class = 'attachment-'.$attachment_id;

echo '<img src="'.$src.'" height="'.$height.'" width="'.$width.'" alt="'.$alt.'" class="'.$class.'" />';

MISE À JOUR 3:

pour obtenir la hauteur et la largeur de la vignette, modifiez vos lignes de code comme ci-dessous.

$height =  $metadata['sizes']['thumbnail']['height'];
$width  =  $metadata['sizes']['thumbnail']['width'];
1
shyammakwana.me

EDIT: Par défaut, WordPress recadre les pouces à 150x150px lors de leur téléchargement. Lorsque vous décochez la case dans Paramètres> Médias WordPress ne régénérera pas les vignettes existantes, il ne générera que des images proportionnelles lors du téléchargement de nouvelles images. En bref, je pense que votre problème ne concerne pas le code que vous utilisez pour afficher la vignette, mais l’image elle-même.

Cependant, pour obtenir une sortie d'image miniature en HTML avec la largeur, la hauteur, l'alt et les classes, le code suivant produira les résultats souhaités:

$post_id = $post->ID; // current post id
$thumb_id = get_post_thumbnail_id($post_id);
$size = 'thumbnail';
if ( '' != get_the_post_thumbnail($post_id) ) { // checks we have a thumbnail
    echo wp_get_attachment_image($thumb_id, $size);
}

Si le résultat de sortie utilisant mon code est toujours de 150 pixels sur 150 pixels, essayez de télécharger à nouveau l'image.

0
Aron