web-dev-qa-db-ja.com

高さと幅のプロパティを_post_thumbnail（）または関連関数で表示する

問題

投稿、ページ、またはカスタム投稿タイプのおすすめ画像のheight要素にwidthおよびimgプロパティが必要です。

環境

  1. BlankSlateテーマ に基づくカスタムテーマがあります。
  2. 新しい15のテーマもプロパティを表示しません。
  3. 設定/メディアで、デフォルトの画像サイズを変更していません。
  4. functions.phpにはadd_theme_support( 'post-thumbnails' );が含まれています。
  5. カスタムの画像サイズはありません。
  6. [設定/メディア]で、[正確なサイズに縮小する]ボックスはチェックなしです。したがって、私は正確に150ピクセル×150ピクセルではないいくつかのサムネイルを持っています。
  7. 編集： altやclassなど、Featured Image関数の他の自動プロパティが必要です。

電流出力

この 私のウェブサイトの例のページ から、注目の画像の完全なHTMLは現在あります

<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">

理想主義者として、私は通常高さと幅を望みますが、高さの欠如は私の現在のテーマでレイアウト問題を引き起こします。ご覧のとおり、最後の注目画像は<section>要素の終わりを超えていて、ひどい感じに見えます。

現在のコード

Header.phpは大きいので、私の問題がそこにあると誰かが考えていない限り、スキップします。

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"

私はなぜこのクラスが物事に影響を与えるのか想像することはできませんが、私が間違っている場合に備えて、私はそれをここに含めています。

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

失敗した試行

  1. wp_get_attachment_image_src()を使おうとしましたが、画像を表示することすらできないので、正しくコーディングしなかったと思います。試したコードのサンプルはありません。
  2. 私はthe_post_thumbnail( $size, $attr )を使い、wp_get_attachment_image()のドキュメントに基づいて$attr配列を調整しようとしましたが、それがうまくいかないことは確かです。

コード、概念、および参照

誰かが私が見逃しているコード、概念、そして参考資料で私を助けてもらえますか。私は答えを学ぶとき私は少しばかげた感じがするように感じるが、私はこの問題を解決したいと思います。

前もって感謝します。

functionspost-thumbnailsimage-size
2
hunterhogan

" wp_get_attachment_metadata "を使って画像属性を集めることができます。出発点として以下の例を参照

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

Imgタグ内の画像のサイズ（幅と高さ）だけが必要な場合

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

それから次のphpコードを使います。

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

Getimagesize（）の使用法についての詳細は http://php.net/manual/en/function.getimagesize.php にアクセスしてください。

2
MMK

私は通常次のようなものを使います。

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 = '';
}

あなたのコードで、試してみてください。

<?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>

それはあなたが探しているものをあなたに届けるはずです。

1
Privateer

wp_get_attachment_image この機能は役に立ちます。

この機能を使用すると、ファイルは以下のようになります。

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>

高さと幅を取得するには、コードの上の幅に沿ってwp_get_attachment_metadata関数を使用します。

私は自分の側からコードをテストしていません、コーデックスから例を得ただけです。これがうまくいくことを願っています。

アップデート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.'" />';

アップデート3：

サムネイルの高さと幅を取得するには、以下のようにコード行を変更します。

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

編集： デフォルトでは、WordPressはアップロード時に150x150ピクセルにサムをトリミングします。 設定>メディア WordPressのチェックボックスをオフにすると、既存のサムネイルは再生成されません。新しい画像をアップロードすると、プロポーショナル画像のみが生成されます。要するに、あなたが抱えている問題は、サムネイルを表示するために使用しているコードではなく、画像そのものであると私は信じています。

しかし、幅、高さ、alt、クラスを含むhtmlでサムネイル画像を出力するには、次のコードで必要な結果が得られます。

$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);
}

私のコードを使用した出力結果がまだ150x150ピクセルの場合は、画像を再アップロードしてください。

0
Aron