How to get the path to the assets directory without hardcoding?

felix2020 · September 16, 2020, 8:47am

In a shortcode for image processing responsive images from page resources (bundels) I retrive some file information about the original soure. Therefore I use the following variables in my shortcode:

{{ $image := .Page.Resources.GetMatch (.Get "src") }}

{{ $file := path.Join (path.Dir .Page.File.Path) $image }}
{{ $stat := os.Stat $file }}

This works well and I can display some file information, e.g. the file size ( {{div (int $stat.Size) 1024 }} KB).

But I would like to provide also another shortcode for images, which are stored in the default assets folder (/assets). I use the following variables in this shortcode:

{{ $image := resources.Get (.Get "src") }}

{{ $file := path.Join ("assets") $image }}
{{ $stat := os.Stat $file }}

This works, but is there an alternative (better) solution to retrive the assets file path without hardcoding the assets directory? The os.Stat function needs this path information.

I’m relative new to Hugo but I didn’t finde any informations about that topic in the documentation or in the community forum here. I’m gratefull for any suggestions.

davidsneighbour · September 18, 2020, 3:01pm

The assets folder is for pipes, not for anything template related. Think of it as something that is processed outside of the design part of your Hugo site. Files (and paths) that are used in templates have to be created by the content structure or be within the static directory.

felix2020 · September 18, 2020, 8:55pm

Thanks for your answer.

I know the basic difference between assets for pipes and page resources resp. page bundles for content organisation. The problem is, that the static folder doesn’t support image processing, e.g. for responsive images.

“The image is a Page Resource, and the processing methods listed below do not work on images inside your /static folder.” (see: Image processing | Hugo)

And I would like to have the choice between page bundle organisation and a centralized image directory for all posts or pages. The centralized approach is in some cases better than the decentral organisation in page bundles, in my opinion.

For images as part of page bundles I use the following shortcode to generate responsive images:

{{ $altText := .Get "alt"}}
{{ $caption := .Get "caption"}}
{{ $linkTitle := .Get "link-title"}}
{{ $image := .Page.Resources.GetMatch (.Get "src") }}

{{ $file := path.Join (path.Dir .Page.File.Path) $image }}
{{ $stat := os.Stat $file }}

{{ with $image }}
{{ with $caption }}
<figure>
{{ end }}
    <a href="{{.RelPermalink}}" {{ with $linkTitle }} title="{{ $linkTitle }} ({{ $stat.Name }}, {{ $image.Width }} x {{ $image.Height }} px, {{div (int $stat.Size) 1024 }} KB)" {{ end }} target="_blank">
        <img
            srcset="
            {{ if ge $image.Width 320 }}
                {{ (.Resize "320x").RelPermalink }} 320w,
            {{ end }} 
            {{ if ge $image.Width 430 }}
                {{ (.Resize "430x").RelPermalink }} 430w,
            {{ end }}
            {{ if ge $image.Width 860 }}
                {{ (.Resize "860x").RelPermalink }} 860w,
            {{ end }}
            {{ if ge $image.Width 1720 }}
                {{ (.Resize "1720x").RelPermalink }} 1720w
            {{ end }}"           
            sizes="(max-width: 900px) calc(100vw - 4rem), 860px"
            src="
            {{ if ge $image.Width 1720 }} 
                {{ (.Resize "860x").RelPermalink }}
            {{ end }} 
            " alt="{{$altText}}"/>
    </a>
    {{ with $caption }}
    <figcaption>{{ $caption }}</figcaption>
    </figure>
    {{ end }}
{{ end }}

(Example for using the shorcode above: {{< responsive-image src="kuchen-2000.jpg" alt="Gugelhupf" caption="Gugenhupf" link-title="Originalbild in neuem Fenster öffnen" >}})

An almost similar solution works also for images in the assets folder. But my question was, whether it is possible to avoid hardcoding the assets folder, see the line {{ $file := path.Join ("assets") $image }} in the following shortcode:

{{ $altText := .Get "alt"}}
{{ $caption := .Get "caption"}}
{{ $linkTitle := .Get "link-title"}}
{{ $image := resources.Get (.Get "src") }}


{{ $file := path.Join ("assets") $image }}
{{ $stat := os.Stat $file }}

