featureImage/thumbnails referenced as pageBundle resources don't load

[jbowdre]

I have checked all the prerequisites below and I'm yet experiencing a problem

• [x] Read the README.md
• [x] Have the extended version of Hugo installed
• [x] Used the exampleSite's config.toml as a reference
• [x] I have included my repository link. Instead of pasting long snippets here.

Describe the bug featureImage and thumbnail images don't load when they pointed to images stored in a post's pageBundle directory.

I attempted to do so in this commit by setting the post's Front Matter thusly:

usePageBundles: true
featureImage: 'bundle.jpg' # Top image on post.
thumbnail: 'bundle.jpg' # Image in lists of posts.

The rendered HTML looks like this:

<div class="excerpt_thumbnail"><figure>
  <picture>  
    <img loading="lazy" decoding="async" alt="Using Hugo page bundles" class="image_figure image_thumbnail image_internal image_unprocessed" src="/bundle.jpg">
    <figcaption></figcaption></picture>
</figure>
      </div>

And the images fail to load:

Desktop (please complete the following information):

• OS: Debian 10
• Browser: Chrome 100.0.4896.133

[georgew509]

I believe that I am seeing the same issue with page bundles and featured image:

`

o o o usePageBundles: true featureImage: 'images/cloud_server.png' featureImageAlt: 'NEW Years image' featureImageCap: 'IMAGE by Jorge Guillen from Pixabay'

`

The feature image does not load--I just see the "?" in a blue square box.

However, when I use a markdown image reference in the body, it works fine:

I am trying to dig into the Hugo code, but as I mentioned before, it's very new to me.

[rootwork]

I have a PR incoming for this.

[georgew509]

Thanks! My feature image is working!

However, I still do not see the feature image caption. This is what my front matter looks like:

usePageBundles: true featureImage: 'images/cloud_server.png' featureImageAlt: "Cloud server image" featureImageCap: "Image by Jorge Guillen from Pixabay”

Actually, I tried looking at the code, and I cannot find where featureImageAlt and featureImageCap are implemented.

I appreciate all you efforts with the theme. I really like it and want to convert my site to it. I am going to proceed with my conversion efforts and get it published. I can add the feature caption part later when it becomes available—no rush from my point of view—I know how busy work and life can be.

Awesome work!! Thanks, again,

— George @.*** https://altoplace.com

On Apr 28, 2022, at 4:00 PM, Ivan Boothe @.***> wrote:

Closed

[rootwork]

@georgew509 Hmm, I didn't test the caption feature but it's possible something got awry. I'll take a look.

[georgew509]

Thanks. Again, I am new to Hugo, but I did a grep of the code and I did not see any reference to featureImageAlt or featureImageCap except in the README, exampleSite, archetypes file/directories:

@.***:~/Hugo/apcom/themes/hugo-clarity $ find . -type f -exec egrep -H featureImage {} \; | egrep -v README | egrep -v exampleSite ./archetypes/post.md:featureImage: "/images/path/file.jpg" # Sets featured image on blog post. ./archetypes/post.md:featureImageAlt: 'Description of image' # Alternative text for featured image. ./archetypes/post.md:featureImageCap: 'This is the featured image.' # Caption (optional). ./layouts/_default/single.html: {{- with .Params.featureImage -}} ./layouts/partials/opengraph.html:{{- with $p.featureImage }}

I am in the process of converting my site to Clarity, and will have it published later today. It seems to be working great except for:

• No feature image caption.

• "codeMaxLines = 15” parameter doesn’t seem to be working. My code blocks are expanding to the max number of lines.

— George @.*** https://altoplace.com

On Apr 29, 2022, at 3:38 PM, Ivan Boothe @.***> wrote:

@georgew509 Hmm, I didn't test the caption feature but it's possible something got awry. I'll take a look.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[jbowdre]

Thanks for the swift fix for this!

Unfortunately I'm still seeing a similar problem if I override the default post permalink as shown in this commit.

With this in the site's config.toml:

[permalinks]
  post = ":title"

