Hugo+Ananke+PhotoSwipe

support
1

Hi,
Inspired by the post/blog of @brunoamaral I’m trying to setup a simple hugo site that uses Photoswipe for displaying images. Unfortunately the gallery is just rendered as a list of images that link to full size images. The Photoswipe gallery functionality of displaying them isn’t working. The rendered HTML of the gallery post page looks okay to me, so I suspect it has to do with the CSS and/or Javascript. Does anyone have an idea on what I’m doing wrong here?

Here is what I roughly did so far:

  • add the files from Photoswipe plus initphotoswipe.js into static/plugins/photoswipe
  • init Photoswipe in the layouts/partials/footer.html
  • add custom.css public/css that is used by the shortcode below
  • create the layouts/shortcodes/gallery.html shortcode that the “post” will use
  • create sample post in content/post/index.md that uses the gallery

I run it with:

git clone --recurse-submodules  https://github.com/kenwphoto/hugo-photoswipe-test.git
cd hugo-photoswipe-test
hugo server

Any hints to get it working are appreciated.
Regards,
Ken

2

I’m on mobile, but if I could wager I would say that the JavaScript files aren’t loading if you only see a list of images.

3

Thanks for your quick reply. I’d have thought if the JavaScript files cannot be found, I’d see an error on the console in the browsers debugging tooling, but there aren’t any.

4

@kenw When I use @brunoamaral’s shortcode, without modifications, it works fine. You made some changes to his code.

5

@jmooring Well spotted! I’m using the shortcode from Bruno’s blog post because it was posted later in time compared to initial forum post.

6

@jmooring you are right, when replacing the shortcut with contents from the initial blog post it does work for me as well. Thank you!
I sort of like the approach from the blog post though, as it puts the CSS, Javascript, and HTML in different places.

7

It looks like you omitted some things when you took that approach.

8

You are probably right, but I don’t know what I’m missing yet. The blog post describes five steps, that I think I’ve done as well. Do you have any specific hints?

9

These are the commits:

10

Thanks for sharing the code, you have a PR waiting for you to approve :slightly_smiling_face:

I am not always able to debug the implementations people make of this shortcode, this was an exception. And thank you for posting on the forum, I get emails once in a while and this way people can find help by themselves.

For reference: Fixes the photoswipe shortcode by brunoamaral · Pull Request #1 · kenwphoto/hugo-photoswipe-test · GitHub

There was a div being closed prematurely.

  <div class="gallery d-flex align-content-start flex-wrap" itemscope itemtype="http://schema.org/ImageGallery"></div>
1 Like
11

@brunoamaral this is it. The div in the gallery shortcode was closed too early. I was stripping down class attributes from that div by commenting the original and create a new line but I overlooked that my text editor put in a closing tag automatically.

Thank you for the PR! I appreciate it. There’s one aspect I don’t quite understand yet: Why do you move the PhotoSwipe initialization from layouts/partials/site-footer.html to layouts/_default/baseof.html as well?

Just fixing the shortcode seems to be sufficient:

--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -1,8 +1,7 @@
 {{ with .Get "title" }}
   <h4>{{ . }}</h4>
 {{ end }}
-  <div class="gallery d-flex align-content-start flex-wrap" itemscope itemtype="http://schema.org/ImageGallery"></div>
-  <!--div class="gallery" itemscope itemtype="http://schema.org/ImageGallery"-->
+  <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
   {{- range (.Page.Resources.Match (printf "%s*" (.Get "folder"))) }}
   {{ $thumbnail := .Resize "320x" }}
     <figure itemscope itemtype="http://schema.org/ImageObject" class="image gallery-item">
12

Because that way you can have the html code at the end of the body, and the required JS after closing the body.

Someone please correct me if I am wrong, but I believe that will help render the page a bit faster.

I should also have added the .hasShortcode gallery call to make sure that JS and HTML aren’t in the page if you don’t have a gallery.

13

Ah, thanks! Yeah, the original base template of the Ananke theme pulls in the footer.html contents inside the <body> and with your approach the <link> and <script>tags that reference the Photoswipe CSS and JavaScript files can be placed outside the body.

14

Yes, indeed - thx! I’ve added it to initialize Photoswipe only if the page is using the gallery shortcode.

1 Like
15

thanks @brunoamaral for proving solution to embed photoswipe in Hugo

will you make a follow up using the v5 in Hugo

your shortcode is really helpful, saved alot of time and made the process really easy

thanks again

16

I’m not sure what v5 you mean, but to answer your questions, no. I will only keep the shortcode up to date for as long as I use it.

It’s not a drop-in solution, so that makes it a bit harder to manage, but if someone wants to put it on a github repo i have no objection to that.

17

hi @brunoamaral

I was referring to the photoswipe version 5 which is still in beta heavily focused on clean code. and made a single css file and even support custom icons etc.

18

Has anyone attempted to put the gallery to the front page?

My approach was to override the layouts/index.html to just pull in .Content:

{{ define "main" }}
 <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy {{ $.Param "text_color" | default "mid-gray" }}">
    {{ .Content }}
  </article>
{{ end }}

Then create an content/_index.md with that pulls in the gallery:
resources:

- src: "gallery/*.jpg"
  name: gallery-:counter
  title: gallery-title-:counter
---
{{< gallery folder="gallery" title="frontpage test gallery" >}}

And of course place some JPGs under content/gallery/. But it’s not working. The HTML output is just an empty gallery div:

<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
</div>
19

in that case, the answer is maybe if I have the need to update my blog to use the new code.

@kenw that would be another thread :slightly_smiling_face: but to answer your question the homepage is a section and therefore can’t access resources in a folder for some reasons.

2 Likes
20

hi @knew

You can use the get resources on a seperate page to add all the images and then on home page use the .Site.GetPage "the-page-you-created" and simply use the photoswipe partial weird way I know I tried this using the shortcode of @brunoamaral yesterday and it works for me

Thanks @brunoamaral I follow you for updates on photoswipe

1 Like