hextra icon indicating copy to clipboard operation
hextra copied to clipboard

Adding an image inside tabs does not work correctly

Open TobiasBaeumlin opened this issue 2 years ago • 7 comments

Description When trying to add an image within a tabs shortcode only the alt text is shown, not the image itself.

Steps To Reproduce

{{< tabs items="tab1, tab2, tab3" >}}

{{< tab >}}
alt text1 {{< /tab >}} {{< tab >}} alt text1 {{< /tab >}} {{< tab >}} alt text1 {{< /tab >}}

{{< /tabs >}}

The images are shown within the tabs

Actual Behavior

The alt texts are shown

  • Hugo Version: v0.121.0
  • Browser/OS: Firefox, Chrome / Linux
  • Theme Version: (Where do I see this?)

Additional Context

When inserting the images with they are displayed correctly.

TobiasBaeumlin avatar Dec 08 '23 12:12 TobiasBaeumlin

Can you paste the example above in a code block?

imfing avatar Dec 08 '23 15:12 imfing

Like this?

Steps to reproduce

{{< tabs items="tab1, tab2, tab3" >}}

{{< tab >}}
![alt text1](image1.png)
{{< /tab >}}
{{< tab >}}
![alt text2](image2.png)
{{< /tab >}}
{{< tab >}}
![alt text3](image3.png)
{{< /tab >}}

{{< /tabs >}}

When inserting the images with a strange relative path ![alt text1](../image1.png) they are displayed correctly.

TobiasBaeumlin avatar Dec 08 '23 15:12 TobiasBaeumlin

Can you try add new lines before and after the image markdown?

imfing avatar Dec 08 '23 16:12 imfing

Actually that's what I did initially. It's the same problem with or without the newlines.

TobiasBaeumlin avatar Dec 11 '23 08:12 TobiasBaeumlin

you may use the relative path ![alt text1](../image1.png), which should always work

content/
├── docs
│   ├── my-page
│   │   ├── content1.md
│   │   ├── content2.md
│   │   ├── image1.jpg
│   │   ├── image2.png
│   │   └── _index.md

In content1.md you need to specify ../image1.jpg for the image to successfully display the image

imfing avatar Dec 12 '23 00:12 imfing

Yes, as I stated before, I figured this out already. It just seems cumbersome and illogical to me, since this doesn't look to me like the correct path to the image.

TobiasBaeumlin avatar Dec 14 '23 08:12 TobiasBaeumlin

I understand that's unintuitive but that's how Hugo handles the assets files under a folder.

What we see in the file system is content1.md. It will eventually produce:

image1.png
content1/
  index.html

that's the reason why we need to use relative path.

I created a PR previously to improve the image resolution logic:

https://github.com/imfing/hextra/pull/82

seems it's not working here. I will take a look and see if I could make the above work in shortcodes here.

imfing avatar Dec 14 '23 23:12 imfing