記事にアイキャッチ画像
オプション機能を使用した記事へのアイキャッチ画像挿入方法。また、カスタマイズのヒントになればと良いかなと思ったので公開してみます。しかしオプション機能は便利ですね。
オプション機能を利用すれば、もっと楽に出来るようです。...
htmlテンプレートの編集
編集するhtmlテンプレート
- templates/internals/default/default.html
- templates/internals/view/default.html(任意)
- templates/internals/page/default.html(任意)
適用方法
templates/internals/default/default.html(記事一覧表示) 91行目辺りの
<div class="content">
直後などに(アイキャッチなので目立つ場所に)
<!--{if $entry_associates[$entry.id].option.eye_catch}-->
<p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_options/{$entry.id}/eye_catch/{$entry_associates[$entry.id].option.eye_catch|nl2br}" alt="{$entry.title}" title="{$entry.title}" /></p>
<!--{/if}-->
を追加。
このままだとオプションの一覧を表示した場合に、画像のURLが表示されてしまうので 129行目辺りの
<!--{if $entry_associates[$entry.id].option[$option.id] != ''}-->
を
<!--{if $entry_associates[$entry.id].option[$option.id] != '' && $option.id !='eye_catch'}-->
に変更。
個別記事やページにも表示させる場合は、以下の様にして下さい。
個別記事にも表示
templates/internals/view/default.htmlの16行目辺りの
<div class="content">
の直後あたりに
<!--{if $entry_associate.option.eye_catch}-->
<p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_options/{$entry.id}/eye_catch/{$entry_associate.option.eye_catch|nl2br}" alt="{$entry.title}" title="{$entry.title}" /></p>
<!--{/if}-->
を追加。次に60行目の
<!--{if $entry_associate.option[$option.id] != ''}-->
を
<!--{if $entry_associate.option[$option.id] != '' && $option.id !='eye_catch'}-->
に変更。
個別ページにも表示
templates/internals/page/default.htmlの3行目の
<h2>{$page.title}</h2>
の直後あたりに
<!--{if $page_associate.option.eye_catch}-->
<p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_options/{$page.id}/eye_catch/{$page_associate.option.eye_catch|nl2br}" alt="{$page.title}" title="{$page.title}" /></p>
<!--{/if}-->
を追加。次に50行目の
<!--{if $page_associate.option[$option.id] != ''}-->
を
<!--{if $page_associate.option[$option.id] != '' && $option.id !='eye_catch'}-->
に変更。また使用する際は、画像のwidthとheightをソース中に書いていないので、任意で書き足して下さい。