baserCMSでアイキャッチ画像を表示させてみよう!
ホームページを制作しているとき、記事のアイキャッチ画像をつけることでぐっと見栄えがよくなりますよね。
baserCMSにもこうしたアイキャッチ画像を使うための機能が備わっています。
今回はbaserCMSでアイキャッチ画像を表示させる方法をご紹介します。
baserCMSでブログのアイキャッチ画像を扱う2つの関数
baserCMSにはアイキャッチ画像を表示させる独自の関数が2種類用意されています。
- eyeCatch関数
- getEyeCatch関数
どちらもアイキャッチ画像を表示させることは出来ますが、それぞれ引数として使えるパラメーターなどが多少違います。
今回はgetEyeCatch関数を使用してアイキャッチ画像の表示方法を説明したいと思います。
getEyeCatch関数
この関数はアイキャッチ画像を表示させる関数です。
使い方は次のようなコードをブログテンプレートに記述します。
1 | <?php echo $this->Blog->getEyeCatch($post); ?> |
そうするとこのようなHTMLが出力されます。
1 | <a href="アップロードした画像のパス" class="img-eye-catch" rel="colorbox"><img src="アップロードした画像のパス" alt="" /></a> |
オプションとして使えるパラメーターは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | // クラス名の設定 'class' => 'img-eye-catch' // widthの設定 'width' => '100px' // heightの設定 'height' => '100px' // alt属性 'alt' => 'alt属性に入力するテキスト' // 画像へのリンクの有無(該当する記事ではなく画像のリンク) 'link' => false // 画像サイズ 'imagesize' => 'thumb' // モバイルの画像を表示するかどうか 'mobile' => false // titleについてエスケープするかどうか 'escape' => false // サムネイル画像が無かった場合の代替画像 'noimage' => 'common/noimage.png' // 一時データを保存するかどうか 'tmp' => false // 画像が存在しない場合でも強制的に出力するかどうか 'force' => false |
実際にパラメータを使用してアイキャッチ画像を表示させる際にはテンプレートファイルに次のように書きます。
1 | <?php echo $this->Blog->getEyeCatch($post, array('width'=>'300px', 'height'=>'100px', 'noimage'=>'images/thumnail01.png','link' => false)); ?> |
この例ではwidthに300px、heightに100pxを設定し、画像が設定されていない場合はimages/thumnail01.pngの画像を表示するようにしています。
linkパラメーターをfalseに設定することで画像リンクをオフにしています。このようにするとaタグで囲まず画像のみを表示することができます。
記事へのリンク付きアイキャッチ画像の表示方法
上記の関数では記事へのリンクを付けたアイキャッチ画像を取得することが出来ません。
postLink関数とgetEyeCatch関数を組み合わせることによって、記事リンクを付けたアイキャッチ画像を出力することが出来ます。
具体的にはこんなコードを書きます。
1 | <?php $this->Blog->postLink($post, $this->Blog->getEyeCatch($post, array('link' => false))); ?> |
記事へのリンクを取得するpostLink関数の第2引数にgetEyeCatch関数を使用し、getEyeCatch関数のlinkパラメーターををfalseに設定しておきます。
上記の方法で記事へのリンクが付いたアイキャッチ画像を出力することが出来ます。
以上、baserCMSでアイキャッチ画像を表示する方法でした。
それぞれの関数に使い方については参考リンクを張っておきますのでご参考下さい。
中小企業のホームページ制作やサイトリニューアルならシンス株式会社まで。