2009-12-22

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



—————–

※2013-10-08追記
現在は「QF-GetThumb」は使用せずに「Auto Post Thumbnail」を使用しています。
http://aroun-d.com/2013/10/05/4769/
—————–


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

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/

コメント / トラックバック 10 件

  1. sugihara より:

    はじめまして。丁寧な説明が参考になりました。こちらのサイトを
    参考に、ワードプレスにサムネイル表示を導入したのですが、修正に手こずっています。
    92~95行の修正についてもう少し詳しく教えていただけないでしょうか。
    そのままコピーペーストではうまくいきません。
    私のほうで開くと、90~93行が以下のようになります。
    if ($w_ratio < $h_ratio) {
    $height = $o_height * $w_ratio;
    }else{
    $width = $o_width * $h_ratio;
    たいへんお手数ですが、お時間がございましたら、ご教示頂けますと助かります。

  2. nishi より:

    sugiharaさん、コメントありがとうございます。
    わかりづらい説明で申し訳ありません。。

    あらためて最新のプラグインもダウンロードして確認しましたところ、
    元ファイルでは、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;
    }

    こちらで一度お試しいただけますでしょうか。
    よろしくお願いします。

  3. sugihara より:

    nishimura様、迅速なお返事ありがとうございます。
    さっそくご教示いただいたように書き直したら、正方形に表示されるように
    なりました。ありがとうございます!嬉しいです。自分ではif else文が
    良くわからなかったので、//以降の解説がありがたかったです。
    わざわざダウンロードして検証して下さり、惜しみなく知識を伝授して
    くださったこと、心よりお礼を申し上げます。

  4. nishi より:

    sugiharaさん、ていねいなコメントありがとうございます。
    表示できたとのこと、こちらもうれしいです!!

    もともとの文章も今回の書き方に修正しておきました。
    今後こういった記事を書くときの参考になりました。
    ありがとうございました。

  5. […] してくれる。 コツは縦横のトリミングの時に短い辺を使うように変更するところ。  →around designで変更部分が説明されてました。 ++++++++++++++++++++++ // 小さい方の値を基準に縦横幅を再 […]

  6. […] してくれる。 コツは縦横のトリミングの時に短い辺を使うように変更するところ。  →around designで変更部分が説明されてました。 ++++++++++++++++++++++ // 小さい方の値を基準に縦横幅を再 […]

  7. […] こちらに関しては以下のページが詳しいです。 [WordPress] サムネイルを自動で作成して表示するプラグイン「QF-GetThumb」 | around design […]

  8. […] リサイズの対処法について、詳しい内容は、[WordPress] サムネイルを自動で作成して表示するプラグイン「QF-GetThumb」 | around designを参考にさせて頂きました。 Category: WordPressTags: WPプ […]

  9. eemi より:

    はじめまして!
    wordpresss初心者です。

    こちらのサイトを参考にプラグインを導入致しました!
    問題なく簡単に導入でき大変助かりました!ただひとつ、画像余白の黒い部分を消すことができません。

    上記の記事のとおりリサイズを試みたのですが、エラーがでてしまいます。。。2回程トライしたのですが、エラーは同じファイル内func_image.phpの108行目だったり、wp-includes内のpluggable.php内だったりします。
    このような事象が起きたことはありますか?

    また別な方法でも良いので、黒余白部分を表示させない方法などありましたらご伝授願います!!!

  10. nishi より:

    eemiさん、コメントありがとうございます。

    画像余白の黒色が出ているということですので、
    おそらく「小さい方の値を基準に縦横幅を再計算→大きい方を基準に変更!」
    のところがうまくいっていないのではないかなーと思います。

    またメールにて連絡させていただきますね。

Comment:

Trackback URL: