This component for GoHugo adds partials and shortcodes to handle images on your website. It offers responsive image formats and optimised loading based on current browser abilities.
Check back for better documentation and more features. The following documentation is, as long as this note is here, only partial and might be missing important points. If you have any questions, or ideas, please add an issue to the issue tracker.
- Image processing (aka. resizing, filters, cropping etc) is only available in Global and Page Resources. Global Resources are located in the
assetsfolder of your repository, Page Resources are located within the
contentdirectory with your content files in so called Page Bundles. The images in your
staticdirectory are loaded as they are, not processed (other than evaluation of content type and sizing) and will not result in responsive image tags. All other features or options will work.
- Lookup of images:
- page bundle
- global resources
- static folder
- warning about image not found on CLI
nameimplies page resource and no further lookup will be done after image is not found
Available shortcodes currently are
gallery. Those shortcodes are served by partials that you can use in your own layout files with more extensive configurability.
figure overrides the GoHugo internal
Possible call scenarios:
With unnamed parameters (static images preferred):
With named parameters:
For now we think about device pixel ratios up to 4. (<– NOTE: what did we mean by that? Probably a 4xdpi thingy?)
||string||resource name to show (resources are defined in frontmatter or it’s the filename of the image in a page bundle|
||string||image to show (optional). must be relative to the static folder|
||string||link the image to something|
||string||target of the link (typically you would want
||string||additional classes for the image (Note: not sure if image or figure tag)|
||string||alt attribute for the image (optional, suggested)|
||string||title attribute for the image (optional)|
||string||command for image processing (optional, required with
||string||options for image processing (optional, required with
||number||width of the image (optional, could be evaluated from the resulting image)|
||number||height of the image (optional, could be evaluated from the resulting image)|
to be written.
Notes: right now it expects a galleryid parameter for a folder inside of pagebundle/gallery/galleryid and a type for bootstrap4 or bootstrap5. All images in that directory are parsed and shown. No sorting (todo), no gallery selection by frontmatter (todo).
The figure partial executes the end of the shortcode (wording?) and can be called with an options dictionary of the following format:
To be written.
Should be explained in their own chapters above.
To be written.
- resources directory
- caching (with hugo-netlification)
- preloading (needs implementation)
- maybe a walkthrough how this module implements current features?
- A list of up to date best practices for web images by nucliweb (those practices are all implemented in this module)