{{ with $image }}
{{ with $caption }}
<figure>
{{ end }}
    <a href="{{.RelPermalink}}" {{ with $linkTitle }} title="{{ $linkTitle }} ({{ $stat.Name }}, {{ $image.Width }} x {{ $image.Height }} px, {{div (int $stat.Size) 1024 }} KB)" {{ end }} target="_blank">
        <img
            srcset="
            {{ if ge $image.Width 320 }}
                {{ (.Resize "320x").RelPermalink }} 320w,
            {{ end }} 
            {{ if ge $image.Width 430 }}
                {{ (.Resize "430x").RelPermalink }} 430w,
            {{ end }}
            {{ if ge $image.Width 860 }}
                {{ (.Resize "860x").RelPermalink }} 860w,
            {{ end }}
            {{ if ge $image.Width 1720 }}
                {{ (.Resize "1720x").RelPermalink }} 1720w
            {{ end }}"           
            sizes="(max-width: 900px) calc(100vw - 4rem), 860px"
            src="
            {{ if ge $image.Width 1720 }} 
                {{ (.Resize "860x").RelPermalink }}
            {{ end }} 
            " alt="{{$altText}}"/>
    </a>
    {{ with $caption }}
    <figcaption>{{ $caption }}</figcaption>
    </figure>
    {{ end }}
{{ end }}

Worth reading about responsive images and Hugo are the following blog posts:

Kalbag, Laura (2018): Processing Responsive Images with Hugo
Ott, Thomas (2020): Responsive Images in Hugo
Wills, Adam: Responsive Images in Hugo
Haukås, Nils Norman (2018): Hugo: How to add support for responsive images trough image processing and page bundles

My shortcodes for responsive images are inspired by this theme: https://github.com/jcfischer/hugo-chaschper/blob/master/layouts/shortcodes/figure.html - Both shortcodes work, but I thought there is an better solution available instead of hardcoding the /assets Folder, so I can also use the os.Stat function to retreive some file information from images stored in the assets directory. Or with other words: Is there an equivalent to the line {{ $file := path.Join (path.Dir .Page.File.Path) $image }} for the default assets folder?

(PS: As I’m new to the hugo community I can only post two links inside a post, so I could not link the worth reading blog posts … search engines will find them quickly, indeed. )

jmooring · September 18, 2020, 9:43pm

The path to the assets directory must be hard coded. But if all you need is file size, you can use this instead of os.Stat:

{{ $img := resources.Get "images/a.jpg" }}
{{ $filesize := len $img.Content }}

felix2020 · September 19, 2020, 8:40am

That’s fine . Thank you very much @jmooring!

Without os.Stat I can also retreive other image information (e.g. width, height and file name). So, I udated my shortcode for responsive images from the default assets directory (/layouts/shortcodes/responsive-image-assets.html) :

{{ $altText := .Get "alt"}}
{{ $caption := .Get "caption"}}
{{ $linkTitle := .Get "link-title"}}
{{ $image := resources.Get (.Get "src") }}


{{ $filesize := len $image.Content }}

{{ with $image }}
{{ with $caption }}
<figure>
{{ end }}
    <a href="{{.RelPermalink}}" {{ with $linkTitle }} title="{{ $linkTitle }} ({{ path.Base $image.Name }}, {{ $image.Width }} x {{ $image.Height }} px, {{div (int $filesize) 1024 }} KB)" {{ end }} target="_blank">
        <img
            srcset="
            {{ if ge $image.Width 320 }}
                {{ (.Resize "320x").RelPermalink }} 320w,
            {{ end }} 
            {{ if ge $image.Width 430 }}
                {{ (.Resize "430x").RelPermalink }} 430w,
            {{ end }}
            {{ if ge $image.Width 860 }}
                {{ (.Resize "860x").RelPermalink }} 860w,
            {{ end }}
            {{ if ge $image.Width 1720 }}
                {{ (.Resize "1720x").RelPermalink }} 1720w
            {{ end }}"           
            sizes="(max-width: 900px) calc(100vw - 4rem), 860px"
            src="
            {{ if ge $image.Width 1720 }} 
                {{ (.Resize "860x").RelPermalink }}
            {{ end }} 
            " alt="{{$altText}}"/>
    </a>
    {{ with $caption }}
    <figcaption>{{ $caption }}</figcaption>
    </figure>
    {{ end }}
{{ end }}

Example for using the shortcode (for image stored in /assets/images/):

{{< responsive-image-assets src="/images/kuchen-2000.jpg" alt="Gugelhupf" caption="Gugenhupf" link-title="Originalbild in neuem Fenster öffnen" >}}

system · September 21, 2020, 8:40am

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Image processing inside content using shortcode support	12	1631	December 5, 2018
Hugo image processing and responsive images support images	4	3242	November 4, 2023
Where do I put images and what's the src path support	2	4881	August 17, 2018
How to show images on post pages if they're located in the assets folder? support	15	6624	September 9, 2021
What is the current status of image processing in Hugo? support images	6	239	May 3, 2024

How to get the path to the assets directory without hardcoding?

Related topics