サポート » 使い方全般 » アーカイブページの画像をサムネイルサイズで表示したい

  • t t

    (@tsugubai)


    CSSでmax-widthプロパティを使ってIE以外では表題の希望が実現できたのですが、IEだけは縦横比を保持してくれず、縦に長い画像が表示されてしまいました。

    なので、画像アップロード時にwordpressが自動で作ってくれるサムネイルを記事中に表示しようと思ったのですが、the_contentは画像を含んだ本文を表示してしまうし、the_contentで吐き出されるソースから正規表現でimgタグを取り除いても、本文中における画像の位置や、右寄せ・左寄せ等の情報が抜け落ちてしまってうまくいきませんでした。

    ページによって画像の最大幅を指定するということを実現するにはどのような方法があるでしょうか?

    ご教授お願いします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • t t

    (@tsugubai)

    読み返すとまとまりがない文章になってしまっていて、わかりにくいかと思ったので再投稿します。

    つまり、表示しているページやテンプレートごとに、表示する画像の最大サイズを指定する方法を知りたいです。。

    よろしくお願いしますm(__)m

    CSSでも良いということなので、jQueryなどJavascriptを使う方法はいかかでしょうか?
    テンプレートごとの切り替えはWordpress標準のbodyのclassを利用できそうです。

    質問内容を誤解してるかもしれませんが、コードのイメージを書いてみました。
    動作確認してないので眺める程度でご勘弁。

    jQuery(function($){
    	function fix_img_size(body_class, max_width){
    		//body_classや本文ブロックのClassなどでimgを絞り込み
    		$('body.' + body_class + ' .content-class img').each(
    			function(){
    				if( $(this).attr('width') != undefined &&
    				    $(this).attr('height') != undefined &&
    				    $(this).attr('width') > max_width){
    				    //縦横サイズ取得&計算
    					var ori_width = $(this).attr('width');
    					var ori_height = $(this).attr('height');
    					var ratio = max_width / ori_width;
    					var resized_height = Math.ceil(ori_height * ratio);
    					//属性設定
    					$(this).attr({'width': max_width, 'heihgt': resized_height});
    				}
    			}
    		);
    	}
    	fix_img_size('archive', 300);
    	fix_img_size('home', 400);
    	fix_img_size('single', 600);
    });

    ただ縮小する全てのimgタグにwidth,height属性がしっかり付いていればいいですが、
    そうでないとそれぞれの画像の読み込み完了後にサイズを取得し、縮小する必要があるなど
    若干面倒くさい所がありそうです。

    t t

    (@tsugubai)

    返信ありがとうございます。

    なるほど、縦を自分で計算してしまうんですね!!
    教えていただいた方法でトライしてみます。

    ありがとうございます。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「アーカイブページの画像をサムネイルサイズで表示したい」には新たに返信することはできません。