PhotoCollage.js を a-blog cms のブログテーマに実装してみた

2024年に公開した記事を、今でも使えるようにアップデートしました。

数年前のインターンの課題として「Facebook の複数枚写真をアップロードした際に、写真をレイアウトしてくれる JavaScriptライブラリを作ってみよう！ 」というお題を出していた時期があります。

3日間コースで、まずは静的な HTML と CSS で、2枚の時、3枚の時のような感じで複数のパターンを作って、その後 JavaScript を利用してターゲットの HTML に Class を振っていくという感じ。 JavaScript が苦手でも CSS と格闘しつつ、いろいろな場合に対応できない感じでも、できる学生さんなら1日5時間で2日目の終わりには、ある程度動く感じまで作ってくる人もいました。

その後、長期インターンで何度も作り直して、公開しても大丈夫そうなところまで出来上がったものを「PhotoCollage.js」という名前で公開しています。しかし、インターンの学生さんが作ったもので、あまり公式にどうだろう？ってところもあり使われないままになっていました。

PhotoCollage.js の特徴

• いろいろな HTML に対応しています。
• 表示している画像とリンク先は別で扱うようにしています。
• smartPhoto.js の利用も考慮して設計されています。
• 画像のパスは src なのか data-src なのか指定も可能です。
• 生成されるHTMLソースの各所に Class や attribute の設定が可能です。

オプション

以下のようなオプションを設定できるようになっています。

ダウンロード

GitHub に公開されていますので、そちらからダウンロードしてご利用ください。

https://github.com/appleple/PhotoCollage

a-blog cms のブログテーマで利用するには

CSS と JavaScript のファイルをご自身の blog テーマディレクトリに入れてください。

• /css/photocollage.css
• /js/photo-collage.bundle.js

_entry.html に追加

@section("head-link")
@parent
<link rel="stylesheet" href="/css/photocollage.css" />
@endsection

@section("head-js")
@parent
  <script src="/js/photo-collage.bundle.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const elements = document.getElementsByClassName('js-photocollage');
      Array.from(elements).forEach((element, index) => {
        element.classList.add('js-photoCollage-' + index)
        new PhotoCollage(".js-photoCollage-" + index, {
          srcAttribute: "src",
          gap: "5px",
          margin: "0px 0px 35px 0px",  // 下のマージンを設定
          aAttribute: {
            "data-group": "group-" + index,
            "data-rel": "SmartPhoto",
          }
          // overflowLabel: (n) => `+${n}件`,  // 「件」を付けたい場合のみ
        });
      });
    });
  </script>
@endsection

17行目の margin を margin: "0px 0px 35px 0px" とマージンの設定を行っています。この設定では下のマージンを 35px にしています。

18行目の "data-rel": "SmartPhoto" に変更することで、a-blog cms の SmartPhoto が動作します。

22行目の overflowLabel は、今回6枚以上の時に +1件 のように表示していた部分を +1 だけにしたので件を付けられるオプションです。

a-blog cms の管理画面の設定

Ver. 3.1 までは「ユニットグループ」という設定がユニットのオプションとしてありましたが、Ver. 3.2 以降は「グループユニット」というより分かりやすく便利なユニットになりました。

編集画面設定の「グループユニット class属性」にクラスは js-photocollage とし、ラベルは自由ですが photocollage としておきます。

設定画面としては同じように Class を設定するだけです。

投稿画面の指定として

「グループユニット」として独立したユニットになったことで、どこからどこまでを囲んでいるのかが管理画面上で目視できるようになりました。

PhotoCollage を選択し、中にメディアユニットをいくつか入れるだけで機能します。

以前の「ユニットグループ」設定では、最初のユニットで photocollage を選択します。解除するには、1カラム を選択することで以下のユニットは JavaScript のライブラリの対象外になります。

4年ぶりにアップデート

AI 時代ということもあり、コードをレビューしてもらって少しバグを発見し、修正している中で alt・width・height が PhotoCollage 実行後に無くなってしまう問題を発見しました。こちらも修正しています。（近日新しいバージョンがリリース予定です）

このブログ記事の URL を AI に渡して、このテーマ名を指定し実装して！ とお願いするだけで、エディタでコードを書くことになくテストが完了しています。皆さんもお気軽に利用してみてください。

https://github.com/appleple/PhotoCollage というライブラリをローカル環境 https://ablogcms.ddev.site/ 、テーマは /Users/kazumich/ddev/ablogcms/web/themes/site を利用しています。 https://kazumich.com/cms/photoCollage.html を参考に実装してください。

最後に

たくさんの写真を撮って、それをブログの記事に、まとめて貼っておきたい。全部みたい時には SmartPhoto の機能でスライドして見ることも可能です。よろしければ使ってみて感想を X の #ablogcms ハッシュタグをつけてお知らせください。

https://github.com/appleple/PhotoCollage