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

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を実装する” でした。

---