Referencing Assets from Base and Theme

support
1

I am having a problem referencing images within the assets folder, and I’m sure it is something simple I’ve missed.

base/
├── assets/
│   └── images/
│       └── CorporateLogo.png
├── layouts/
│   └── main.html
├── themes/
│   └── theme_name/
│          └── assets/
│          └── layouts/
│              └── theme.html
├── config.toml

If I have a config.toml that contains a reference to the “corporate logo”

SiteLogo = "images/CorporateLogo.png"

and my layouts/main.html has a reference to that image

{{ $image := resources.Get .Site.Params.SiteLogo }}
{{ with $image }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

then all is good, image displays, no problem.

The issue is when I try to have my THEME’s theme.html have a reference to the corporate logo. If I use the same resources.Get in the theme.html, it does not find it, and returns NIL, and no image is displayed.

If I then copy/move the “logo” to themes/theme_name/assets/images/CorporateLogo.png, magically everything works again.

I want the “base data” to be stored in the base site, and have the theme reference these items.

Is it as simple as putting a “stub” png in the theme’s assets folder to trick HUGO into accepting them, and having the inheritance take care of the rest??

Sorry for being long-winded…

2

I don’t understand.

You directory structure shows assets/logos/foo.png, but your config references images/logos/foo.png. Why isn’t the images subdirectory present in your directory structure?

3

Sorry, corrected my post to be internally consistent…

assets/images/CorporateLogo.png

4

? images/images…

5

I’ll get it right one of these times :wink:
Example should be good now.

6

Do you mean config.toml?

7

Actually here I simply meant any random theme page, trying to incorporate an image provided from a parameter in the the base website’s config.toml config file.

8

I’m pretty sure you have something misconfigured. Try this:

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

Finally got a chance to test/demonstrate. Here is a git diff patch:

diff --git a/config.toml b/config.toml
index 58ce6d9..5cb0be8 100644
--- a/config.toml
+++ b/config.toml
@@ -2,3 +2,7 @@ baseURL = 'https://example.org/'
 languageCode = 'en-us'
 title = 'Hugo Forum Topic #44017'
 theme = 'foo'
+
+[params]
+imgPresident = 'images/President.png'
+imgCEO = 'images/CEO.png'
\ No newline at end of file
diff --git a/themes/foo/layouts/_default/home.html b/themes/foo/layouts/_default/home.html
index dfe37dc..4e51f51 100644
--- a/themes/foo/layouts/_default/home.html
+++ b/themes/foo/layouts/_default/home.html
@@ -15,6 +15,19 @@
   <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
 {{ end }}
 
+<p>Trying to access base site.Params from theme</p>
+<p>President:</p>
+{{ $image := resources.Get .Site.Params.imgPresident }}
+{{ with $image }}
+  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
+{{ end }}
+<p>CEO</p>
+{{ $image := resources.Get .Site.Params.imgCEO }}
+{{ with $image }}
+  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
+{{ end }}
+<p>End org structure</p>
+
   {{ range site.RegularPages }}
     <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
   {{ end }}
10

Essentially for this example, I want to display the corporate president and CEO on the home page. I demonstrated below the “siteLogo” in home.html.

These images are “corporate” so they don’t really belong to one particular theme. If you change the theme, the images will stay the same.

I also tried a different route. If I added text to the “content/_index.md”, I thought shortcodes worked in MD files?

Dang, forgot patches don’t include images… but you can fill in with anything…

Anyway, let me know what you think…

11

I agree with jmooring, you most likely have something misconfigured because the thing you describe works without issue in Hugo.

Post your repo, or an example repo where the issue occurs and we can help you out.

12

This exact example, with the patch, with two images in the ROOT SITE’S /assets/images (not in theme) demonstrates the e issue…

13

And that works perfectly, no issues at all.

Placed the images in the root assets/images.

1 Like