Wp_get_attachment_imageを使用するときに添付ファイルの画像から幅と高さを削除するときに問題が発生します。これは私が画像を表示するために使っているものです
<?php echo $image = wp_get_attachment_image( $entry['slide_image_id'], true, 'full'); ?>
ソースコードの見え方
<img width="150" height="108" src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />
こんな風に表示してほしい
<img src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />
画像は、slide_image_idというIDを持つエントリを持つ繰り返し可能なファイルフィールドから取得されます。私は見回していて、wp_get_attachment_image_urlを使うように気づいていますが、私の上記のコードでそれを使うとき、画像は表示されません。私が間違っていることはありますか?
<?php echo $image = wp_get_attachment_image_url( $entry['slide_image_id'], true, 'full'); ?>
サイドノート:$ entry ['slide_image_id']は私の繰り返し可能なファイルフィールドを呼ぶために使われているものです。
wp_get_attachment_image_url()
と wp_get_attachment_image()
の両方に対するあなたの引数の順番が間違っています - 詳細についてはリンクされたドキュメントをチェックしてください。さらに、wp_get_attachment_image_url()
はURLを返します - 実際の画像要素ではありません。
<img>
要素からwidth
およびheight
属性を削除することはお勧めできません。ページのレイアウトがイメージのサイズによって何らかの影響を受ける場合は、イメージのサイズを指定するCSSまたはイメージがレイアウトされるとすぐにレイアウトが不自然になります。それ自体がロードされます。
残念ながら、wp_get_attachment_image()
関数は現在(WordPress 4.4.1以降)width
およびheight
<img>
属性を出力するようにハードコードされているので( チケット#14110 を参照)、あなた自身で画像マークアップを構築する必要があります。これは wp_get_attachment_image()
のソースから手がかりを取ることによって行うことができます :
<?php
$attachment = get_post( $entry['slide_image_id'] );
if( $attachment ) {
$img_size_class = 'full';
$img_atts = array(
'src' => wp_get_attachment_image_url( $entry['slide_image_id'], $img_size_class, false ),
'class' => 'attachment-' . $img_size_class . ' size-' . $img_size_class,
'alt' => trim(strip_tags( get_post_meta( $entry['slide_image_id'], '_wp_attachment_image_alt', true) ) )
);
//If an 'alt' attribute was not specified, try to create one from attachment post data
if( empty( $img_atts[ 'alt' ] ) )
$img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_excerpt ));
if( empty( $img_atts[ 'alt' ] ) )
$img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_title ));
$img_atts = apply_filters( 'wp_get_attachment_image_attributes', $img_atts, $attachment, $img_size_class );
echo( '<img ' );
foreach( $img_atts as $name => $value ) {
echo( $name . '="' . $value . '" ';
}
echo( '/>' );
}
?>
私はいくつかのコア掘削/テストをして、wp_constrain_dimensions
フィルターを通して回避策を見つけました:
// Add filter to empty the height/width array
add_filter( 'wp_constrain_dimensions', '__return_empty_array' );
// Display image html
echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );
// Remove filter again
remove_filter( 'wp_constrain_dimensions', '__return_empty_array' );
これにより、wp_get_attachment_image()
の生成された画像htmlから height および width 属性を削除することができますが、reg-exの標準は削除されません。 width / height を削除するのと同じ方法でwp_get_attachment_image_src
フィルタを使用することもできますが、 url はそのまま使用します。
この回避策はsrcset
とsizes
属性も削除します。しかし、4番目の$attr
入力引数で srcset および sizes 属性を設定することもできます。
@boscoで述べたように、 icon と size の入力引数は次のように切り替えました。
echo wp_get_attachment_image( $entry['slide_image_id'], true, 'full' );
代わりにこれを使ってください。
echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );
私は単純にCSSを使いました。すべてのシナリオでうまくいくわけではありませんが、多くの場合十分です。 300ピクセルx 300ピクセルの画像を見てみましょう。
max-height: 300px;
max-width: 300px;
width: auto;
これは幅と高さの比率を失うことなく画像の寸法を制限します。それ以外の場合は、REGEXも使用できます。
$html = preg_replace(array('/width="[^"]*"/', '/height="[^"]*"/'), '', $html);
これらはいくつかの選択肢でした。がんばろう。