投稿者:: @chu-ya

●前提条件
メディアに横800×600pxのNO IMAGE画像を登録した。
この時、メディアフォルダの自動生成ファイルを削除してある。（元画像800×600pxしかない）

これはどういう状況でしょうか？
横800×600pxのNO IMAGE画像を自前で用意したってことでしょうか。
そのファイルをメディアにアップロードしたということで合ってますでしょうか？

投稿者:: @chu-ya

●現象1
★150×150のサイズが120×68pxだった。
本来、150×150はメディア登録時に作られる。
ファイル名150×150が作成されるが、どの比率も中身はファイル名120×○○と同じでした。

できれば該当箇所のデベロッパーツールのソースコード部分のスクリーンショットもいただければと思います（※管理画面であればどこで大きさを確認したかの確認部分）。

投稿者:: @yhira

これはどういう状況でしょうか？
横800×600pxのNO IMAGE画像を自前で用意したってことでしょうか。
そのファイルをメディアにアップロードしたということで合ってますでしょうか？

YES。

ファイル名150×150が作成されるが、どの比率も中身はファイル名120×○○と同じでした。

ご質問の意図を把握できていないのですが、このスクリーンショットはページ送りナビの画像でしょうか。

ただ、このスクリーンショットでは、わいひらさんが画像本来のサイズを把握できないと思います。画像のパスに 150x150 とあるため、150x150 なんだろうなと推測できるぐらいです。

120x120 との表示はレンダリングサイズです。CSS で 120px となっているためです。

https://github.com/xserver-inc/cocoon/blob/master/scss/_post-navi.scss#L35-L38  

その画像の組み込みサイズは、いくつでしょうか。デベロッパーツールで <img> の src 属性のパスにマウスポインターを乗せれば、組み込みサイズが分かります。

投稿者:: @akira

その画像の組み込みサイズは、いくつでしょうか。デベロッパーツールで <img> の src 属性のパスにマウスポインターを乗せれば、組み込みサイズが分かります。

「スクリーンショットはページ送りナビの画像」です。
Chromeで表示してみましたが、組み込みサイズは表示されませんでした。

上図ではアスペクト比が1:1だったので、分かり難いかと思います。
この為、比率3:4を指定した時の該当ファイルを、ダウンロードし、画像情報を添付します。

1666843573-150x150.png

上記のように、NO IMAGEで生成されたファイル名に150×150が付加されており。
しかし、実際の画像サイズは120×90pxでした。

期待として、生成される画像サイズは150×150pxだと思うのですが。

●原因1
lib/page-settings/image-posts.php

ユーザがNO IMAGE画像を選択した。
この時、wp_get_image_editorを用い、NO IMAGE画像のオブジェクトを取得する。
オブジェクトに対して以下の順で縮小し、各サムネイル画像を作成する。

1. 幅320px
2. 幅160px
3. 幅120px
4. 幅150px

この時、順序が幅120pxの後に、幅150pxを作成している為、幅150pxに縮小できない。（★の部分）
結果、幅120pxで、get_no_image_150x150_fileが作られる。

if (file_exists(get_no_image_file()) &&
   (!file_exists(get_no_image_320x180_file())
       || !file_exists(get_no_image_160x90_file())
       || !file_exists(get_no_image_120x68_file())
       || !file_exists(get_no_image_150x150_file()))
) {
  $image_editor = wp_get_image_editor(get_no_image_file());
  if ( !is_wp_error($image_editor) ) {
    $image_editor->resize(THUMB320WIDTH, THUMB320HEIGHT, true);
    $image_editor->save( get_no_image_320x180_file() );

    $image_editor->resize(THUMB160WIDTH, THUMB160HEIGHT, true);
    $image_editor->save( get_no_image_160x90_file() );

    $image_editor->resize(THUMB120WIDTH, THUMB120HEIGHT, true);★
    $image_editor->save( get_no_image_120x68_file() );★

    $image_editor->resize(THUMB150WIDTH, THUMB150HEIGHT, true);★
    $image_editor->save( get_no_image_150x150_file() );★
  }
}

●対策1
幅150px→幅120pxの順とする。

対策に誤りがありました。

WP_Image_Editor::resize( int|null $max_w, int|null $max_h, bool $crop = false )

●対策1
各リサイズの前にNO IMAGE画像のオブジェクトを取得しなおす。（★を追加）

【追記】

または、サムネイル150×150だけ、他と比率が違う為、リサイズ前にオブジェクトを取得しなおす。

