Hugo

先日の記事 で画像をGrid表示する話をしましたが、CSSでできるという話を聞いたので置き換えました。 {{ $size := "200x" }} {{ $mobileSize := "100x100"}} <div class="img-view"> {{ range $idx, $elem := .Params }} {{ $res := resources.GetMatch $elem }} {{ $image := $res.Resize $size }} {{ $imageWebP := $res.Resize (printf "%s %s webp q70" $size) }} {{ $mobileImage := $res.Fit $mobileSize}} {{ $mobileImageWebP := $res.Fit (printf "%s %s webp q70" $mobileSize) }} {{ $imageURL := $image.RelPermalink }} {{ $imageWebPURL := $imageWebP....

サムネイルだけですがWebP対応しました。 オリジナルサイズはどうするか悩んでいるところです。 静的配信をしてるのでserverで出し分けるのではなくpicture tagを利用してやっています。 対応差分は次のような感じです。 - <img class="pc" src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/> - <img class="sp" src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage.Width }}" height="{{ $mobileImage.Height }}"/> + <picture class="pc"> + <source srcset="{{ $imageWebPURL }}" type="image/webp" > + <img src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/> + </picture> + <picture class="sp"> + <source srcset="{{ $mobileImageWebPURL }}" type="image/webp"> + <img src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage....

当ブログはGithub actionsでビルドしたあとサーバーにデプロイするようにしています。 版管理はgitで画像はlfsを利用しています。 テーマは hugo-PaperModを利用しておりsubmoduleになっています。 actionsの設定 ほぼ重要なのはチェックアウト周りだけなので抜粋はチェックアウト周りだけです。 やっていることは lfs を有効にすることと submodule をチェックアウト時に取得することです。 steps: - name: Checkout uses: actions/checkout@v3 with: lfs: true submodules: recursive submodulesと書かずにsubmoduleと書いてしまって小一時間悩んでしまいましたがsが必要です。 submoduleにしてしまった場合次のような警告が出ますがそのまま実行されます。 Unexpected input(s) 'submodule', valid inputs are ['repository', 'ref', 'token', 'ssh-key', 'ssh-known-hosts', 'ssh-strict', 'persist-credentials', 'path', 'clean', 'fetch-depth', 'lfs', 'submodules', 'set-safe-directory', 'github-server-url'] hugo側の設定 大きい画像をshortcodesを利用して変換する場合時間がかかってタイムアウトをする場合があります。 なので私はtimeout: 120sという設定を入れています。 timeoutのフォーマットはGoのtime.ParseDurationの対応しているフォーマットです。

github pagesを利用していましたが、AWSに移行しました。 理由はEOS E5で扱う画像が多きすぎるためです。 git lfsがgithub pagesで使えないので移行しました。

HugoでGird配置で画像を表示する shortcodes を実装しました。 先日サンプルで画像を並べたものです。 {{ $size := "200x" }} {{ $mobileSize := "100x100"}} <div class="img-view"> <table> <tbody> {{ range $idx, $elem := .Params }} {{ $res := resources.GetMatch $elem }} {{ $image := $res.Resize $size }} {{ $mobileImage := $res.Fit $mobileSize}} {{ $imageURL := $image.RelPermalink }} {{ $mobileImageURL := $mobileImage.RelPermalink}} {{ if modBool $idx 3 }} <tr> <th> <a href="{{ $res.RelPermalink }}" target="_blank"> <div class="thumb-img"> <img class="pc" src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image....