so that the page bundles sample post URL is /using-hugo-page-bundles/ instead of /post/bundle/, both the thumbnail and featureImage src gets rendered as /post/bundle/bundle.jpg instead of /using-hugo-page-bundles/bundle.jpg.

Should I create a new issue for this permutation of the problem?

[rootwork]

This is probably somewhere that I've overlooked, using a direct link instead of using .RelPermalink. I'll take a look.

We really should try to figure out some way to test all these possible permutations so fixing one thing doesn't break another...

[georgew509]

I would be happy to test from the point of view of an end user. However, my availability will be very limited until after the 23rd (have an upcoming trip planned).

As I have referenced before, I can test feature images in a page bundle. The feature image is now working, but the feature image caption is not.

Also, code blocks are not working correctly. For example, if I have a block of code that is 150 lines long. The entire 150 lines are displayed instead of just the “codeMaxLines.”

Best Regards, George

On May 6, 2022, at 3:31 PM, Ivan Boothe @.***> wrote:

This is probably somewhere that I've overlooked, using a direct link instead of using .RelPermalink. I'll take a look.

We really should try to figure out some way to test all these possible permutations so fixing one thing doesn't break another...

— Reply to this email directly, view it on GitHub https://github.com/chipzoller/hugo-clarity/issues/291#issuecomment-1119988101, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLKIOI6RIRGUSSCH5XNO4LVIV6TXANCNFSM5UNAYPQA. You are receiving this because you were mentioned.

[rootwork]

@georgew509 Thanks for offering to test! I was more thinking out loud that we should have some kind of automated tests so that when changes get made internally, we know it doesn't break things that already work.

In terms of your other issue, let's try to keep this issue focused on the images; please open a new issue (or update an existing one if it's relevant) for problems with the code blocks.

[chipzoller]

Regression with code blocks is captured here. Add your "plus one" if you like. And thank you, @rootwork!

[georgew509]

Thanks. I did add a comment to cover the max code lines not working.

FYI. I have published my current Clarity “test” site at: https://altoplace.org

The code block example is at: https://altoplace.org/posts/2021/configure-apache-and-php-fpm-on-macos/#using-port-80

These are my code block settings in my config:

@.***:~/Hugo/HCaporg/config/_default $ egrep "codeMaxLines|codeLineNumbers" params.toml codeMaxLines = 15 codeLineNumbers = false

(Actually, the code block is 134 lines long, not 150.)

Also, for this same post, you can see my feature image. These are my feature image settings in the front matter:

featureImage: 'images/apple-1868496_1280.png' featureImageAlt: "Apple Computer." featureImageCap: "Image by Pexels from Pixabay” —

As you can see, the feature caption is not working.

If I may, I wanted to mention one other item. I am not sure if it’s a real issue (I can open a new issue if it is). This has to do with the Table of Contents. When I click on a link in the TOC, it takes me to that portion of the document. But the section header is hidden. I have to scroll down one line to see it. Again, I don’t know if this is issue or not. I guess I was expecting the first line to be the header that I clicked on in the TOC.

Thanks for this really great theme. I have been searching for just the right theme for my primary site (Altoplace.com). Clarity is my top contender if we can get a couple of these issues resolved.

Hope this was helpful. Thanks, again.

George

On May 6, 2022, at 5:02 PM, Chip Zoller @.***> wrote:

Regression with code blocks is captured here. Add your "plus one" if you like. And thank you, @rootwork!

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[rootwork]

@georgew509 Please do open a new issue for the TOC item -- I think it would be considered a feature request, as what you're describing is the default way anchor links+scrolling work in browsers. But it is something we could address.

[georgew509]

Ok, I can open an issue about the TOC item. BTW, this post I found seems to exactly describe the problem I am seeing and suggests a solution:

https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

George — @.*** https://altoplace.com My personal place in the Internet cloud.

On May 6, 2022, at 6:19 PM, Ivan Boothe @.***> wrote:

 @georgew509 Please do open a new issue for the TOC item -- I think it would be considered a feature request, as what you're describing is the default way anchor links+scrolling work in browsers. But it is something we could address.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[rootwork]

@jbowdre Attempted to fix the permalink issue in #297 -- feel free to test (instructions at the bottom of that PR).