2017-11-14 6 views
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の画像をロードしていますです。誰も私を助けることができますか?私は非常にレスポンシブなイメージと私はそれを分解したと思ったときに新しいです。その後、間違ったイメージ:(事前に

感謝を選択するために開始します。

+0

更新にあなたのコードで答えをカスタムイメージのサイズを追加していませんでした – vel

答えて

0

私はそれを割れた。私はWordpressのsrcset :)

関連する問題