Cover is not displaying

[markusmeier345]

Hello everyone,

I am struggling with something that is probably very simple. I can not get the Cover image to show up.

The files is in the static folder. Am I getting something wrong? I am unsure about the Syntax sometimes, but this should be a straight copy from the wiki features page if I'm not mistaken.

this is my structure (without themes and public):

├── archetypes
│   ├── default.md
│   └── Projects.md
├── assets
├── content
│   ├── Projects
│   │   ├── Card_Game.md
│   │   └── HighresScreenshot00002.png
│   └── test.md
├── data
├── hugo.yaml
├── i18n
├── layouts
│   └── shortcodes
│   └── showimage.html
├── static
│   ├── Images
│   │   ├── Back to the Roots
│   │   │   ├── B9RVkd.png
│   │   │   ├── Cq7B8r.png
│   │   │   ├── jFwuoZ.png
│   │   │   ├── lneXSy.png
│   │   │   └── QWvgFc.png
│   │   ├── business-portraits-02.02.24-4_cropped.jpg
│   │   ├── Card Game
│   │   │   ├── HighresScreenshot00001.png
│   │   │   ├── HighresScreenshot00002_cropped.png
│   │   │   ├── HighresScreenshot00002.png
│   │   │   ├── HighresScreenshot00003.png
│   │   │   ├── Screenshot-2024-02-04-001302.png
│   │   │   └── Screenshot-2024-02-04-002810.png
│   │   ├── Dont Look at Medusa
│   │   │   ├── HighresScreenshot00000.png
│   │   │   ├── HighresScreenshot00002_01.png
│   │   │   ├── HighresScreenshot00003_01-1.png
│   │   │   ├── HighresScreenshot00003_01.png
│   │   │   ├── HighresScreenshot00004-1.png
│   │   │   ├── HighresScreenshot00004.png
│   │   │   └── HighresScreenshot00005_01.png
│   │   ├── emotion gap
│   │   │   ├── Character-Concept2.png
│   │   │   ├── cropped-cropped-HighresScreenshot00001_01-1.png
│   │   │   ├── cropped-HighresScreenshot00001_01-1.png
│   │   │   ├── HighresScreenshot00000_01-1.png
│   │   │   ├── HighresScreenshot00000_01.png
│   │   │   ├── HighresScreenshot00001_01-1.png
│   │   │   ├── HighresScreenshot00002_01-1.png
│   │   │   ├── image10.png
│   │   │   ├── image15.png
│   │   │   ├── image1.png
│   │   │   ├── image2.png
│   │   │   ├── image4.png
│   │   │   ├── image6.png
│   │   │   ├── image7.png
│   │   │   └── image9.png
│   │   ├── test.jpg
│   │   └── Void Walk
│   │   ├── HighresScreenshot00000-1.png
│   │   ├── HighresScreenshot00001_01.png
│   │   ├── HighresScreenshot00003_01-2.png
│   │   ├── HighresScreenshot00004-2.png
│   │   ├── HighresScreenshot00005.png
│   │   ├── Skizze-Void-Walk-2.png
│   │   ├── Skizze-Void-Walk_4.png
│   │   ├── Skizze-Void-Walk_bg-only.png
│   │   └── Skizze-Void-Walk-bridge.png
│   ├── profilepic.jpg
│   └── Videos
│   └── Card_Game_Demo.mp4

[Tauheed-Elahee]

Hello @markusmeier345 ,

Reason: The path to your profile pic is not correct.

Fix: Get correct path to profile pic.

How to implement fix:
Path to any file in the static folder must have a leading forward slash, /. In the case of the static/profilepic.jpg the proper path to the image is: /profilepic.jpg the same with sub folders. If profilepic.jpg is moved to a subfolder within static than the actual path is /subfolder/profilepic.jpg

Also remove unnecessary <image and <alt and <text . Those are not meant to be there you have to replace everything inside <> and the <> themselves.

The issue is also shown when using the figure shortcode. The shortcode could not determine the path of the image hence it shows the missing image icon. Use the same path for the argument of the shortcode in the same style. Again for files in the static folder, paths must have a leading forward slash /. In this case it must be {{< figure src="/profilepic.jpg" >}}

Solution:

cover:
  image: "/profilepic.jpg"
  alt: "alt text"
  caption: "This is some Text"

And for the shortcode:
{{< figure src="/profilepic.jpg" >}}

[markusmeier345]

Hello @Tauheed-Elahee

Thank you for your quick reply. Adding a forward slash worked for the figure, but not the cover.
I used <image, <alt and so on based on the example from the Sample Page.md section in the Install/Update Guide. This is what I meant with the Syntax is confusing me. Either way I tried out both.

[Tauheed-Elahee]

Can you give another screen shot?

I would like to see if the alt text shows up instead of the image. That's what usually happens when the image path is incorrect.

Also, is it possible to share the repo of the project you're working on? It would help with trying out solutions before suggesting them.

Also I agree with you about the syntax being confusing. I think the author should have just kept with a convention, made it clear and stuck with it throughout to avoid confusion, especially when < is used in shortcodes and must be included.

[markusmeier345]

The alt text does not show up, but due to compatibility issues with another module I have started moving to another theme and left this on a separate branch. It would be nice to get it working but I don't really have that kind of time for this Project. So I'm fine leaving this unresolved.
Thank you for your efforts though!

[Tauheed-Elahee]

Could you link the project repo and branch? Would like to see what the solution would be.