Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding an image inside tabs does not work correctly #225

Open
TobiasBaeumlin opened this issue Dec 8, 2023 · 7 comments
Open

Adding an image inside tabs does not work correctly #225

TobiasBaeumlin opened this issue Dec 8, 2023 · 7 comments

Comments

@TobiasBaeumlin
Copy link

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.

@imfing
Copy link
Owner

imfing commented Dec 8, 2023

Can you paste the example above in a code block?

@TobiasBaeumlin
Copy link
Author

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.

@imfing
Copy link
Owner

imfing commented Dec 8, 2023

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

@TobiasBaeumlin
Copy link
Author

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

@imfing
Copy link
Owner

imfing commented Dec 12, 2023

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

@TobiasBaeumlin
Copy link
Author

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.

@imfing
Copy link
Owner

imfing commented Dec 14, 2023

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:

#82

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants