Jquery imgLiquid 様々なサイズの画像を縮小・トリミングして表示

imgLiquid というjQuery pluginが非常に便利なのでWordpressで利用しようと、pluginにしてみました。 imgLiquidについては下記を参考にしてください。

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

WordpressやHTMLでページを作る際のサムネイルなどの大量の処理は非常に面倒です。 頭で希望する通りにやってくれるプラグインなどは殆どありません。 でもimgLiquidはかなりの手助けになるでしょう。特に管理者の手間は間違いなく減らせます。

ではimgLiquidは何をしてくれるかですが、下に書いた画像処理をJavascriptで簡単にやってくれます。

1. 画像を親要素のサイズに縮尺を保って縮小する
2. 縮小時に余白を出さないように余った部分をトリミングする

以上です。

これで、どのくらい便利かというと、よくある正方形のサムネイルが無加工で簡単にできてしまいます。もちろん中央に寄る形でトリミングしますので、必要な部分が切れてしまうことがあるかもしれませんが、全ての画像を縮小・トリミングすると考えれば問題ないでしょう（その何枚かに手間を掛ければいいだけですから）。

では、使用例ですが下のようになります。

(1)通常表示 259×194

(2)imgLiquid使用 150×150

以上です。

●使用方法:

●登録済みスタイル 使用方法: imgLq100 100×100の正方形に表示 imgLq150 150×150の正方形に表示 imgLq150 200×200の正方形に表示 imgLq150 250×250の正方形に表示

メモ

• simplicity では、lazyloadをオンにすると上手く動かない。