a-blog cms カスタムユニットにSmartPhoto.jsを実装する

a-blog cms

a-blog cmsは「ユニット」と呼ばれるブロックを使いページを作成していきます。
また、オリジナルの「ユニット」を追加したい場合は「カスタムユニット」として作成することが可能です。
ユニットとは

例えば画像をタイル状に並べるギャラリーのようなカスタムユニットを作成したとして、その場合クリックすると拡大する処理も欲しいというケースがあったとします。

自分でチョイスした拡大する処理のjsを用意してもよいですが、a-blog cmsは標準で使用できる組み込みjsというものがありますので今回は組み込みjsをカスタムユニットでも使えるようにしてみましょう。
組み込みjs

a-blog cmsの開発元アップルップさんはCMSの開発だけでなくJavaScriptのスキルもハイレベルですのでjsまわりも安心して使うことが出来るので助かりますね。
https://appleple.github.io/

カスタムユニットの作成は公式サイトを参考にしていただくとして、今回は表示側の拡大処理部分に絞りたいと思います。
カスタムユニット

例えば表示側のテンプレートのinclude/unit/custom_gallery.htmlとして内容を下記とします。

<!-- BEGIN unit#custom_gallery -->
<div class="gallery">
    <h3 class="gallery_title">{gallery_title}</h3>
    <ul>
      <!-- BEGIN custom_galleryImg:loop -->
      <li>
        <a href="%{MEDIA_ARCHIVES_DIR}{gallery_img@path}" data-rel="SmartPhoto[{utid}]" data-group="nogroup">
          <img src="%{MEDIA_ARCHIVES_DIR}{gallery_img@path}" alt="{gallery_img@alt}"></a>
        </li>
     <!-- END custom_galleryImg:loop -->
    </ul>
  </div>
<!-- END unit#custom_gallery -->

大事なのはこちらですね。data-rel="SmartPhoto[]"にユニット毎のIDであるutidを入れるとユニット毎に拡大表示をしてくれます。

data-rel="SmartPhoto[{utid}]" 

といった感じで簡単に拡大表示の処理を追加出来ました。
他にもよく使いそうなjsはだいたい用意されているので必要な場合は組み込みjsを活用してみてはいかがでしょうか。

以上、”a-blogcms カスタムユニットにSmartPhoto.jsを実装する” でした。

前の記事 次の記事

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートすることができます。

ご連絡おまちしています!

ホームページの枠組みを5万円で作成

このホームページと同じ更新できる仕組みを”5万円”で提供しています。

サービスを詳しく見たい方へ