Hugo で画像をリサイズしたりトリミングしたりするテンプレートを書いてみる
Drupal をはじめとする一般的な CMS であれば、アップロードした画像ファイルのサイズ調整などを自動で処理する機能が準備されています。 Hugo にも同様の機能 がありましたので、試してみました。 やりたいことは、ブログ一覧に表示されるタイトル画像を縮小すること。そして、ブログの各投稿のページは上下を切り取った画像を表示すること。この 2 点です。 しかし、思った通りに動作しません。調べながら画像ファイルのサイズ調整の仕組みを作っていたのですが、結構はまってしまったのでまとめておこうと思います。 画像ファイルは記事毎に置く 先に結論を書きます。これが出来ていないから動作しませんでした。 Hugo のサイト にも次のように書かれています : The image is a Page Resource, and the processing methods listed below doe
Hugo で画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle)
ページバンドルとは初期の頃の Hugo では、画像ファイルは static ディレクトリに置いて、記事ファイル (Markdown) と別々のディレクトリで管理するという方法がとられていました。 content/_index.mdpage1.mdpage2.mdpage3.mdstatic/image1.pngimage2.pngimage3.pngしかし、これでは Markdown ファイルと画像ファイルをバラバラに管理しないといけないというユーザーの不満が出て、現状は content ディレクトリ以下に一緒に配置できるようになっています。 この仕組みを ページバンドル (Page Bundle) と言います。 参考: Page Bundles - Hugoページバンドルは、その名のとおり、各ページにバンドルする形で画像ファイル（リソース）を保持するという考え方です。 ページバンドルを作
hugo page resourceを使って，relative pathで画像を指定する · こくたんのーと
{{ $original := .Page.Resources.GetMatch (.Get "src") }} {{ $mode := default "Resize" (.Get "mode")}} {{ $size := default "512x" (.Get "size")}} {{ $title := default $original.Name (.Get "title") }} {{ if eq $mode "Fit"}} {{ .Scratch.Set "image" ($original.Fit $size) }} {{ else if eq $mode "Resize"}} {{ .Scratch.Set "image" ($original.Resize $size) }} {{ else if eq $mode "Fill"}} {{ .Scratch.Set "
Hugo で静的なサイト・ブログを構築しよう - Qiita
この記事について この記事は Hugo でブログを始めようとしている方へ向けた Hugo 入門記事となっており、Hugo による静的なブログの構築・運用方法 を簡単にですが紹介します。 Hugo の Awesome は以下をどうぞ。 Awesome Hugo - 有用なリンクまとめ - Qiita 動的サイトから静的サイトへ WordPress で構築する、というのが長らくブログ運用の主流でした。もちろん現在も多くのサイトが WordPress によって運用されていますが、最近では「 静的サイト 」という選択肢も広まってきています。(調査したわけではありませんがこの分野に関心がある人の中で実感している人は多いと思います。) 静的サイトとは HTML, CSS, JavaScript のみで構成 サーバーサイドの処理を PHP で書いたりする、というような必要はありません。私たちが気にしなけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
