ホーム > 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="&quot;<?php the_title() ?>&quot; の絵を拡大(<?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="&quot;サンプル&quot; の絵を拡大(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="&quot;<?php the_title() ?>&quot; の絵を拡大(<?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="&quot;<?php the_title() ?>&quot; の絵を拡大(<?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="&#34;<?php the_title() ?>&#34; を拡大する(<?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 より

ホーム > Yet Another Photoblog > 元画像のサイズで動作を振り分ける

検索
フィード
メタ情報

Return to page top