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

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

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装 $(document).ready(function() { $(".div1077").imgLiquid(); }); ...

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

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

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

以上です。

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

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

(1)通常表示 259×194

index

(2)imgLiquid使用 150×150

<img class=”imgLq150″ src=”http://123.or.jp/wp-content/uploads/2015/05/index.jpeg” />

index

以上です。

●使用方法:
<div style=”width:130px; height:130px;”>
<img class=”imgLq” src=”xxx” /></div>
●登録済みスタイル 使用方法:
<img class=”imgLq150″ src=”xxx” />
imgLq100 100×100の正方形に表示
imgLq150 150×150の正方形に表示
imgLq150 200×200の正方形に表示
imgLq150 250×250の正方形に表示
細かい設定を追加したり、変更したいときは、/httpdocs/wp-content/plugins/wp-imgLiquid/js/WPimgLiquid.js を修正してください。
ダウンロードは以下。
https://github.com/yukioshibata/WPimgLiquid

メモ

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする