昨日は、画像の比率を調整するためのJSスクリプトを書きました。

今回は詳細ページにMedium 640を貼った画像をトップページや検索ページでそのまま表示すると画像サイズも大きいため、読み込みに多少時間がかかってしまいます。そのため、サムネイル用のSmall 320を表示するように画像のURLを置換するPHPコードを書いてみました。

function replace_flickr_image_size($img, $size='n') {
    $pattern = "/(farm[0-9]+\.staticflickr\.com\/.*_)(m|z|c|l|o)\.(jpg|gif|png)/";
    $replace = "$1$size.$3";
    $img = preg_replace($pattern, $replace, $img);
    return $img;
}

あとは、これを101行目付近で生成しているグリッド用画像のURLを置換します。

// check image link
//$chk_imglink = '/(]*?)>)'. preg_quote($matches2[0], '/') .'/';
$chk_imglink = '/(]*?)>)'. preg_quote($matches2[0], '/') .'/';
if ($flg_img_forcelink) {
    $grid_img = '' . $grid_img . '';
}   
else if ( preg_match($chk_imglink, $content, $matches3) ) { 
    $grid_img = $matches3[1] . $grid_img . '';
}   
$grid_img = replace_flickr_image_size($grid_img);

そこで、JSで簡単にではありますが、画像サイズを調整するようなJSスクリプトを書いてみました。

        $('.grid-image img').each(function(){
            var $img = $(this);
            $img.hide().attr({ width: "", height: "" });
            var w = $img.width();
            var h = $img.height();
            if (w >= h) {
                w = 290;
                h = 217;
            } else {
                w = 217;
                h = 290;
            }
            $img.attr({ width: w, height: h }).show();
        });

これをheader.php内にある下記のコードの直下くらいに貼り付ければ正常に動作するかと思います。

(function($){
    $(function(){