search

binokochumolvarghese / lightbi-hugo

Lightbi is a minimal and clean blog theme for Hugo.
https://lightbi-hugo-theme.netlify.app/
MIT License
64 stars 36 forks source link

Posting images #67

Open mmartinortiz opened 1 month ago

mmartinortiz commented 1 month ago

Hi,

When I try to add an extra image to my posts, the image appears as a broken link. I've used the markdown syntax as the figure shortcut, but none of them worked.

In this sample page the image also appears as a broken link.

binokochumolvarghese commented 4 weeks ago

Use {{< figure src="/path/to/image.jpg" caption="Caption for Image" attrlink="" >}}. It should work, please check your images are in the asset folder or not.

mmartinortiz commented 4 weeks ago

Thanks for your answer.

Using {{< figure ... >}} does not work either. I have pushed the suggested change to this branch of my website. The modified file is this one, and all the images are under the /assets/img folder.

I tried multiple combinations for the image path:

If I understood correctly, the documentation indicates that /assets is not required, and the absolute path needs to start right after /assets.

binokochumolvarghese commented 3 weeks ago

Can you please take the latest theme and try.

mmartinortiz commented 3 weeks ago

After

git submodule update --recursive --remote

I get the following error:

Error: error building site: render: failed to render pages: render of "section" failed: "/home/user/Projects/website/themes/lightbi-hugo/layouts/about/about.html:8:27": execute of template failed: template: about/about.html:8:27: executing "main" at <$image.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

If I clone the demo website, the same error does not show up. I noticed that the theme is under a different folder.

My .gitsubmodule

[submodule "themes/lightbi-hugo"]
    path = themes/lightbi-hugo
    url = https://github.com/binokochumolvarghese/lightbi-hugo

Demo's website .gitsubmodule

[submodule "themes/themes/lightbi-hugo"]
    path = themes/themes/lightbi-hugo
    url = https://github.com/binokochumolvarghese/lightbi-hugo

Is it relevant?

Even though, in the demo website the post Markdown Syntax Guide, which contains an image, the image is not rendered in the post.

binokochumolvarghese commented 3 weeks ago

I downloaded the theme locally and its running fine. Can you try that also? Also the figure shortcode is working in the demo. You can try that.

When the images are taking from the assets folder Markdown Syntax is not working, I will check the same.

mmartinortiz commented 3 weeks ago

I just cloned the theme and copied it inside my website's themes folder. The error about the pointer is gone, but the images are still not displayed. I used exactly the syntax of the demo, including some variants with the paths:

{{< figure src="/img/epuck.jpg" caption="With caption." attrlink="" >}}
{{< figure src="img/rgb-flowers-2.jpg" caption="Caption for Image" attrlink="" >}}
{{< figure src="/img/rgb-flowers-2.jpg" caption="Caption for Image" attrlink="" >}}
{{< figure src="assets/img/rgb-flowers-2.jpg" caption="Caption for Image" attrlink="" >}}
{{< figure src="/assets/img/rgb-flowers-2.jpg" caption="Caption for Image" attrlink="" >}}

An important difference I noticed between the demo and my website, is that the images are located in different places:

In my website I've defined in the hugo.toml file the location of staticDirs under ["static", "assets"], but the demo site does not define the staticDirs variable.