2021 Twitter logo - blue.png
This article assumes you know how to use Hugo bundles and Hugo inline shortcodes.
To learn about image processing in Hugo, see gohugo.io/content-management/image-processing/.
On
about.twitter.com/en/who-we-are/brand-toolkit,
you can download a .zip
package
that contains
various flavors of
the Twitter bird.
After unzipping[2]
this,
one of the
package’s
files
is
named this:
2021 Twitter logo - blue.png
And looks like this:
To process an image in Hugo, it can be either a page resource or site resource.[3] In this example, I put it in a leaf bundle, which makes it a page resource. Here is the directory structure of the source of this page:
ROOT └── content └── hugo-image-processing ├── index.adoc └── twitter_bird1034x851.png
I changed the bird file name from
to
twitter_bird1034x851.png
because…
spaces in file names are a pain and
I like to append
to a
PNG’s
file name.x
Height in pixels
In index.adoc
I put the following
inline shortcode.
{{< flip.inline >}} {{ $file := .Page.Resources.Get "twitter_bird1034x851.png" }} {{ $flippedfile := $file.Resize "1034x r180" }} <img src="{{ $flippedfile.RelPermalink }}" alt="flipped Twitter bird" > {{< /flip.inline >}}
ℹ |
|
In Hugo’s built-in web server,
which is
usually http://localhost:1313
,
the above
inline shortcode
is
rendered as this:
Hugo caches this flipped-bird image file in
ROOT/resources/_gen/images/
. For example,
here is
an excerpt of
the
directory structure
of
Infinite Ink’s Hugo website project:
ROOT ├── content │ └── hugo-image-processing │ ├── index.adoc │ └── twitter_bird1034x851.png └── resources └── _gen └── images └── hugo-image-processing └── twitter_bird1034x851_hu675b3805fc6ee594df7211ad0a4a4656_19683_1034x0_resize_r180_box_3.png
To learn about caching in Hugo, see…
For more about Hugo, see Infinite Ink’s…
Hugo’s .RenderString
Method (featuring AsciiDoc admonitions in Markdown and Go HTML)
Hugo’s Markup Languages: AsciiDoc, HTML, Markdown,
Hugo Tutorial: Bundleless, Themeless, & Gitless Introduction to the Hugo SSG
Variable and Parameter Names in Hugo (featuring camelCase🐫 and snake_case🐍)
🔗 Linkified Section Headings in Hugo-Generated Web Pages (featuring Markdown and AsciiDoc examples)
A Way to Compare Hugo’s Markup Languages (featuring inline footnotes)
Configuring Security in Hugo (featuring settings needed to use Asciidoctor and Pandoc)
.gz
or .zip
extension will launch an unzip app. For example, some Linux distributions launch the ark
archiving tool.@nm@mathstodon.xyz
or
#InfiniteInk
in it.