does not work with Hugo LogBook theme

andyczerwonka commented 3 years ago

I followed the installation instructions, and the gallery is not rendering for me. The preview of an article that includes the gallery shortcode looks like it's trying to render something.

When I go into the post, it's completely blank.

My directory structure looks correct, but maybe I'm missing something?

I have also included it in my themes directory:

theme = ["logbook", "hugo-shortcode-gallery"]

mfg92 commented 3 years ago

I have tested hugo 0.85.0 on my website and the gallery worked. So the problem ist not that particular hugo version.

Do you have jQuery inlcuded on your site or are you using the 'loadJQuery' option (like {{< gallery match="images/*" " loadJQuery="true" >}})?

Are there any messages in your browsers console?

andyczerwonka commented 3 years ago

@mfg92 I am not using the loadJQuery="true" option, but it does look like the logbook theme includes jQuery.

jQuery v3.5.1

I tried to replace 3.5.1 with 3.6.0 - same issue.

There are no error messages in the console.

andyczerwonka commented 3 years ago

If you'd like to dig in a bit live, you can find me on Discord: andy.czerwonka#2893

andyczerwonka commented 3 years ago

Here's a gist of the rendered page.

andyczerwonka commented 3 years ago

@mfg92 My mistake, there is an error in the console when loadJQuery="true"

Uncaught TypeError: gallery.justifiedGallery is not a function
    <anonymous> http://localhost:1313/post/picking-up-the-camera-gallery/:523
    jQuery 13
picking-up-the-camera-gallery:523:11
    <anonymous> http://localhost:1313/post/picking-up-the-camera-gallery/:523
    jQuery 13

I have fired up a forwarding proxy to the service on my machine running locally (it isn't published yet, so just running hugo server -D), but that might help debug? It is using the loadJQuery="true" option and the versions of jQuery for the Gallery and LogBook are both latest.

The markdown page being rendered in the page above looks like:

---
title: "Picking Up the Camera with a Gallery"
date: 2021-07-05T16:16:38-06:00
images:
  - "images/post/sixth-centre-100.jpg"
author: "Andy Czerwonka"
description: "This is meta description"
categories: ["photography"]
tags: ["calgary", "street"]
type: "normal" # available type (regular or featured)
draft: false
---

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Under this line we should see a gallery.

{{< gallery match="images/*" loadJQuery="true" rowHeight="150" margins="5" resizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview="true" >}}

mfg92 commented 3 years ago

So i think I have found the root cause of the problem: Your site/theme embeds/inlines jQuery at the end of the HTML. But the jQuery plugins (js files) of the gallery are loaded befor that.

So...

if you use loadJQuery="true" jQuery is loaded at the right time and the plugins are loaded correctly too, but at the end the jQuery from the gallery is replaced by the jQuery of your theme/site. This jQuery does not have the plugins installed and thats why the gallery does not work.
if you do not use loadJQuery="true" the jQuery plugins will not be initialized correctly as they need jQuery for that, but the embedded jQuery is only available later. -> gallery will not work

So how to handel that? You need to change the theme or your site so that it either:

does not include jquery on pages where the gallery shortcode is used (and use loadJQuery="true")
embed the jQuery in the header of the HTML (or at least before the jQuery plugins of the gallery) and do not use loadJQuery="true"

andyczerwonka commented 3 years ago

* embed the jQuery in the header of the HTML (or at least before the jQuery plugins of the gallery) and do not use `loadJQuery="true"`

I'm not sure about the lifecycle here, but you're saying that if I adjust the LogBook Theme jQuery to load earlier in the header, that would do it?

andyczerwonka commented 3 years ago

Brilliant!

<!DOCTYPE html>
<html lang="{{ site.LanguageCode | default `en-US` }}">

<head>
    {{ partial "head.html" . }}
    {{ partialCached "style.html" . }}
    {{ partialCached "script.html" . }}
</head>

<body>
    {{ partialCached "preloader.html" . }}
    {{ partial "header.html" . }}
    <main>
        {{ block "main" . }}{{ end }}
    </main>
    {{ partialCached "footer.html" . }}
</body>

</html>

I moved the {{ partialCached "script.html" . }} to the head section (it was below the footer), and it renders perfectly. It does break LogBook, some functionality no longer works, e.g. animations. I have reached out to team behind LogBook to see if there is anything we can do differently to allow the two to coexist.

andyczerwonka commented 3 years ago

@mfg92 How do you get the titles in the image like you do in your site?

andyczerwonka commented 3 years ago

Ah, I see it, Sidecar files

geeklingo commented 2 years ago

I have this exact same issue with aether theme but only on one post card. All the others render fine. I am using loadJQuery="true".

mfg92 / hugo-shortcode-gallery

does not work with Hugo LogBook theme #24