Images from assets and static not rendering in Congo v2

[vinceimbat]

I didn't have this issue in the site I built with Congo 1.

Now I am building a new site and I can't use images when I put them in the static and assets folders. The profile home page layout, for example, does not show my profile photo. When I insert photos from the static into posts, the build fails and I get this page instead:

I am able to still able to insert photos in my posts and pages through page bundles, which is the best way to do it anyway. But I do want to use the profile homepage layout. Something I can't do because /assets don't seem to work correctly. What could I possibly be doing wrong?

[jpanther]

Thanks for the question. You are correct that the theme looks for these images in the page bundle. The homepage looks for assets in the root of the content/ folder so you should just be able to place the image there and it will pick it up. This is exactly how the exampleSite works.

What syntax are you using when inserting the image in your markdown content?

Also, if you ever need to insert an image and have the default Hugo behaviour of calling a static image, you can use the figure shortcode and set default=true. The shortcode docs have more information on this if you're interested.

[vinceimbat]

Hi @jpanther thanks for the response. I use the standard Markdown syntax to call images from /static: ![Alt text](image.jpg "Image caption"). I also tried using the figure shortcode format you provided in the docs. Both failed to build the site unless, as you said, I add default=true to the code. Using default=true, I am now able to call images from the /static folder. I'll continue using page bundles for now, but it's good to know I can still use the static folder if I ever I need to. Thanks for the help. I never encountered this issue in Congo v1. Was this a result of your updates to v2?

[jpanther]

Yes, this is one of the changes in v2. The new version will now use Hugo Pipes to dynamically scale images for the best site performance. In order for this to work, the assets need to be provided in the page bundle as static assets cannot be processed by Hugo Pipes. The default=true is designed to provide an escape hatch from this functionality.

[venteto]

I'm finding it impossible to access images in a static folder where the baseURL has a subpath, such as ....
https://mydomain/my-site-root/
... whether viewing the live site, or viewing localhost while running hugo server

How can I make this work? I was thinking this was the default Hugo behavior to just prefix image file names with a leading / and everything would work both live and on localhost, no?

[cargocultprogramming]

Follow-up question on this: I'd like to manage my blog via git repo but not commit images with posts. I can certainly filter images in gitignore but it would be nice to keep all images in a separate folder to be able to easily back them up in another way. (Of course, just backing up the entire repo and omitting the .git-parts would also be possible but would make recovery a bit more involved.)

Is there away to move images from the page bundle to assets/ by replicating the directory structure of content/ in assets/ (or static/?)? This would basically replace the parent path of the page bundle. That would make it easy to handle storage/backup of post images independent of any text content that gets submitted to the repo.
Maybe I'm overthinking this (new to hugo) and everyone is just committing images or there is a hugo switch that handles parent paths for page bundle images?

[jpanther]

I'm not sure that will work as the assets folder in the root of the project is for whole of project assets and are completely separate to page bundles. This is more a Hugo architecture type limitation than anything else as it's definitely possible to make the theme work the way you are asking, but it's not going to be intuitive to the normal Hugo use case.

If you really wanted to do this, your best way forward is to override the article layout so that it uses the site resources in place of the page bundle, but you would have to determine the logic that you would like to use to find the images as Hugo wont offer much in the way of automatically mapping the directory hierarchy to the content folder as it's just not the intended use case.

An alternate solution would be to simply place all the images in a static-like folder that is deployed separately to your Hugo project and reference them manually. This would be a similar setup to if you hosted all your images on a CDN and simply referred to them using their full URL rather than a local reference.

[cargocultprogramming]

Thanks for taking the time to reply! That gives me a better idea where and how it makes sense to fiddle with this.

Regarding the cover|thumbnail|feature images - I guess if i define vars with these names in the frontmatter (feature: "some/path/img/myfeature.jpg), the var content should get picked up in the template in .Params.feature etc. independent of the link location. I'll test that.. thanks!

[jpanther]

Yes, that will work, but be aware that vars like feature are already used in the theme so if you don't want to clash with existing templating functionality it might be easier to pick your own but it entirely depends on how much you plan to override and what you want to achieve.

However, the simplest example would be if you look at the layouts/_default/single.html template and at the top you'll see the image logic where it calls $images := .Resources.ByType "image" and then $images.GetMatch .Params.feature. This is Hugo for "fetch all the images in the page bundle and find me one with this name"... if you were to change it to simply resources.GetMatch .Params.feature then this is going to search the global assets directory instead.

[wolfspyre]

@cargocultprogramming - welcome to the wonderful world of backwards and sideways.

:) it's obtuse, but you'll get the hang of it...

feel free to look at some of the shenanigans I've had to do to get stuff realized (( then again, I wouldn't consider all of my ways good)) :)

https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes

rendered/presentation here---v

https://wolfspyrelabs.static.wolfspyre.io/hugo-kisso/wplshortcodes/

assets:
https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/tree/wpl_main/assets

couple heavy contortion partials that might help ..... or might just further confuse ya...

https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/blob/wpl_main/layouts/partials/util/enumerateManifestIcons.html

https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/blob/wpl_main/layouts/partials/util/genManifestIcon.html

those two partials do a lot of manipulation and passing of things, ultimately realizing the asset via .Publish (usually)

There are other pieces that do similar stuff too...

TLDR: Working with resources gets wobly...

what I've been doing for content I don't want in the repo is posting the asset to some web-enabled location (I run ceph so I've got a radosgw endpoint that I put static content on) and then just link to external assets that way...

ymmv