WordPressで自動トリミングで特定の大きさが出力されない(add_image_sizeが効かない)時の解決策

4

目次

とある案件にて。WP のサムネイル周りを拡張して、自動トリミングされる種類をデザイン案に応じて増やしていた。

これをするとレスポンシブでの縦横比を保ったままの画像表示にCSS ハックを使用せずとも良くなったり、

納品後、クライアントによって表示サイズを考慮しないようなサイズの画像をアップロードをされても耐えられる。

ただ、テーマ側で設定した一部のサイズの画像が自動生成(トリミング)されていなかったのでその解決策。

例えば

  • 600 x 400
  • 300 x 200
  • 250 x 250
  • 200 x 130

と言う 4 つのオリジナルのサイズを登録していたとして、なぜか 600 x 400 だけ生成されていなかったりとか。

結論

先に結論を言うと、登録したサイズがアップした画像より大きな場合は生成されない。あくまで「トリミング」らしい。

上の例で言うと、800 x 1200 とかの縦長画像をアップロードしたら 600 x 400 の横長画像も 250x250 の正方形画像も生成してくれる。 だが、500 x 500 とかの画像だと 600x 400 は生成されない。600 よりも 500 が小さいからだ。

要はリサイズ的なこともしてくれると勘違いしてた

アップした画像の一辺の長さが、新しく登録したサイズの一辺よりも小さければ生成されない。

問題コード

sample_theme_support();

/*
サムネイル機能の拡張
********************************************************************/
function sample_theme_support(){
  // サムネイル画像を使用可能に
  add_theme_support('post-thumbnails',array('post', 'page', 'news'));
  // 画像サイズの登録
  add_image_size('thumb-600', 600, 400, true); // 個別ページのアイキャッチ(タイトル左部)や関連記事(大)
  add_image_size('thumb-300', 300, 200, true); // 個別ページのアイキャッチ(タイトル左部)や関連記事(大)
  add_image_size('thumb-250', 250, 250, true); // 関連商品(小)
  add_image_size('thumb-200', 200, 130, true); //関連記事(小)

  add_filter('image_size_names_choose', 'sample_custom_image_sizes');
  function sample_custom_image_sizes($sizes){
    return array_merge($sizes, array(
      'thumb-600' => '600 x 400px',
      'thumb-300' => '300 x 200px',
      'thumb-250' => '250 x 250px',
      'thumb-200' => '200 x 130px',
    ));
  }

 // 省略

} // sample_theme_support()

add_image_size()で任意の画像サイズを登録できる。

参考: 関数リファレンス/add image size

参考: applyfilters(`imagesizenameschoose`, string[] $size names)

そんで下記の関数群で登録した画像のサイズを呼び出したりする。 例えば、カテゴリにサムネイル用のカスタムフィールドを作って、その画像 URL を取得してからreplace_thumbnail_src('そのサムネイル画像のURL', 'thumb-300')とすれば投稿に紐づく画像でなくてもリサイズしたサイズの画像 URL を返してくれたりもする。

/*
アイキャッチ画像周り
********************************************************************/

// アイキャッチのURLをトリミングしたサイズのURLに書き換える
// 例) ~/example.png -> ~/example-520x300.png
if (!function_exists('replace_custom_size_thumbnail_url')) {
  function replace_custom_size_thumbnail_url($url, $width, $height) {
    $exts = array('.jpg', '.jpeg', '.png', '.gif', '.bmp');
    $replace_exts = array();
    foreach ($exts as $ext) {
      $replace_exts[] = '-' . $width . 'x' . $height . $ext;
    }
    return str_replace($exts, $replace_exts, $url);
  }
} // replace_custom_size_thumbnail_url

// 画像を任意のサイズで表示する
if (!function_exists('replace_thumbnail_src')) {
  function replace_thumbnail_src($src, $size){
    if ($size == "thumb-600") return replace_custom_size_thumbnail_url($src, "600", "400");
    if ($size == "thumb-300") return replace_custom_size_thumbnail_url($src, "300", "200");
    if ($size == "thumb-250") return replace_custom_size_thumbnail_url($src, "250", "250");
    if ($size == "thumb-200") return replace_custom_size_thumbnail_url($src, "200", "130");
  }
}// replace_thumbnail_src

// サイズを指定して画像のURLを取得
if (!function_exists('sample_default_thumb')) {
  function sample_default_thumb($size, $id = null){
    // アイキャッチが登録されていればそれを表示
    if (has_post_thumbnail($id)) return get_the_post_thumbnail_url($id, $size);

    // 登録されていなければテーマ内設置のデフォルト画像
    $template_image_path = get_template_directory_uri().'/images/article/';
    if($size == 'thumb-600') return $template_image_path.'default-600x400.png';
    if($size == 'thumb-300') return $template_image_path.'default-300x200.png';
    if($size == 'thumb-250') return $template_image_path.'default-250x250.png';
    if($size == 'thumb-200') return $template_image_path.'default-200x130.png';
    return $template_image_path.'default.png';
  }
} // sample_default_thumb

結論

add_image_size()が効いてないわけではない

ガチガチに固めたいのであれば画像投稿時にバリデーションとかするのも良いかもしれない(出来るかは知らない)

  • SNSでシェアしよう
  • Twitterでシェア
  • FaceBookでシェア
  • Lineでシェア
  • 記事タイトルとURLをコピー
トップへ戻るボタン

\ HOME /

トップへ戻る