Lazy Blocksのimageコントロールの仕様が変わったよ

2020-10-25

人物のアイコン素材 その5

ここ数日、画像が乱れていましたが・・・

Lazy Blockプラグインをv2.2.0にアップデートしたらこんな感じで表示がおかしくなったのにゃー

人物のアイコン素材 その5

画像がクロップ前のものだったり
画像自体が表示されていませんでしたね

そうなのにゃー
でプラグインの更新履歴を見るとimage関連でアップデートが入っていたから、その影響だと思うのにゃー

人物のアイコン素材 その5

なるほど
で、現在は治っていますからその対処法とは?

それが今回のテーマにゃー

人物のアイコン素材 その5

とりあえず公式サイトの情報を参照でしょうか?

残念ながらアップデート情報は大したことが書いてないのにゃー
執筆時点でのドキュメントはこんな感じにゃー

人物のアイコン素材 その5

以前の仕様がどうだったか覚えていませんがlinkとsizesが増えたのかな
特にそのままでも大丈夫そうですけど

しかし実際は表示がおかしくなるのにゃー
多分バグにゃー
ということで更新履歴を元に新機能を探りつつ修正してみるのにゃー

人物のアイコン素材 その5

それが現実的な対応ですね

記憶力からsizesは完全に新しい追加だからこれを探っていくにゃー

人物のアイコン素材 その5

どうやりますか?

とりあえず表示させてみるか
プラグインでテスト用ブロック作ってこんな感じで出力させてみるにゃー

<div>
	{{image.sizes}}
</div>
人物のアイコン素材 その5

imageはimageコントロールの名前ですね

適当な画像をギャラリーから指定して出力すると、Array と出力されたのにゃー

人物のアイコン素材 その5

sizesですから何かしら複数のデータが含まれているのでしょうね

面倒くさいにゃー
image.sizesの中身を展開してみるにゃー

<div>
	{{#each image.sizes}}
		<li>{{@key}}: {{this}}</li>
	{{/each}}
</div>
人物のアイコン素材 その5

なにか一覧が出てきましたね

どうやら画像サイズの情報が含まれているらしいにゃー
出力は、
thumbnail: Array
thumb320: Array
full: Array
とさらにArrayになっているのにゃー

人物のアイコン素材 その5

察するにWordPressで管理している画像サイズの情報ですね
環境によって出力結果は変わってきそうですけど

それっぽいにゃー
さらに展開してみるにゃー
面倒くさいにゃー

<div>
	{{#each image.sizes.thumbnail}}
		<li>{{@key}}: {{this}}</li>
	{{/each}}
</div>
人物のアイコン素材 その5

サムネイルの情報を展開ですね

アイコン用に使うので一番サイズが小さそうな奴で十分なのにゃー

人物のアイコン素材 その5

で、どうなりました?

こんな感じにゃー
height: 150
width: 150
url: http://hogehoge.xxxxx.jp/wp-content/uploads/2019/02/hogehoge-150×150.png
orientation: landscape
urlは適当な情報に置き換えといたけどにゃー

人物のアイコン素材 その5

画像サイズとurl、撮影の向きですね

Arrayが含まれてないからこれで終点にゃー
展開結果から新機能で画像サイズを選べるようになったってことでいいと思うのにゃー

人物のアイコン素材 その5

以前の直接URL指定だとオリジナルの画像を指定している形でしたね

にゃるほど
小さい画像サイズを選べるからロード時間も減ってグッドにゃー

人物のアイコン素材 その5

あとは修正ですね

今までimage.urlで指定していたところをimage.sizes.thumbnail.urlで置き換えるにゃー
これでいいはず
というかこれで治ったにゃー

人物のアイコン素材 その5

わかってみると意外と簡単に修正できましたね

あと、imageコントロールにPreview Sizeっていうやつも増えている気がするにゃー
これもサムネイルにしておくとイメージがずれないでいいはずにゃー

人物のアイコン素材 その5

おそらくここの一覧で出てくるものがsizesに含まれているのでしょうね

そうだと思うのにゃー

人物のアイコン素材 その5

今回はこれで終了ですが、気になるのはLazy BlocksのPROバージョンですね

確かにそうなのにゃー
今後通常版に機能追加されなかったり、アップデートが遅れたりしたら嫌なのにゃー
Block Labと同じ運命にならなきゃいいのだけどにゃー

人物のアイコン素材 その5

有料なのかどうか、どのような機能の違いがあるのか
まだまだ不明ですが今後の展開を見守りたいと思います

もし開発が止まったら
オープンソースでGPLだから誰かが引き継いでもらいたい
誰かが

人物のアイコン素材 その5

あくまで他人にやってもらいたいんですね

無理ゲーにゃー

人物のアイコン素材 その5

そういう展開にならないことを祈りましょう