Resize an image with markdown

support
12

That is not true. You can mount static to assets in your site configuration:

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'static'
target = 'assets'

The extended version of Hugo is required to (a) transpile Sass to CSS with libsass, and (b) decode/encode webp images.

Markdown render hooks are powerful. Try this:

git clone --single-branch -b hugo-forum-topic-34833 https://github.com/jmooring/hugo-testing hugo-forum-topic-34833
cd hugo-forum-topic-34833
hugo server

The image render hook in this example allows you to control processing method, processing options, and much more using a query string. Some markdown examples:

![Petrified Forest](a.jpg?w=500)

![Bryce Canyon](images/b.jpg?h=200&f=webp)

![Zion](images/c.jpg?w=150&h=150&m=fill&q=50&f=png&i=my-id&c=my-class)

![Hugo logo](https://gohugo.io/img/hugo-logo.png?w=200)

It works with both remote and local images. For local images, it will look for a page resource first, and fallback to a global resource if present.

See the README file for a description of the available query string parameters.

4 Likes