Followed the instructions, no images show up

[pxlwrshp]

Looks like a great plugin, but I can't get it to work. I followed the instructions, apart from the part where I would add the gallery to the exclude section, because that would only exclude it? Anyway, I got an error message when I did that. The files seem to generate just fine, and when I look in /site I can see that the files are there and should be available. But on the page I tried to insert the gallery, nothing shows up. The source code shows all the code, but there is just nothing there. I cannot trouble shot this. Help?

[clnhlzmn]

Hi @pxlwrshp do you have a link to a project that you can share so I can see how you're trying to use jekyll-pig?

[pxlwrshp]

I'm running it on localhost. Been trying to get it up and running this morning. When I look at the source for the page, it gives the wrong date. It was around 22.30 last night that I built this for the first time, and I realised that I had spaces in the file names for the images. I corrected that (renamed 6 out of 8 images and added one) and re-built this morning, but it doesn't change anything. I'm not sure what is happening here. I have also tried removing all generated files, cleared the cahe, tried different browsers (Konqueror and Firefox), and even renamed the pig.min.js file – which of course got rebuilt, as expected. Below is the relevant source code for the page, from this morning.

<div id="40k-marines_pig"></div>
<script src="/assets/js/pig.min.js"></script>

<script>
var 40k-marines_pig = new Pig(
    [{"datetime":"2021-12-31 22:28:12 +0100","filename":"placeholder_1024x768 copy.png","aspectRatio":1.3333333333333333},{"datetime":"2021-12-31 22:28:12 +0100","filename":"placeholder_1024x768.png","aspectRatio":1.3333333333333333},{"datetime":"2021-12-31 22:28:23 +0100","filename":"placeholder_1024x768.jpg","aspectRatio":1.3333333333333333},{"datetime":"2021-12-31 22:28:23 +0100","filename":"placeholder_1024x768 copy.jpg","aspectRatio":1.3333333333333333}],
    {
        containerId: '40k-marines_pig',
        classPrefix: '40k-marines_pig',
        urlForSize: function(filename, size) {
            return '/assets/img/40k-marines/' + size + '/' + filename;
        },
        onClickHandler: function(filename) {
            window.location.href = '/assets/html/40k-marines/' + filename + '.html';
        }
    }
).enable();
</script>

[clnhlzmn]

I corrected that (renamed 6 out of 8 images and added one) and re-built this morning, but it doesn't change anything.

This plugin looks through the generated _data/<gallery-name>.json file to determine which images to process from the gallery folder. I think if you renamed an image in the gallery it would see that as a new image and add it to the data file in addition to the old one. Maybe there is something wrong with that process. To force it to regenerate everything you can delete that file (_data/<gallery-name>.json). I would try that as a way to troubleshoot this. That file is the reference for what gets added to the page, so even if you generate a set of images, then delete the data file and change some file names and regenerate only the new data file will be included in the page, even if there are existing assets from the first generation.

Can you post the _data/<gallery-name>.json file? It would also be helpful to see the whole source of the site you're trying to make.

Below is the relevant source code for the page, from this morning.

This is the source code for page generated at _includes/<gallery-name>.html correct? It looks like you have duplicate file names in the gallery list. I'm not sure how that could have happened. Again I think deleting the data file and regenerating might help. This page (_includes/<gallery-name>.html) is a standalone gallery html snippet intended to be used in a liquid include tag like {% include <gallery-name>.html %} where you want that gallery to appear, e.g. on your site's "pages" or "posts". Have you done that? For example on my site I have a page called "gallery" and the html for that page is simply:

---
layout: page
title: Gallery
permalink: /gallery
---
{% include gallery.html %}

[clnhlzmn]

I followed the instructions, apart from the part where I would add the gallery to the exclude section, because that would only exclude it?

The reason for "excluding" the gallery folder is because it doesn't need to be included in your site. The gallery folder is only used as the source for the full size gallery image files. After you run jekyll-pig all the necessary resized image files and the generated HTML files are copied to the _assets folder, the gallery data is copied to the _data folder. I believe by default jekyll will include any subfolders in the generated _site directory (or whatever is set in _config.yaml under the destination tag) which means if you have a gallery folder with many large full size image files jekyll will copy that to the _site folder for no reason. Then if you are deploying the _site folder to a web host you might be including a bunch of full size image files that aren't needed.

Thus you tell jekyll to exclude the gallery folder from it's basic site generation technique (copying files) with the exclude config, but that doesn't exclude jekyll-pig from using the images in the gallery folder as source images for the generated gallery.

Hope that makes sense.

[pxlwrshp]

This page (_includes/.html) is a standalone gallery html snippet intended to be used in a liquid include tag like {% include .html %} where you want that gallery to appear, e.g. on your site's "pages" or "posts". Have you done that?

Precisely that, yes. And I understand now why I would want to exclude the galleries. I will try making a new local site and re-install there. I'll also try to avoid spaces in file names, which was probably my first mistake. I'll let you know how it goes, so you can close this in peace if it does.

EDIT: I added the exclude (saw that II had some weird things going on in my config.yaml too so I fixed it) and regenerated a new gallery. It works just fine. Exactly what I needed. Just gotta modify some things to better fit my site, and off I go! Thanks so much for this!

[clnhlzmn]

Awesome! I'm glad it works for you. Let me know if you need anything else.