Using the gallery inside HTML details Tag

[markusmeier345]

Hello everyone,

I am trying to implement the gallery inside a collapsible section of my site. For this I am using a short code, seen on the left of the screenshot. The gallery seems to generate based on the inspection in the browser, but it is not visible.

I am new to Hugo, I have no idea if this a reasonable approach.

Thank you

[mfg92]

Did you first test to see if the gallery would work outside of / without the collapsible stuff?

[markusmeier345]

Yes the gallery is working outside the details tag.

[mfg92]

I have done some investigation: The issue is, that Justified Gallery does not calculate the correct sizes if it is called when the details are collapsed. A simple solution would be to have the details opened from the beginning using the open parameter , but this is probably not what you want.

Another solution is this:

1. Modify your details shortcode a bit by adding an id parameter:

   <details style="width: 100%" id="{{ .Get "id"}}">
   <summary>{{ .Get "title" | default "Click to expand" | markdownify }}</summary>
   <div >
       {{ .Inner | safeHTML }}
   </div>
   </details>

2. Have a script in your md file that recalculates the justified gallery when the user clicks on the details:

   
   {{< details title="Gallery Test" id="myGalleryDetails" >}}
   {{< gallery match="images/*" >}}
   {{< /details >}}

I'm sure there are better solutions to this problem, but I can't find one off the top of my head.

[markusmeier345]

Wow! Thank you for looking into this

I am getting some mixed results on the script though, have you tried it out with multiple details and galleries? The first one works, but the second one doesn't. Using the open parameters works for all though, might not be as beautiful but it works and that is more important right now

Edit: Multiple details with separate id's and galleries only seems to reliably work with the open parameter and if there is a gallery outside a details tag, before the details come. I have no idea why it exactly needs this order, but this fits the general structure for my site. I'm okay with leaving it like this. Thank you for your help!

[markusmeier345]

Hello,

id like to update for anyone that ends up here with a similar problem. If you set up the gallery to be implemented as a theme, make sure that the gallery comes before the actual theme you are using. It seems to be a priority thing were the scripts cancel each other out or something.

It is now working with the script by @mfg92 without having to use the open tag.

[mfg92]

Hi, the script needs to be adapted to work for multiple galleries. Currently the script only registers the event listener for the first detail component. The script needs to be changed so that it registers the event listener on each details component that contains a gallery. Also make sure that the correct instance of the justified gallery is updated within the event listener.