mfg92 / hugo-shortcode-gallery

A theme component with a gallery shortcode for the static site generator hugo.
MIT License
344 stars 64 forks source link

Featured image not being included in the gallery #41

Closed geeklingo closed 2 years ago

geeklingo commented 2 years ago

I've noticed that if i use a featured image with the aether theme that this image is not included in the gallery. Is this by design? And is there a way to overwrite this behaviour?

CleanShot 2022-04-28 at 08 21 52

CleanShot 2022-04-28 at 08 22 01

post:

---
title: "DSM Progress Week 1"
date: "2012-05-15"
categories: 
  - "aquatic"
tags: 
  - "algae"
  - "aquarium"
  - "dry-start-method"
  - "dsm"
  - "nano-tank"
  - "planted-tank"
resources:
  - name: featuredImage
    src: "images/tank18.jpg"
---

Progress shots at week 1:

{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview="true" loadJQuery=true >}}
mfg92 commented 2 years ago

What does featured mean in this context?

geeklingo commented 2 years ago

Hi, thanks for the quick response. I've updated my initial post.

Under images I have 3 photos. But the gallery seems to be only showing the 2 that are not the featured image (the one at the top and on the post card).

geeklingo commented 2 years ago

I also get that funky shortcode issue, but it's only showing on this post. All the others are fine.

mfg92 commented 2 years ago

Interessting issue. I had a look at it and i figured out that the problem is, that you change the name of the resource in your posts front matter to "featuredImage". The shortcode uses .Page.Reources.Match to find the right images (https://gohugo.io/content-management/page-resources/#methods). And this match method uses the name, not the actual file path. The name is by default the file path, but you have changed it to "featuredImage", so match="images/*" doesnt match it any more.

I think you have two options here:

  1. Do not change the name of the image via the front matter
  2. Do not use the match parameter of the shortcode, if "match" is omitted all resource of type image of the current page bundle are displayed: {{< gallery sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview="true" loadJQuery=true >}}
mfg92 commented 2 years ago

I also get that funky shortcode issue, but it's only showing on this post. All the others are fine.

I don't think I can help you with that. I think that has to be fixed in the theme.

geeklingo commented 2 years ago

Right. Thinking about it, works good this way too lol

geeklingo commented 2 years ago

I also get that funky shortcode issue, but it's only showing on this post. All the others are fine.

I don't think I can help you with that. I think that has to be fixed in the theme.

Sure, i can raise an issue over at Aether, but how should i describe this issue to them? I'm not that familar with the Hugo platform.

mfg92 commented 2 years ago

The code of Aether that extracts the preview text has to ignore JavaScript code.

Perhaps alternativly Aether could provide a way to specify the preview text in the front matter of the post. Have you tried using the description parameter?: https://github.com/josephhutch/aether/blob/master/README.md?plain=1#L96

geeklingo commented 2 years ago

hahaa i'm an idiot, yes thank you, that worked.