Setting up HugoPhotoSwipe

[brandon789]

Hi,

Hope you are well.

I am trying to setup a gallery using:

HugoPhotoSwipe

I have my Hugo site saved in:

~/Documents/Cyber Bunker/Sites/M'S Kitchen

I am using the http://demo.themefisher.com/agico-hugo/ 1 theme

Per the instructions I installed pip while in my home directory:

pip install hugophotoswipe

Next I downloaded PhotoSwipe-master.zip to ~/Documents/

I am in `~/Documents/Cyber Bunker/Sites/M’S Kitchen``

mkdir content/galleries

The next step says:

The layouts directory in the Hugo root directory contains all the information for how our site will look (we won’t use themes in this example).
First, we create a file called index.html in the layouts directory, which contains the following HTML code

However in my sites root directory there is no layouts folder there is howvever a layouts folder under themes there already exists a index.html file

So what am I doing wrong ?

Here is a zip of my site

https://mega.nz/folder/UXpzSA4Z#h6fDoqPilWpaT8HSde8yNQ

Essentially in ~/Documents/Cyber Bunker/Sites/M'S Kitchen/static/images/gallery/Watermark

I want those images on the gallery.yml page in data / en

Would be grateful for a step by step and I can turn it into a video to help others

[GjjvdBurg]

Hi @brandon789,

The instructions in the wiki do not use a theme, but as you've found there is a similar layouts directory under the themes directory. This is the one you want to use and where you can place the configuration in. I've looked at your code but I can't quite figure out how the gallery page is generated myself, so I can't give you step-by-step instructions. In any case, the rough outline of how to set it up is as follows:

• The index.html file introduced in the wiki is the "gallery overview" page. This is essentially the landing page in the demo. This doesn't have to be called index.html, the only thing that this page does is create links to the galleries. You can take the code that iterates over the galleries and place it somewhere else in the template (in your case, that would be wherever you have a "gallery overview"). If you have only 1 gallery, you can actually skip this entirely.
• You can see that HugoPhotoSwipe generates photo commands in the Markdown of a gallery (see for instance in the cats.md file in the demo). These photo commands correspond to shortcodes, which you will have to add to your theme's layout directory (that's the second file described in this section of the wiki). Same goes for the wrap shortcode.
• Finally, you'll have to add the HTML for a single gallery. This is the code between the <!-- Start copied from GitHub docs HugoPhotoSwipe --> and <!-- End copied from GitHub docs HugoPhotoSwipe --> comments in the gallery configuration setting. Note that when you only have one gallery, you only need this and the shortcodes (in that case you'd just not use the cover images).

I hope this helps to guide you in the right direction. I would also advice you to take a close look at the source code of the demo page here. This may help you understand how the site configuration and file structure works in combination with HugoPhotoSwipe.

Also, if you do end up making a video of the process, please share it here so I can link to it!