Custom image folder

[kentmz]

Hi,

I recently set up this Hugo theme, I can see that the featured image is served from the ananke\static\images folder. Is there a way that I can use a custom image folder? This way I can keep the theme and the images related to the site in a separate folder.

Thanks in advance.

[budparr]

Yep. You just put a static folder in the root of your site and you can put anything in there you like

[kentmz]

I've tried that. So I have a folder in the root called "assets" which has a banner.jpg and then in the config I've set the feature image as featured_image = "assets/banner.jpg" and it doesn't show the image, however, if I move the folder inside the static folder of the themes, then it works. Looks like it looks for files in the theme folder.

Also, another question is, how do I remove the grey overlay that sits on top of the feature image, is there a setting for that in the config?

[budparr]

That's right. Hugo's assets directory is for Hugo's asset pipeline. The static directory surfaces its contents in the public output folder. Not sure what you mean about a grey overlap. Maybe you can send a screenshot.

[kentmz]

I just happen to name the folder assets. Attached screenshot of my folder. So, you mean if I have a folder called say "my-static-assets" in the root I cant have an image in there and reference it in the config is it?

Attached the screenshot regarding the overlay. There is an grey overlay that sits on top of this image. How do I remove it or set the color of this to transparent. The same image is used on the post, you can see that it doesn't have an overlay.

Also, can I add a logo yet?

[budparr]

Maybe this will help: https://gohugo.io/content-management/static-files/

[kentmz]

Thanks for sharing this. Appreciate your help. Do you have any idea how I can resolve the overlay issue?

[mmhtuda]

Quite a bite late, but I tought I'd follow up:
For these questions I usually take the investagor tools of my browser (Ctrl + Shift + I) and step into the biggest item/container which covers all of what I am looking for... in this case I found that the heading was assigned a class .bg-black-60

.bg-black-60 {
    background-color: rgba(0,0,0,.6);
}

Which is probably assigned in some CSS or even tachyons. But somewhere in the template this must be assigned, so I am looking for the class name in the checked out theme repo.

And there we go: in the theme's layouts\partials\page-header.html and site-header.html it is assigned. You can easily change this to a lower percentage, because it also appears in the _assets\ananke\css\tachyons.css and there you can find similar classes in 10 per cent steps.

---

To overwrite the theme's partial, create the same folder structure (layouts\partials\) and create the HTML files you want to adjust there (page-header.html and site-header.html) and adjust the value in this file, Hugo will prioritize this file over the theme's one.