SWELLのlightbox（luminous.js）で画像拡大時にもキャプションを表示させる

大好きなWordPressテーマ、SWELL。
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ

SWELLにはlightbox機能（Luminous Lightbox）が標準搭載されており、

別途で画像にリンクを設定していない場合は、画像をクリックすると拡大表示されます。

この拡大表示の時に、キャプションも一緒に表示させたい！

オプションで選べれば良いのだが、今のところ用意されていない。

紆余曲折を経たが…

半日かけてあちこちいじくり回した結果、
カスタムJSの欄に以下を書くことで、
figcationの中身を画像拡大時にも表示させることに成功した。

※下記は画像単体ではなくギャラリーの場合。
単体の時は、 new LuminousGalleryを new Luminousにしたり色々する

const luminousOpts = {
  sourceAttribute: 'data-luminous',
  caption: (trigger) => {
    return trigger.parentElement.querySelector('figcaption').textContent;
  },
} 
const luminousGalleryElems = document.querySelectorAll('.luminous');
if( luminousGalleryElems.length > 0 ) {
new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
}

figcaptionじゃなくてaltの場合はこう

const luminousOpts = {
  sourceAttribute: 'data-luminous',
  caption: (trigger) => {
    return trigger.parentElement.querySelector('img').getAttribute('alt');
  },
} 
const luminousGalleryElems = document.querySelectorAll('.luminous');
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
}

optionのsourceAttribute はトリガーの指定部分で、
普通は a要素の href を指定するんだけど
SWELLの場合は画像をaタグで囲わずに、imgに data-luminous="画像URL" というのを付加してそれをトリガーにしてる。

しかし二重に実行されてしまう

キャプションが表示されて喜んだのもつかの間、
これをカスタムJSに書き込んだことで、
もともと実行されているLuminousに Luminousを重ねがけしてしまっているので
画像拡大Lightboxが二重に表示されていまい、「閉じる」を2回押す羽目に。

これじゃダメだ、でもどうすれば……？

禁忌！テーマファイル直接編集

絶対にやらない方がいいんだけど、やってしまった。
テーマファイルの直接編集。

wp-content/themes/swell/build/js/front

ここに「set_luminous.min.js」というファイルがあり、
luminousのoptionなどが設定されている。

その中の sourceAttribute: 'data-luminous' が書いてある箇所に狙いを定め、
以下のような感じでcaptionの設定を捩じ込む。

/* 前略 */
const luminousOpts = {
  sourceAttribute: 'data-luminous',
  caption: (trigger) => {
    return trigger.parentElement.querySelector('figcaption').textContent;
  },
} 
function o(){var o; /* 中略 */
		0<n.length&&new LuminousGallery(n,{arrowNavigation:!0},luminousOpts)}))})();
/* 以下略 */

（カスタムJSに書いたやつは削除する）

これで無事に「画像拡大時にもキャプション表示」という念願は叶ったけど
力技で解決しちゃった感がある。
テーマを更新したりした時に、きっと困るであろう。
そのうちオプションで選べるように進化するといいな…。

参考サイト

CSSの細かい調整

下記をカスタマイズの追加CSSに追記。
（ !important ばっかりでダサい）

/* キャプションが2行になっても下端が切れないように */
.lum-lightbox-inner img {
    max-height: 96% !important;
}
@media only screen and (max-width:480px) {
	.lum-lightbox-inner img {
    max-height: 84vh !important;
	}
/* スマホでキャプションがスクロールされて消えるのを解決 */
	.lum-lightbox-position-helper {
    position: relative !important;
	}
/* スマホでキャプションが写真から離れて画面下端に固定されているのを剥がす */
	.lum-lightbox-caption {
		bottom:unset !important;
	}
}

やわらかしかっけい

なんでもすぐに忘れてしまう自分のために