$image_editor->resize(THUMB320WIDTH, THUMB320HEIGHT, true);
$image_editor->save( get_no_image_320x180_file() );

$image_editor = wp_get_image_editor(get_no_image_file());★
$image_editor->resize(THUMB160WIDTH, THUMB160HEIGHT, true);
$image_editor->save( get_no_image_160x90_file() );


$image_editor = wp_get_image_editor(get_no_image_file());★
$image_editor->resize(THUMB120WIDTH, THUMB120HEIGHT, true);
$image_editor->save( get_no_image_120x68_file() );

$image_editor = wp_get_image_editor(get_no_image_file());★
$image_editor->resize(THUMB150WIDTH, THUMB150HEIGHT, true);
$image_editor->save( get_no_image_150x150_file() );

調べ分かった事を帰します。

●原因2

NO IMAGE画像を設定してある。
サムネイル画像の比率を変更し、[変更をまとめて保存]をクリックした。

lib/page-settings/image-posts.php
get_no_image_160x90_file()で、指定したファイルが存在するか判定している。

→get_no_image_320x180_url()
   →get_image_sized_url($no_image_url, THUMB320WIDTH, THUMB320HEIGHT);

このTHUMB320HEIGHTの値が、前回の比率のまま変化しない？
この為、既にファイルが存在すると判定されてしまう。

[変更をまとめて保存]をクリックすると、変更した比率が保存され、次回それに合ったTHUMB320HEIGHTが設定されるようです。

NO IMAGEサムネイル320×○○作成の流れを例に説明します。

●原因2

lib/settings.php

サムネイル画像の比率のチェックを切替えただけでは、以下に即時反映されない。
define('THUMB320HEIGHT', get_thumbnail_height(THUMB320WIDTH));

この為、[変更をまとめて保存]をクリックして、はじめてNO IMAGEサムネイルを作る際、チェックした比率が有効となる。

●対策

lib/page-settings/image-funcs.php

以下の関数でファイル名を作成する。

• get_no_image_320x180_url
• get_no_image_160x90_url
• get_no_image_120x68_url
• get_no_image_150x150_url

この時、THUMB320HEIGHTを用いファイル名としている。
THUMB320HEIGHTが即時反映されない為、前回と同じファイル名(高さ)になる。
$res = get_image_sized_url($no_image_url, THUMB320WIDTH, THUMB320HEIGHT);

この為、切替えた比率（チェックされている比率）で作成する必要があり、以下なのでは？
$res = get_image_sized_url($no_image_url, THUMB320WIDTH, get_thumbnail_height(THUMB320WIDTH))

lib/page-settings/image-posts.php

各サムネイル作成の時、以下としている。
$image_editor->resize(THUMB320WIDTH, THUMB320HEIGHT, true);

同様に以下なのでは？
$image_editor->resize(THUMB320WIDTH, get_thumbnail_height(THUMB320WIDTH), true);

僕の以下の条件で環境でも確認してみたのですが、150x150が作成されているようなんですよね。

Cocoon設定
・投稿→ページ送りナビ→表示タイプ→サムネイル正方形
・画像→全体画像設定→サムネイル画像→3:4, 1:1.333..（アナログテレビ・デジカメ比）
・画像→NO IMAGE設定→NO IMAGE画像→選択からメディアにアップロードする

何か不具合再現手順が間違っておりましたでしょうか。

投稿者:: @yhira

画像→NO IMAGE設定→NO IMAGE画像→選択からメディアにアップロードする

既にNO IMAGE画像をアップロードした状態。
この状態で比率だけを9:16に切替え、[変更をまとめて保存]。

新しい比率でファイルが生成し直される。
この時、生成されるファイル150×150の画像サイズは120×68になるかと思います。

問題のポイント
lib/page-settings/image-funcs.phpが実行される事が条件です。
メディアにアップロードすると指定された比率でファイル100、120、150、160、320が自動生成される。
既に該当ファイルがある為、lib/page-settings/image-funcs.phpの判定で、サムネイル自動生成が行われない。

すみません、誤記です。
上記、「lib/page-settings/image-posts.php」です

私のローカル環境でやってみましたが・・・。

今回の件、私が理解していない可能性があります。

間違っていたら、軽くスルーしてください。

①「Cocoon設定」－「画像」－「サムネイル画像」の縦横比率は、「3:4, 1:1.333..（アナログテレビ・デジカメ比）」

