- 2009-01-15 (木) 15:29
- Yet Another Photoblog
(※Yet another photoblogプラグインを使用していることが前提です。lightboxプラグインを導入しているとなお良い感じになります。)
元画像のサイズがサムネイルのサイズと同じor小さい場合、元画像へのリンクをつけても意味がないのでつけないようにしました。
当たり前の処理なんですがやってなかったなあ、と思って。
あと、イラスト個別ページで横幅が大きすぎる場合は縮小表示する方法をメモしておきます。
(1-1)元画像サイズ≦サムネイルサイズなら元画像へリンクしない – サムネイルサイズを横幅のみ設定する場合
サムネイルサイズは「$thumb_w = 150;」の数字を好きなサイズに変えればOKなはず。
<?php
if ($post->image):
$thumb_w = 150;
$w = $post->image->width;
if($w>$thumb_w) :
$thumbnailConfig = array('w=' . $thumb_w,'fltr[]=usm|30|0.5|3');
?>
<div class="pict"><a href="<?php echo $post->image->uri ?>" title=""<?php the_title() ?>" の絵を拡大(<?php echo $post->image->width ?>x<?php echo $post->image->height ?>)" rel="lightbox"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig) ?>" alt="<?php the_title() ?>" width="<?php echo $post->image->getThumbnailWidth($thumbnailConfig) ?>" height="<?php echo $post->image->getThumbnailHeight($thumbnailConfig) ?>" /></a></div>
<?php else : ?>
<div class="pict"><img src="<?php echo $post->image->uri ?>" width="<?php echo $post->image->width ?>" height="<?php echo $post->image->height ?>" alt="<?php the_title(); ?>" /></div>
<?php
endif;
endif;
?>
出力結果サンプル↓
<!-- 150px以上 --> <div class="pict"><a href="/wp-content/sample/sample.jpg" title=""サンプル" の絵を拡大(300x300)" rel="lightbox"><img src="http://hogehoge.net/wp-content/plugins/yet-another-photoblog/cache/thumbnailuri.png" alt="サンプル" width="150" height="150" /></a></div> <!-- 150px以下 --> <div class="pict"><img src="/wp-content/sample/sample.jpg" width="150" height="150" alt="サンプル" /></div>
(1-2)元画像サイズ≦サムネイルサイズなら元画像へリンクしない – サムネイルサイズを高さのみ設定する場合
高さだけで振り分けるシーンってあまりないかな?
変えるのは「$thumb_h = 150;」の数字を。
<?php
if ($post->image):
$thumb_h = 150;
$h = $post->image->height;
if($h>$thumb_h) :
$thumbnailConfig = array('h=' . $thumb_h,'fltr[]=usm|30|0.5|3');
?>
<div class="pict"><a href="<?php echo $post->image->uri ?>" title=""<?php the_title() ?>" の絵を拡大(<?php echo $w ?>x<?php echo $h ?>)" rel="lightbox"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig) ?>" alt="<?php the_title() ?>" width="<?php echo $post->image->getThumbnailWidth($thumbnailConfig) ?>" height="<?php echo $post->image->getThumbnailHeight($thumbnailConfig) ?>" /></a></div>
<?php
else :
?>
<div class="pict"><img src="<?php echo $post->image->uri ?>" width="<?php echo $post->image->width ?>" height="<?php echo $post->image->height ?>" alt="<?php the_title(); ?>" /></div>
<?php
endif;
endif;
?>
(1-3)元画像サイズ≦サムネイルサイズなら元画像へリンクしない – サムネイルサイズを縦横ともに設定する場合
変えるのは「$thumb_h = 150;」と「$thumb_w = 150;」の数字を。
<?php
if ($post->image):
$thumb_h = 150;
$thumb_w = 150;
$w = $post->image->width;
$h = $post->image->height;
if( $h>$thumb_h || $w>$thumb_w ) :
$thumbnailConfig = array( 'w=' . $thumb_w , 'h=' . $thumb_h , 'fltr[]=usm|30|0.5|3');
?>
<div class="pict"><a href="<?php echo $post->image->uri ?>" title=""<?php the_title() ?>" の絵を拡大(<?php echo $w ?>x<?php echo $h ?>)" rel="lightbox"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig) ?>" alt="<?php the_title() ?>" width="<?php echo $post->image->getThumbnailWidth($thumbnailConfig) ?>" height="<?php echo $post->image->getThumbnailHeight($thumbnailConfig) ?>" /></a></div>
<?php
else :
?>
<div class="pict"><img src="<?php echo $post->image->uri ?>" width="<?php echo $post->image->width ?>" height="<?php echo $post->image->height ?>" alt="<?php the_title(); ?>" /></div>
<?php
endif;
endif;
?>
(2)個別ページで元画像サイズが大きすぎる場合、縮小して元画像へのリンクをつける
上のとなにが違うのという感じですが、基本はなにも変わりません(笑)
これはイラストの個別ページでの動作で、元画像の幅が700pxを超えたら縮小表示して、大きな画像の閲覧は任意とするものです。「横幅が長いので縮小しています」という注意書きが出ます。一応、横幅800pxの環境に対応ということで。
<?php
if ($post->image): ?>
$thumb_w = 700;
$w = $post->image->width;
if($w>$thumb_w) :
$thumbnailConfig = array('w=' . $thumb_w,'fltr[]=usm|30|0.5|3');
?>
<div class="pict"><a href="<?php echo $post->image->uri ?>" title=""<?php the_title() ?>" を拡大する(<?php echo $post->image->width ?>x<?php echo $post->image->height ?>)" rel="lightbox"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig) ?>" alt="<?php the_title() ?>" width="<?php echo $post->image->getThumbnailWidth($thumbnailConfig) ?>" height="<?php echo $post->image->getThumbnailHeight($thumbnailConfig) ?>" /></a><br />横幅が長いので縮小しています。クリックすると拡大します。元のサイズは <?php echo $post->image->width ?>x<?php echo $post->image->height ?> です。</div>
<?php else : ?>
<div class="pict"><img src="<?php echo $post->image->uri ?>" width="<?php echo $post->image->width ?>" height="<?php echo $post->image->height ?>" alt="<?php the_title(); ?>" /></div>
<?php
endif;
endif;
?>
※この記事は以下の記事に修正を加え再録したものです。下記のURLにアクセスした場合はこちらにリダイレクトするように設定しています。
[Title] Yapb 元画像のサイズで動作を振り分ける ≪ Blog ≪ LOVING CAT
[URL] http://lovingcat.net/2008/01/10/distribute-according-to-the-size/
コメント:0
トラックバック:0
- この記事のトラックバック URL
- http://web.lovingcat.net/diverges-by-size/trackback/
- トラックバックの送信元リスト
- 元画像のサイズで動作を振り分ける - LC Memo より