2021 Twitter logo - blue.png
This article assumes you know how to use Hugo bundles and Hugo inline shortcodes.
To learn about processing images 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…
Configuring Security in Hugo (featuring settings needed to use Asciidoctor and Pandoc)🔒
A Way to Compare Hugo’s Markup Languages (featuring inline footnotes)📊
Hugo’s Markup Languages: AsciiDoc, HTML, Markdown,
🔗 Linkified Section Headings in Hugo-Generated Web Pages (featuring Markdown and AsciiDoc examples)
Variable and Parameter Names in Hugo (featuring camelCase🐫 and snake_case🐍)
Hugo’s .RenderString
Method (featuring AsciiDoc admonitions in Markdown and Go HTML)
Transforming Text with Hugo (featuring plainify
, htmlUnescape
, and more)
.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.