imgur用のショートコードを作成

shortcode

layouts/shortcode/imgur.html

{{- $id := .Get "id" -}} {{- $title := .Get "title" -}}
<figure>
  <a href="https://i.imgur.com/{{ $id }}.jpg" target="_blank" rel="noopener">
    <picture>
      <source
        type="image/webp"
        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 640px"
        srcset="
          https://i.imgur.com/{{ $id }}h.webp 1024w,
          https://i.imgur.com/{{ $id }}l.webp  640w,
          https://i.imgur.com/{{ $id }}m.webp  320w
        "
      />
      <img
        src="https://i.imgur.com/{{ $id }}.jpg"
        loading="lazy"
        decoding="async"
        style="min-height:480px"
        onload="this.style.minHeight='auto'"
        {{
        if
        $title
        }}
        title="{{ $title }}"
        alt="{{ $title }}"
        {{
        else
        }}
        alt=""
        {{
        end
        }}
      />
    </picture>
  </a>
  {{ if $title }}
  <figcaption>{{ $title }}</figcaption>
  {{ end }}
</figure>

入力書式

• タイトルなしの場合

{{</* imgur id="yuxKbMa" */>}}

• タイトルありの場合

{{</* imgur id="yuxKbMa" title="タイトルを付加すると画像上で表示される"*/>}}

{{< imgur id="yuxKbMa" title="タイトルを付加すると画像上で表示される">}}

通常のMarkdown

![](https://i.imgur.com/yuxKbMa.webp)