Media

HUGE/Media allows media transformation using Hugo's own solution or imgix. While imgix brings a lot more transformations, the code in the templates will always remain the same.

TL;DR

Hugo Template

{{ $args := dict
  "path" "/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg"
  "width" 500
  "rotate" 45
}}
{{ with partial "huge/media/Get" $args }}
  <img src="{{ .RelPermalink }}" alt="Rotated victorian houses">
{{ end }}

HTML

<img src="/media/aldric-rivat-LfsDV6VObmw-unsplash_hu64391a0_2570469_500x0_resize_q75_r45_box.jpg" alt="Rotated victorian houses">

TL;DR with imgix:

HUGE Config

# _huge/config/media
imgix:
  domain: archi-then.imgix.net
  defaults:
    auto: format
    ch: Width,DPR
    q: 95

Hugo Template

{{ SAME 👏 AS 👏 ABOVE 👏 }}

HTML

<img src="https://archi-then.imgix.net/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg?rot=45&w=500&auto=format&ch=Width,DPR&q=95" alt="Rotated victorian houses">

Functions

huge/media/Get

Parameters

A string representing the path of the media relative to your project's assets directory.

{{ partial "huge/media/Get "/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg" }}

A map if the media requires transformations. The map must contain a path key to reference the path of the media relative to your project's assets directory..

{{ partial "huge/media/Get (dict
  "path" "/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg"
  "width" 500
  "rotate" 45 
)}}

Returns

A map:

• .Name, a string.
• .Path, a string.
• .Permalink, a string representing the absolute permalink of the media.
• .RelPermalink, a string representing the relative permalink of the media (will be the same as .Permalink if using imgix)
• .Width, an integer representing the width of the transformed media. (not available if using imgix)
• .Height an integer representing the height of the transformed media. (not available if using imgix)

Settings All

publish

A slice.

HUGE needs media files to be living in the assets directory to transform them with Hugo. Now, Hugo will not publish assets files unless they are referenced by the templates. (Invoked with huge/media/Get for example). Some users will need some assets sub directories' files to be published regardless. Editors might be using one of those directories for files unrelated to Hugo like PDFs or other...

For this, user can add a list of publishable directories to the publish settings and HUGE will make sure any files in there is published regardless of them being invoked by Hugo or HUGE.

#_huge/config/media.yaml
publish: 
- uploads
- downloads
- pdfs

Settings with Imgix

Every settings related to the project imgix implemention lives under an imgix map.

imgix.domain

A string. The domain (not the full URL) for your imgix source. Ex: huge.imgix.net

imgix.enable

A string or a slice either containing or pointing to the environment (as defined in huge/env/Get) or the string always or never. Defaults to always. See huge/env/When

imgix will usually serve images deployed from your production site. Sometime your staging environment will introduce new images, not yet available in production and therefore not available on the imgix source either.

This setting is useful to control which environment can rely on imgix.

imgix.mapping

Imgix amazing Rendering API's many parameters can be hard to remember. The mapping key allows to set more intuitive aliases for those.

Example

Let's add an alias for the con imgix parameter which handles contrast.

imgix:
  mapping:
    contrast: con

The following partial:

{{ partial "huge/media/Get (dict
  "path" "/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg"
  "contrast" 37 
)}}

Will return the following .RelPermalink/.Permalink

https://archi-then.imgix.net/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg?con=37

Defaults

HUGE/Media sports its own default aliases:

width: w
height: h
quality: q
text: txt
rotate: rot
format: fm

imgix.defaults

Any project can add a set of defaults or base transformations which will be applied on top of potential others to every media invoked through huge/media/Get.

Aliases defined in imgix.mapping can be used for this setting.

Example

imgix:
  defaults:
    auto: format
    ch: Width,DPR
    quality: 95

{{ partial "huge/media/Get "/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg" }}

https://archi-then.imgix.net/media/aldric-rivat-LfsDV6VObmw-unsplash.jpg?auto=format&ch=Width,DPR&q=95