Home > 2009 > 12月 > 22
2009-12-22

[WordPress] サムネイルを自動で作成して表示するプラグイン「QF-GetThumb」


各記事の最初の画像のサムネイルを作ってくれるプラグインです。
トップページはコンパクトにしたいときにとても便利だと思います。

index.phpなどサムネイルを表示させたい部分に下記のコードを追加します。
（100px×100pxにトリミングする場合）

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php echo the_qf_get_thumb_one('num=0&width=100&crop_h=100&height=100&crop_w=100'); ?></a>

このプラグインのトリミングは、幅・高さで大きい方を基準にリサイズする処理になっていたので、
横長（もしくは縦長）の画像のサムネイルを正方形にしようとすると、
上下（もしくは左右）に余白ができてしまっていたので、
小さい方を基準にリサイズするように改造しました。

※2010/09/03変更

func_image.phpの92、95行目をそれぞれ
$width = $o_width * $h_ratio;
$height = $o_height * $w_ratio;
と変更します。

func_image.phpの89行目から94行目が下記のようになっていると思います。

// 小さい方の値を基準に縦横幅を再計算
if ($w_ratio < $h_ratio) {
$height = $o_height * $w_ratio;
}else{
$width = $o_width * $h_ratio;
}

元々は小さいほうの値を基準に計算していますので、大きい方を基準にするよう変更します。

// 小さい方の値を基準に縦横幅を再計算→大きい方を基準に変更！
if ($w_ratio < $h_ratio) {
$width = $o_width * $h_ratio;
}else{
$height = $o_height * $w_ratio;
}

これで正方形のサムネイルが表示されるようになりました！

QF-GetThumb
http://wordpress.org/extend/plugins/qf-getthumb/

2009-12-22 22:19 | WordPress | Comments(8)
Tags:

▲PageTop
2009-12-22

[WordPress] lightboxで画像の最大幅を設定


自分でブログを書く場合は画像を指定のサイズにリサイズしてからアップするのですが、
あまりPCに詳しくない人がブログを書く場合には、大きいサイズのままアップすることがあると思います。

このときに、lightboxで拡大表示をすると、大きいサイズのまま表示されてしまいます。
それを防ぐために、lightboxのプラグインを改造しました。
横幅の最大値を960px、縦を720pxとしました。

まずCSSの変更です。IE6用にもハックを追加。
lightbox-2-wordpress-plugin/lightbox/css/lightbox.css に下記を追加。

#lightbox img#lightboxImage{
width: auto; height: auto; max-width: 960px; max-height: 720px;
}
* html body #lightbox img#lightboxImage{
height: expression(this.height >= 720 ? "720px" : "auto");
}


次にJavascriptの変更。
lightbox-2-wordpress-plugin/lightbox/js/lightbox.js
「 imgPreloader.onload = (function(){ 」の次の行から下記を追加。

var imgWidthMax = 960; // Max Width Size [px]
var imgHeightMax = 720; // Max Height Size [px]
var imgNewScale = 1;
if( imgWidthMax < imgPreloader.width ) {
imgNewScale = imgWidthMax / imgPreloader.width;
imgPreloader.width = imgWidthMax;
imgPreloader.height *= imgNewScale;
}
if( imgHeightMax < imgPreloader.height ) {
imgNewScale = imgHeightMax / imgPreloader.height;
imgPreloader.width *= imgNewScale;
imgPreloader.height = imgHeightMax;
}



これでバッチリです。
本当はローディングアイコンの位置とかも調整したいのですが、、
それはまた時間のあるときにしたいと思います。

ちなみに理想的には大きいサイズのファイルをアップさせないべきだと思います。
プラグインの「Resize At Upload Plus」を使うとアップする画像のサイズを指定サイズにできます。

2009-12-22 21:35 | WordPress | Comments(2)

▲PageTop