Header Image Path

[julie-de-ville]

Bug Report

Environment

Gentoo linux
Zola version: 0.19.2
tabi version or commit: V3.0.0

Expected Behavior

Tell us what should have happened.

I cannot get the header image to display. I placed it in static/img, and set the path as img/image.png in my _index.md in content, but it still does not display. When visiting localhost:1111/img/image.png, it does display, but currently there is nothing except the img_alt text.

The only way I can get it to display is by specifying it in home_banner.html

[welpo]

Hello!

Can you share the exact content of the _index.md page?

Have you checked the network monitor (Firefox docs) to see what happens when it attempts to load the file?

Did you try to find the image in the public directory (after zola serve or zola build)?

I would try to replicate the demo first:

• File in static/img/main.webp
• _index.md content:

+++
title = "Latest posts"
sort_by = "date"
template = "section.html"

[extra]
header = {title = "title", img = "img/main.webp", img_alt = "alt" }
+++

[julie-de-ville]

I will try those suggestions, thank you. The demo image does not work.

+++
title = "Fixations"
paginate_by = 5 # Set the number of posts per page
template = "index.html"

[extra]
image_base_path = "img/"
header = {title = "text", img = "img/image.png", img_alt = "text" }
+++

The image does show up in the public directory

In network monitor, it shows up as 'blocked.'

[julie-de-ville]

I changed the first line in content-security-policy.html to content="default-src 'self'; img-src * data:;

How should I configure to allow for the image source, but in a more secure way? The image is in static/img in the root dir.

[welpo]

That's helpful!

You mentioned you visit a localhost URL. Is that the URL Zola provides when you run zola serve?

For me, it's http://127.0.0.1:1111. I just tested going to localhost:1111 and it loads, but has issues (like the image not loading).

Try removing the CSP and visiting the URL Zola returns upon zola serve. That should fix it!

[julie-de-ville]

That worked, thanks!

[welpo]

Happy to hear!

[welpo]

You're missing the section_path variable in the [extra] section of content/_index.md. See point 5. in the required configuration section.

[julie-de-ville]

Oh yeah, sorry, I was messing with the configs and must have removed that. I added it back to content/_index.md as section_path = "blog/_index.md, and they still aren't showing up. I will look over all of the points in required configuration again, I feel like this has got to be user error on my part.

Edit: Got it! I didn't realize I had to set max_posts when using the section_path variable. Thanks again for all your help.

[welpo]

Glad you fixed it!

Did I understand you correctly? If you remove the max_posts line, no posts are shown in the main page? That shouldn't be happening!

Ah, I think I reproduced it! If you set paginate_by to any value and you are using the section_path variable, no posts are shown. Is that what happened?

[welpo]

I'm pretty sure that's what happened. So:

• Sorry! I want tabi to be as easy as possible to set up, and the docs were certainly not clear in this regard.
• I've updated the README with clearer information and warnings, as well as the Mastering tabi post.
• I've added a warning visible when serving for users who run into the same issue as yours.

You can see the changes and a screenshot for the warning in the pull request #418.

[julie-de-ville]

Yes, exactly! Glad I was able to bring it to your attention :)

[julie-de-ville]

Greetings, I was hoping that you could refer me to documentation on how to add images to blog posts, unless it is not something specific to this theme.

[welpo]

I recommend you use one of the image shortcodes: https://welpo.github.io/tabi/blog/shortcodes/#image-shortcodes

You can always use normal MarkDown syntax to add images:

![Alt text](https://en.wikipedia.org/wiki/File%253AForgetting_curve_decline.svg)

For local images, either:

• Place them in static/ and use an absolute path like /img.png
• Use asset colocation: https://www.getzola.org/documentation/content/overview/#asset-colocation

P.S: Please open new discussions for more questions. This helps keep the discussions organised :)