②800×600の画像を、「画像」－「NO IMAGE画像」で、登録
　この際、新規画像をアップロードする

 　上記後の状態が以下です。

投稿者:: @mk2_mk2

今回の件、私が理解していない可能性があります。

発生のアルゴリズムが伝え難く。
lib/page-settings/image-posts.phpが実行された場合に発生します。

①合っています

②違っています
以下の手順で再度試してみて下さい。
①→②→再度「変更をまとめて保存」

再度保存だけをクリックすると、変更した比率9:16で新しいファイルが作られます。
この時、No-Image-150×150.jpgの画像サイズは120×68になると思います。

③理解しています
メディアに登録したファイルについて作り直しが必要になる旨は理解しています。
しかし、上記赤字の手順で、NO IMAGEだけは作り直され。

投稿者:: @mk2_mk2

テーマ全体のサムネイル画像の縦横比（アスペクト比）を変更する方法

運用でカバーされている事で、実害はないです。
ただ、image-posts.phpのアルゴリズムに疑問があり。

chu-yaさん

今、他のこともしているので、少しお時間ください。

手が空いたところでやってみますが、再確認させてください。

投稿者:: @chu-ya

①→②→再度「変更をまとめて保存」

上記ですが、先に私が書いた番号だと、①→②→③→再度「変更をまとめて保存」ではないかと思うのですが、あっていますでしょうか。

・NO-IMAGE画像登録から、新規アップロード
・画像比率変更
・何も変えずに、「変更をまとめて保存」

この流れで大丈夫でしょうか。

投稿者:: @mk2_mk2

上記ですが、①→②→③→再度「変更をまとめて保存」ではないかと思うのですが、あっていますでしょうか。

すみません、見落としてました。
mk2さんの記載の手順で合っています。

●余談
NO IMAGEだけは、必要とする、生成ファイル100、120、150、160、320が無い場合、「変更をまとめて保存」をクリックする事で、設定された比率で作り直す仕組みになっているようです。

chu-yaさん

了解です。
後程やってみます。

少し席を外してしまいますので、少しお時間ください。 

●追記
NO IMAGEだけ比率を変えて、①②1:1→③3:4→④1:1と戻すようなケースがあるかと思います。
この時、NO IMAGEのファイル150×150だけ画像サイズが1:1に戻らない。

「Cocoon設定で、これらの設定を終えただけでは画像自体には反映されていません。」とマニュアルに記載があり。

https://wp-cocoon.com/thumbnail-aspect-ratio/

●手順

①[Cocoon設定]→[画像]→[サムネイル画像]の縦横比率「1:1（正方形）」

②800×600の画像を、[画像]→「NO IMAGE画像」で登録。この際、新規画像をアップロードする。
以下のファイルが作られる。

• 120×120
• 150×150
• 160×160
• 320×320

③[Cocoon設定]→[画像]→[サムネイル画像]の縦横比率「3:4, 1:1.333..（アナログテレビ・デジカメ比）」
へ変更し、[変更をまとめて保存]を2回クリック。
新たに以下のファイルが作られる。

• 120×90
• (150×150)
• 160×120
• 320×240

④[Cocoon設定]→[画像]→[サムネイル画像]の縦横比率「1:1（正方形）」
へ戻し、[変更をまとめて保存]を2回クリック。

●結果
③で上書きされてしまう為、150×150は画像サイズ120×90となってしまいます。
なお、先にも書いてありますが、画像サイズ120×90になるのは、image-posts.phpに問題があるからです。

再現しました。

先の返信と同じような感じで書いてみます。

ローカル環境で試しました。

①「Cocoon設定」－「画像」－「サムネイル画像」の縦横比率は、「3:4, 1:1.333..（アナログテレビ・デジカメ比）」

②800×600の画像を、「画像」－「NO IMAGE画像」で、登録
　この際、新規画像をアップロードする

 　上記後の状態が以下です。

③「Cocoon設定」－「画像」－「サムネイル画像」の縦横比率を、「9:16, 1:1.777..（地デジ・YouTube比）デフォルト」へ変更し、「変更をまとめて保存」

　この段階では、何も変化がありませんでしたので、画像添付はしません

④　③からは「Cocoon設定」の設定項目は、何も変えません
　　その状態で、再度「変更をまとめて保存」をクリックしました

　その状態が以下です。

以上が、chu-yaさんが見つけた事象かと思います。

今回は、何も「Cocoon設定」を変更せずに、「変更をまとめて保存」をしましたが・・・。

