Lazy Blocksのimageコントロールの仕様が変わったよ
ここ数日、画像が乱れていましたが・・・
Lazy Blockプラグインをv2.2.0にアップデートしたらこんな感じで表示がおかしくなったのにゃー
画像がクロップ前のものだったり
画像自体が表示されていませんでしたね
そうなのにゃー
でプラグインの更新履歴を見るとimage関連でアップデートが入っていたから、その影響だと思うのにゃー
なるほど
で、現在は治っていますからその対処法とは？
それが今回のテーマにゃー
とりあえず公式サイトの情報を参照でしょうか？
残念ながらアップデート情報は大したことが書いてないのにゃー
執筆時点でのドキュメントはこんな感じにゃー
https://lazyblocks.com/documentation/blocks-controls/image/
以前の仕様がどうだったか覚えていませんがlinkとsizesが増えたのかな
特にそのままでも大丈夫そうですけど
しかし実際は表示がおかしくなるのにゃー
多分バグにゃー
ということで更新履歴を元に新機能を探りつつ修正してみるのにゃー
それが現実的な対応ですね
記憶力からsizesは完全に新しい追加だからこれを探っていくにゃー
どうやりますか？
とりあえず表示させてみるか
プラグインでテスト用ブロック作ってこんな感じで出力させてみるにゃー
<div>
{{image.sizes}}
</div>imageはimageコントロールの名前ですね
適当な画像をギャラリーから指定して出力すると、Array と出力されたのにゃー
sizesですから何かしら複数のデータが含まれているのでしょうね
面倒くさいにゃー
image.sizesの中身を展開してみるにゃー
<div>
{{#each image.sizes}}
<li>{{@key}}: {{this}}</li>
{{/each}}
</div>なにか一覧が出てきましたね
どうやら画像サイズの情報が含まれているらしいにゃー
出力は、
thumbnail: Array
thumb320: Array
full: Array
とさらにArrayになっているのにゃー
察するにWordPressで管理している画像サイズの情報ですね
環境によって出力結果は変わってきそうですけど
それっぽいにゃー
さらに展開してみるにゃー
面倒くさいにゃー
<div>
{{#each image.sizes.thumbnail}}
<li>{{@key}}: {{this}}</li>
{{/each}}
</div>サムネイルの情報を展開ですね
アイコン用に使うので一番サイズが小さそうな奴で十分なのにゃー
で、どうなりました？
こんな感じにゃー
height: 150
width: 150
url: http://hogehoge.xxxxx.jp/wp-content/uploads/2019/02/hogehoge-150×150.png
orientation: landscape
urlは適当な情報に置き換えといたけどにゃー
画像サイズとurl、撮影の向きですね
Arrayが含まれてないからこれで終点にゃー
展開結果から新機能で画像サイズを選べるようになったってことでいいと思うのにゃー
以前の直接URL指定だとオリジナルの画像を指定している形でしたね
にゃるほど
小さい画像サイズを選べるからロード時間も減ってグッドにゃー
あとは修正ですね
今までimage.urlで指定していたところをimage.sizes.thumbnail.urlで置き換えるにゃー
これでいいはず
というかこれで治ったにゃー
わかってみると意外と簡単に修正できましたね
あと、imageコントロールにPreview Sizeっていうやつも増えている気がするにゃー
これもサムネイルにしておくとイメージがずれないでいいはずにゃー
おそらくここの一覧で出てくるものがsizesに含まれているのでしょうね
そうだと思うのにゃー
今回はこれで終了ですが、気になるのはLazy BlocksのPROバージョンですね
確かにそうなのにゃー
今後通常版に機能追加されなかったり、アップデートが遅れたりしたら嫌なのにゃー
Block Labと同じ運命にならなきゃいいのだけどにゃー
有料なのかどうか、どのような機能の違いがあるのか
まだまだ不明ですが今後の展開を見守りたいと思います
もし開発が止まったら
オープンソースでGPLだから誰かが引き継いでもらいたい
誰かが
あくまで他人にやってもらいたいんですね
無理ゲーにゃー
そういう展開にならないことを祈りましょう
https://possiblytrue.com/インターネット/lazy-blocksとblock-l...