0
Wordpressでカスタム画像サイズを作成し、レスポンシブ画像プラグインで使用するようにしました。デフォルトでwordpressがインストールされています。私が追加した画像のサイズは以下のとおりです。Wordpressの反応画像が正しい画像や向きを選択していない
add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);
add_image_size('portrait-case-study-md', 415, 622, true);
私はその後metabox.ioプラグインを使用して縦長のケース・スタディ-LGとして表示されるようにロードされた設定をPHPからイメージを構築しています。私はmetabox.ioの関数を使ってsrcsetをロードして、画像を変更したい私のカスタムサイズを作成しました。
$images = rwmb_meta('su_project-featured-portrait-left', array('limit' => 1,
'size' => 'portrait-case-study-lg'), $post->ID);
<a href="<?php echo $image['full_url']; ?>" itemprop="contentUrl" data-size="<?php echo $image['width']; ?>x<?php echo $image['height'];?>">
<img class="scene_element scene_element--fadeinup" src="<?php echo $image['url']; ?>" srcset="<?php echo esc_attr($image['srcset']); ?>"
sizes="(max-width:40em) 767px, (min-width: 40.063em) and (max-width: 64em) 455px, (min-width: 64.063em) and (max-width: 90em) 455px, (min-width: 90.063em) 505px, 100vw" itemprop="thumbnail" alt="Image description" >
</a>
結果は次のようになります。
<img class="scene_element scene_element--fadeinup"
src="http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-505x757.jpg" srcset="http://localhost:8888/wp-
content/uploads/2017/11/chelsea-sw3-apartment-bedroom-300x200.jpg 300w,
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-768x512.jpg 768w, http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-1024x683.jpg 1024w,
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-355x238.jpg 355w, http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-955x637.jpg 955w,
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-940x627.jpg 940w" sizes="(max-width:40em) 767px,
(min-width: 40.063em) and (max-width: 64em) 455px,
(min-width: 64.063em) and (max-width: 90em) 455px,
(min-width: 90.063em) 505px, 100vw" itemprop="thumbnail" alt="Image
description">
私が持っている問題は、それが今で768x512の幅と高さとの風景画像をロードするのではなく505x757の画像をロードしていますです。誰も私を助けることができますか?私は非常にレスポンシブなイメージと私はそれを分解したと思ったときに新しいです。その後、間違ったイメージ:(事前に
感謝を選択するために開始します。
更新にあなたのコードで答えをカスタムイメージのサイズを追加していませんでした – vel