このブログは Hugo に PaperMod というテーマを入れている。 このテーマは画像の横幅が決まっているため、以下のように大きいサイズの画像を貼り付けると画像の内容が分かりづらくなってしまう。

Azure Portal

どうにかできないかと調べたら Lightbox という JavaScript ライブラリを使えば画像をポップアップ表示できそうということが分かった。

こちらのサイトを参考に Hugo に Lightbox を入れていく。

Adding lightbox to Hugo

icon
julianstier.com

準備

Lightbox を GitHub のリリースページからダウンロード

Releases · lokesh/lightbox2

THE original Lightbox script (v2). Contribute to lokesh/lightbox2 development by creating an account on GitHub.
icon
github.com

CDN もあるらしいけど今回は一旦ローカル保存

lightbox2 - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.
icon
cdnjs.com

必要なファイルの配置

  • CSS
    • /assets/css/extended/ に Lightbox の CSS ファイル lightbox.min.css を配置
  • JavaScript
    • /static/js/ に Lightbox の JS ファイル lightbox.min.js を配置

テーマのヘッダーに CSS を追加

PaperMod の /themes/PaperMod/layouts/partials/head.html を /layouts/partials/head.html にコピーして以下を追加

<link rel="stylesheet" href="/css/lightbox.min.css">

テーマのフッターに JavaScript を追加

PaperMod の /themes/PaperMod/layouts/partials/footer.html を /layouts/partials/footer.html にコピーして以下を追加

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="/js/lightbox.min.js"></script>

カスタム shortcode の作成

/layouts/shortcodes/figure.html にカスタム shortcode を作成

{{ if .Get "caption" }}
  {{ $.Scratch.Set "caption" (.Get "caption") }}
{{ else if .Get "alt" }}
  {{ $.Scratch.Set "caption" (.Get "alt") }}
{{ end }}
<!-- resolve absolute image path -->
{{ $permalink := $.Page.Permalink }}
{{ $image := .Get "src" }}
{{ $image_link_absolute := (findRE "^/" $image) }}
<figure
  {{ with .Get "class" }}class="{{.}}"{{ end }}
  {{ with .Get "width" }}style="width: {{ . }};"{{ end }}
  {{ with .Get "height" }}style="height: {{ . }};"{{ end }}
  >
    <a 
      {{ if .Get "lightbox" }}
        data-lightbox="{{ .Get "lightbox" | markdownify | plainify }}"
      {{ else }}
        data-lightbox="image-{{ $image }}"
      {{ end }}
      {{ if $image_link_absolute }}
        href="{{ $image | absURL }}"
      {{ else }}
        href="{{ (printf "%s%s" $permalink $image) }}"
      {{ end }}
    {{ with .Get "target" }} target="{{ . }}"{{ end }}
    {{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
  <img
      {{ if $image_link_absolute }}
        src="{{ $image | absURL }}"
      {{ else }}
        src="{{ (printf "%s%s" $permalink $image) }}"
      {{ end }}
        {{ if .Get "alt" }}alt="{{ .Get "alt" | markdownify | plainify }}"
        {{ else if .Get "caption" }}alt="{{ .Get "caption" | markdownify | plainify }}"
        {{ end }}
        {{ with .Get "align" }}align="{{ . }}"{{ end }}
         />
    </a>
  <!-- caption and attr-->
  {{ if ($.Scratch.Get "caption") }}
    <figcaption>
      <span class="img--caption">
        Figure {{ $.Page.Scratch.Get "fig" }}. {{ $.Scratch.Get "caption" | markdownify | plainify }}
        {{ if .Get "attr" }}
          [{{- with .Get "attrlink"}}<a href="{{ . }}">{{ end }}{{ .Get "attr" | markdownify }}{{ if .Get "attrlink"}}</a>{{ end -}}]
        {{ end }}
      </span>
    </figcaption>
  {{ end }}
</figure>
{{ .Page.Scratch.Add "fig" 1 }}
{{ $.Scratch.Delete "caption"}}

使用例

単独の画像

{{< figure src="azure-portal.png" >}}

ギャラリー形式

同じ lightbox 属性を持つ画像をグループ化

{{< figure src="azure-portal.png" lightbox="gallery1" >}}
{{< figure src="hashicorp-cloud-platform.png" lightbox="gallery1" >}}