例えば・・・。

• 画像縦横比率変更－「変更をまとめて保存」
• その後、画像以外の「Cocoon設定」の何らかの項目を変更
  （例えば、「アピールエリア」や「通知」のメッセージ等を更新した等でも）

 
上記のような場合にも、同じようなことが起きてしまうのではないかと、危惧します。
（実際には試していません）

④の添付画像。
その通りです。
No-Image-alpha-150×150.jpgの画像サイズ150×150でなく、画像サイズが120×68に変わります。
画像サイズが150×150でない事が問題です、やっと伝わった笑

投稿者:: @mk2_mk2

その後、画像以外の「Cocoon設定」の何らかの項目を変更
（例えば、「アピールエリア」や「通知」のメッセージ等を更新した等でも）

そうです。
NO IMAGEのサムネイルだけは、更新した比率で、再作成される点で話しが複雑になり。

発生のアルゴリズム

1回目の[変更をまとめて保存]

1. 比率を変更した場合、値は変更した比率を保存。
2. 先の対策説明で記した、define定義は更新されない為、NO IMAGEは再作成されません。
3. 設定画面が更新表示。
4. 比率に合わせ、define定義(作成するNO IMAGEの高さ)が更新される。

2回目の[変更をまとめて保存]

更新されたdefine定義のファイル名（該当する高さ）が無いので、新たにファイル名が作られる。
この時、ファイル名-150×150も作り直される。

問題部分

先のコードを参照願います。

lib/page-settings/image-funcs.php

• get_no_image_320x180_url
• get_no_image_160x90_url
• get_no_image_120x68_url
• get_no_image_150x150_url

lib/page-settings/image-posts.php

投稿者:: @chu-ya

NO IMAGEのサムネイルだけは、更新した比率で、再作成される

比率を変えただけ（Cocoon設定の更新）では再生成されない認識でしたが、「NO IMAGE画像」は再生成されるんですね。
まったく気づいていませんでした。

良く気づきましたね、これ・・・。

あとは、わいひらさんがご確認くださると思いますので、しばらく待ちましょう。

投稿者:: @mk2_mk2

比率を変えただけでは再生成されない認識でしたが、「NO IMAGE画像」は再生成されるんですね。
まったく気づいていませんでした。

原因、対策コードを記したので、直ぐ分かるかと思ったのですが...

●経緯

以前、自動生成された画像ファイルで、サーバ容量が溢れ。
この為、functions.php、WordPress設定で、サムネイル自動生成は全て停止しており。
結果、メディアには、元画像しかなく。

しかしNO IMAGE、なぜか作られる為、停止させたく。
ソースコードを調べていたら偶然。

chu-yaさん

投稿者:: @chu-ya

原因、対策コードを記したので、直ぐ分かるかと思ったのですが...

おそらく、先入観というのか思い込みもあると思うんですよね。

私も思い込んでいました。
「再生成はされない」という思い込みを持ってしまっていましたので、正しく事象を把握できなかったのかもしれないです。

「NO IMAGE画像」だけは違う。
これがなかなか気づきづらいところですね。

思い込んでしまっては、いけないですね。
勉強になりました。

投稿者:: @chu-ya

ソースコードを調べていたら偶然。

発見の経緯が偶然とは言え、「こんなものかな」で済まさずに、最後まで突き詰めたところが、chu-yaさんの凄いところだと思います。

すみません、そろそろPCを落として、寝てしまいます・・・。

ようやく不具合の再現方法が理解できました。
理解が足りず恐れ入ります。
修正したものをアップしておきました。
https://github.com/xserver-inc/cocoon

----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.0.10
カテゴリ数：19
タグ数：146
ユーザー数：1
----------------------------------------------
●手順
[Cocoon設定]→[画像]→メディアに登録済みのNO IMAGE画像を選択
[Cocoon設定]→[画像]→全体画像設定「サムネイル画像」
比率だけを変更し、[変更をまとめて]を1回クリック

●確認結果
各比率に応じて、正しい比率でサムネイル画像が作成されている事を確認しました。
本件はクローズとします。

●余談
今回の調査で、NO IMAGE画像のサムネイル自動生成も停止し、元画像を参照する方法が分かり。
また、メディア登録の仕組みも理解でき。
良い勉強になりました。

ご確認いただきありがとうございます！
今回No Image画像は教えて頂けなかったら絶対気付かない部分だったと思います。
詳細なご報告感謝申し上げます。