Hugo 0.74.3 Ascii-diagram images are generated properly but linked to wrong location

support
1

Hey Folks.

So I was able to use the recently implemented Asciidoctor extensions to get my site to build asciidoctor-diagram images, like graphviz or plantuml images. The images are getting created correctly in the public directory, but for some reason on the web page itself the links are pointing to the incorrect location. Perhaps @muenchhausen might know what the issue is. The gitlab repository is ca_water_data / ca_water_data_blog · GitLab

Just for a concrete example, the actual gitlab pages site is https://ca_water_data.gitlab.io/ca_water_data_blog. Now the first introduction post is located at https://ca_water_data.gitlab.io/ca_water_data_blog/posts/#introduction . And the links to images in that introduction post are located at https://ca_water_data.gitlab.io/ca_water_data_blog/posts/example.svg, but the actual images are located in https://ca_water_data.gitlab.io/ca_water_data_blog/posts/introduction/example.svg. So you can see the error in the file/image path created by Hugo.

So I used the command hugo -v -d ./build server to start a development server. The corresponding layout of the build folder is like the image below. You will see that the actual images like example.svg are under separate folders in the build/posts/folder. NOTE, this is in contrast to the water_image.jpg file, which was in the root of the content/posts folder and then was pushed to the root of the build/posts folder–and not put into any specific post folder.

Selection_005
Selection_005519×912 35.9 KB

So the picture example.svg is rendered properly and it is in the build/posts/introduction folder. The same is true for the images or the second post build/posts/my-second-post/.

However, it seems like the actual website itself is looking for these images in the http://localhost:1313/ca_water_data_blog/posts/example.svg folder. So the image should be in the same root posts folder instead of the individual introduction, or my-second-post folder. I copied and pasted the link into the search window at the top.

Selection_004
Selection_004688×526 99.3 KB

Now personally, I think it is nicer to have the images in the same folder as the post itself. But I will follow whatever the recommended approach is with Hugo. But I as just trying to figure out what I did wrong to get the link to mismatch with the actual image location.

Note, I checked and there are not directives in the Asciidoc posts themselves for an :imagedir: so that is not an issue. I checked and in the demo project there was no reference for an :imagedir: either. Also here is my config.toml file.

baseURL = "https://ca_water_data.gitlab.io/ca_water_data_blog"
languageCode = "en-us"
title = "California Water Data Challenge"
theme = "dimension"

pygmentsStyle = "colorful"
pygmentsUseClasses = false
pygmentsCodeFences = true

[markup.asciidocext]
    extensions = ["asciidoctor-html5s",
                  "asciidoctor-diagram",
                  "asciidoctor-bibtex"] 
    workingFolderCurrent = true
    trace = true
    [markup.asciidocext.attributes]
        my-base-url = "https://ca_water_data.gitlab.io/ca_water_data_blog"
        my-attribute-name = "California Water Data Challenge"
[markup]
    [markup.tableOfContent]
        endLevel = 3
        ordered = false
        startLevel = 2
2

First, when posting to this forum, you are more likely to receive timely and accurate assistance when asking concise questions.

Second, you appear to be using the Dimension theme, which presents the content from all posts on a single page. That is why the URL for the introduction is:

https://ca_water_data.gitlab.io/ca_water_data_blog/posts/#introduction

instead of:

https://ca_water_data.gitlab.io/ca_water_data_blog/posts/introduction

That means that URLs for resources (images, fonts, scripts) specified in content/posts/introduction.adoc must be either relative to https://ca_water_data.gitlab.io/ca_water_data_blog/posts or absolute.

If it were me, I would try to get everything working with a simple theme, then tackle migration to a single-page theme like Dimension as a separate task.

3

@jmooring Thanks for your response. Yep, sorry about the length of the post. Usually most of the forums request as much detail as possible, so seems like I took that advice to the extreme :). Okay, I see what you are saying. So the theme is basically what decides how those links are created. I did not realize that the Dimension theme tries to put all posts onto a single page. So I can find a simpler theme.

Now is there a way to identify a theme that would cause this type of issue? I mean, is there a tag or something for themes that are like Dimension and put everything onto one page? That way I know what to look for when I hunt through themes.

Thanks again for your help. I don’t think I would have figured out that the theme was causing the issue, unless you had told me.

4

Maybe. Depends on whether or not the theme is accurately tagged, and whether or not the theme demo provides clickable links to embedded content.

Here are the themes with the “single page” tag:
https://themes.gohugo.io/tags/single-page

The “Dimension” theme is not on this list. It does not have the “single page” tag.