SAInoITnote 
AVADAのRecent Postsで表示される画像は、正方形の画像であっても上下がカットされて表示される
Recent Postsを使ったページを実際に表示した時のソースコードは以下のようになっている
修正前
<img class="attachment-recent-posts size-recent-posts" draggable="false" src="https://example.com/wp/wp-content/uploads/img01-700x441.png" sizes="(max-width: 700px) 100vw, 700px" srcset="https://example.com/wp/wp-content/uploads/img01-320x202.png 320w, https://example.com/wp/wp-content/uploads/img01-700x441.png 700w" alt="" width="700" height="441" />
cssなどでトリミングをしているわけではなく、画像自体がトリミングされている
画像をトリミングしているのは、画像をアップロードした時に、自動的にアップロードした画像サイズ以外のサイズのサムネイルを作成しているが、この時にトリミングされる
AVADAで、アップロード時の画像サイズを指定しているのは、
class-avada-init.php
class-avada-init.php
class Avada_Init {
// -- 略 --
/**
* Add image sizes.
*
* @access public
*/
public function add_image_size() {
add_image_size( 'blog-large', 669, 272, true );
add_image_size( 'blog-medium', 320, 202, true );
add_image_size( 'recent-posts', 700, 441, true );
add_image_size( 'recent-works-thumbnail', 66, 66, true );
// Image sizes used for grid layouts.
add_image_size( '200', 200, '', false );
add_image_size( '400', 400, '', false );
add_image_size( '600', 600, '', false );
add_image_size( '800', 800, '', false );
add_image_size( '1200', 1200, '', false );
}
}
// -- 略 --
class-avada-init.phpを直接修正するのではなく、function.phpに以下を追加
function.php
class Avada_Init {
public function add_image_size() {
add_image_size( 'blog-large', 669, 272, false );
add_image_size( 'blog-medium', 320, 202, false );
add_image_size( 'recent-posts', 700, 441, false );
add_image_size( 'recent-works-thumbnail', 66, 66, false );
}
}
add_image_sizeに関しては
関数リファレンス/add image size
を参照
第4引数に「false」を指定することでトリミングしないようにする
function.phpに追加後、画像をアップロードし直すと、自動で作成される画像がトリミングされなくなる
Recent Postsを使ったページを実際に表示した時のソースコードは以下のようになる
修正後
<img class="attachment-recent-posts size-recent-posts" draggable="false" src="https://example.com/wp/wp-content/uploads/img01.png" sizes="(max-width: 800px) 100vw, 800px" srcset="https://example.com/wp/wp-content/uploads/img01-150x150.png 150w, https://example.com/wp/wp-content/uploads/img01-700x700.png 700w, https://example.com/wp/wp-content/uploads/img01-768x768.png 768w, https://example.com/wp/wp-content/uploads/img01.png 800w" alt="" width="800" height="800" />
WordPressテーマ、AVADAのRecent Postsのサムネイルを上下カットさせずに表示できました
