レイアウトの崩れないサムネイル表示の方法

こんばんは。

県外にでかけるのが好きな私です。
今年は10月に行った東京で最後か～と思っていたのですが、土曜日に大阪に行ってきました♡
思い立ったのはその2日前ですので、ほんとに今から一週間前は東京を最後に今年を終えるつもりでした。
アメリカ村と大阪城行ってきました。8階まで階段でのぼりましたよ～！

ということで12月、最初で最後の土曜休暇をおもいっきり楽しんできたので、切り替えて業務を張り切ります。
ちな、今週の土曜は岡山webクリエイターズに現地で参加してきます！

WordPressで制作をしていると、ブログ一覧にアイキャッチを表示したい！という方や、アイキャッチがあったほうが絶対綺麗！と考えるデザイナーさんも多いのではないでしょうか？

しかし画像を設定しようとしても、時には拾ってきた画像、時にはスマホのカメラ、ときにはデジカメ…などアップロードしたい画像のサイズは様々です。
もちろんばらばらのサイズのままでサムネイルを設定すれば記事一覧の部分で縦も横もがったがたになってしまいます。

しかし、毎日サムネイルのために画像をトリミングするのは面倒くさいし、そもそもクライアントにそんな手間をかけさせるわけには…！ということで、レイアウトの崩れないサムネイル設定方法を備忘録も兼ねまして書き残します。

WordPressにも自動でトリミングしてくれる機能は備わっているのですが、それを使うとサーバーの中に「元画像」「100×100に圧縮された画像」「250×750に圧縮された画像」「500×500に圧縮された画像」…などと同じ画像に対して３個も8個も時には数十のデータが作成されてしまいますので今回は使いません。
サーバーが重たくなってしまうのは嫌ですしね…！

結論から申しますと今回利用したのは、
background-size:coverです。

ちょうどサムネイル機能を設定したい投稿がカスタム投稿だったので、今回は

カスタム投稿の記事内の一番上の画像をとってきてサムネイルに設定する(背景画像ver)です。

サムネイルにするには背景画像にしなくても、overflowで作る方法もあるのですが…これを使わない理由は後述します。

background-size:coverは「要素の全体を隠す最小限の大きさ」
便利ですよね。
その背景を表示するエリアは100px×100pxというように固定でつくってやらねばなりませんけどね。

そのソースはこちら。

function.php

<?php
function catch_that_image($post_id = NULL)
{
        if ( !empty($post_id) )
        {
                $posts = get_post($post_id);
                $post_content = $posts->post_content;
        }
        else
        {
                global $post, $posts;
                $post_content = $post->post_content;
        }

        $first_img = '';
        ob_start();
        ob_end_clean();

        $output = preg_match_all('/<img.*?src=(["\'])(.+?)\1.*?>/i', $post_content, $matches);
        $first_img = $matches[2][0];

        if ( empty($first_img) ) {
                $first_img = '';
        }

        return $first_img;
}
?>

page-home.phpなどのループ内に記述

<?php
        // 記事内の一番最初の画像を取得
        $img_url = catch_that_image();
        if ( !empty($img_url) ): ?>
        <a class="thumnail" href="<?php the_permalink() ?>" style="background:url(<?php echo $img_url; ?>)no-repeat center center;background-size:cover;"></a>
        <?php else: ?>
        <a class="thumnail" href="<?php the_permalink() ?>" style="background:url(<?php bloginfo("template_directory");?>/img/noimage.gif)no-repeat center center;"></a>
<?php endif; ?> 

style.css

.thumnail {
        display:inline-block;
        width:120px;
        height:80px;
        overflow:hidden!important;
        border-radius:5px;
}

以上です。

ちなみに、background-size:ceverを使う理由としましては。

background-size:contain

これはまあ、今回ではまったく役に立ちません。
レイアウト崩れは防げますが、サムネイルの中身がちょっとかっこ悪いですよね。

そして、overflow:hiddenを使わない理由。

今回はクライアント側での更新だったため、縦長の画像、横長の画像が入り乱れる可能性があったためです。
外枠にoverflowを設定し、内側の画像のwidthやheightを調整するhiddenではレイアウト崩れは防げてもサムネイルの中身が不格好になってしまう可能性があったからです。

このような形に…。
覆い隠すにはどちらも100%にすればいいのですが、もちろん画像は崩れます。
防ぐためには
「できるだけ横長の画像使ってくださいね！」
「縦長の画像も横長にトリミングして使ってくださいね！」

と言わなければならなくなりますが、できるだけクライアントの自由に投稿していただきたいですよね。

overfloｗ：hiddenを使う場合でも、縦横どちらにも対応する方法はあります。

縦か横かのサイズを200%など、外枠よりも大きくしておくことです。
これでもまだ穴はありますが、よっぽどの縦長横長の画像でないかぎりは不格好にはなりません。

しかし、元のサムネイルのほんの一部しか表示されていないのがおわかりでしょうか？

個人的にぐぬぬぬ…と思うところがあるのでこちらも使いたくない理由の一つです。

大阪城にいってきたよ！というブログを書いて画像を乗せても、拡大されているせいで石垣しか写っていない！なんてことにはしたくないですからね！

以上、もしサムネイルの取得で悩んでいる方がいればbackground-size:coverをお試し下さい。
hiddenよりも手間も時間もかかり、エラーも出やすいかもしれませんが、きっとこちらの方が穴のないサムネイル表示を実現してくれるはずです。