1. HOME
  2. フロントエンド
  3. 【a-blog cms】メイン画像をエントリーごとに設定して表示する

【a-blog cms】メイン画像をエントリーごとに設定して表示する

フロントエンド

エントリーサマリーなので表示する際のメイン画像を、エントリー内の画像を使用するのではなく、エントリーごとに個別に設定する方法です。エントリー内の画像はメイン画像にしたくない!メイン画像が別で指定したい!などの場合に使えます。

デフォルトのメイン画像

a-blog cmsでのエントリーのメイン画像は基本的に最初に載せた画像になっています。
画像のユニットの詳細を開くとある、【メイン画像】の部分にチェックがあるものがメイン画像としてエントリーサマリー内などで表示されます。


本題


ここからが本題です。以下の2点を行います。

  • エントリーごとに画像を登録できるようにする
  • モジュール内の画像表示をIF文で切り替える

エントリーごとに画像を登録できるようにする

サイトのカスタムフィールドメーカーまたは、【管理画面 / コンフィグ / カスタムフィルドメーカー】を使用します。
それぞれ値を入力したら【生成】ボタンを押すと、ページ下部にHTMLが生成されるのでそちらをコピーしておきます。


<table class="acms-admin-table-admin-edit">
<tr>
<th>メイン画像<i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="ここに登録した画像が優先的にメイン画像として使用されます"></i></th>
<td>
<!-- BEGIN mainImage@path:veil -->
<img src="%{ARCHIVES_DIR}{mainImage@path}"/>
<input type="hidden" name="mainImage@old" value="{mainImage@path}" /><br />
<label class="acms-admin-form-checkbox">
<input type="checkbox" name="mainImage@edit" value="delete" />
<i class="acms-admin-ico-checkbox"></i> 削除
</label>
<!-- END mainImage@path:veil -->
<input type="file" name="mainImage" size="20" /><br />
<input type="hidden" name="field[]" value="mainImage" />
<input type="hidden" name="mainImage:extension" value="image" />
<input type="hidden" name="mainImage@filename" value="" />
</td>
</tr>
</table>

コピーしたコードを使用テーマ内の【admin / entry / field.html】におき、サーバーにアップロードします。
アップロードしたらエントリーの編集画面を確認し、カスタムフィールドで入力したタイトルと【ファイルを選択】というボタンが表示されていればOKです。

モジュール内の画像表示をIF文で切り替える

エントリーごとに画像を登録できるようになりました。しかしこのままだと、エントリー内の画像がメイン画像として使用されるので、エントリーサマリー内のメイン画像の表示を切り替えるように設定します。
エントリーサマリーのスニペットをみると画像の表示は

<!-- BEGIN image:veil --><img src="%{ROOT_DIR}{path}" alt="{alt}" width="{imgX}" height="{imgY}" alt="" style="left:{left}px; top:{top}px; position:relative;"><!-- END image:veil -->

このようになっています。(※noimageの部分は抜いています)
この部分を

  • メイン画像が設定されているときはメイン画像を表示
  • メイン画像は設定されていないときはエントリーの画像を表示

という風にIFで切り替えていきます。
IFの書き方についてはa-blog cmsのデベロッパーサイトのIFブロックのページをご覧ください。

  • メイン画像の値が空ではないときはメイン画像
  • メイン画像の値が空のときはエントリー内の画像

となるのでIF文は

<!-- BEGIN_IF [{mainImage@path}/nem] -->
    /*ここにテキスト*/
<!-- ELSE_IF [{mainImage@path}/em]-->
    /*ここにテキスト*/
<!-- END_IF -->

こうなります。【ELSE_IF】の部分はエントリーの画像の表示になるため元々スニペットに書いてあったソースを入れます。

<!-- BEGIN_IF [{mainImage@path}/nem] -->
<!-- ELSE_IF [{mainImage@path}/em]-->
    <!-- BEGIN image:veil -->
            <img src="%{ROOT_DIR}{path}" alt="{alt}" width="{imgX}" height="{imgY}" alt="" style="left:{left}px; top:{top}px; position:relative;">
    <!-- END image:veil -->
<!-- END_IF -->

【BEGIN_IF】内は【src】の部分を変更します。
【admin / entry / field.html】に置いたソース内の【imgタグのsrc】と同じものにします。

<!-- BEGIN_IF [{mainImage@path}/nem] -->
    <!-- BEGIN image:veil -->
            <img src="%{ARCHIVES_DIR}{mainImage@path}" alt="{alt}" width="{imgX}" height="{imgY}" alt="" style="left:{left}px; top:{top}px; position:relative;">
    <!-- END image:veil -->
<!-- ELSE_IF [{mainImage@path}/em]-->
    <!-- BEGIN image:veil -->
             <img src="%{ROOT_DIR}{path}" alt="{alt}" width="{imgX}" height="{imgY}" alt="" style="left:{left}px; top:{top}px; position:relative;">
    <!-- END image:veil -->
<!-- END_IF -->

上記のソースのようにエントリーサマリーの画像表示の部分を変更することでエントリーごとに画像を指定することが可能です。


acms

この記事を読んだ方におすすめ