Github Pages Collections output 404

Help
#1

I’m using collections to provide a simple photo gallery, each collection represents the gallery of images for a given post.

blog post with photos: Pumpkin Patch | kansaspattons.org

Based on what I’ve read in the docs when I click the thumbnail i should be directed to the specific image page (first image on the blog post above)

for example: https://jeffpatton1971.github.io/gallery-2009-10-18/img58363.html

Thanks!

#2

As a new user I can only post two links, so here is some more info

This is returned as a 404. I have attempted to use a simple layout as described in this article:

But nothing really seems to work, I’m open to any suggestions. Code can be found in the repo below

repo: GitHub - jeffpatton1971/kansaspattons

#3

I may be misunderstanding how collections work, I’d like the individual page to show the full image maybe with some additional content or something you might get the idea looking at this page:

The more I read the more it sounds like I could create a single page that loops over the entire gallery, which I’m not sure is what I’m after.

#4

your link to the main image is incorrect - it needs to include the baseurl/repo name in it.

So this works:
https://jeffpatton1971.github.io/kansaspattons/gallery-2009-10-18/img58363.html

as it has kansaspattons as part of the path where as you don’t currently have that on the live site.

The way you are doing it seems a little complex, though if you want supporting info for each image it might not be a bad way to do it. You could also add most of that info into the posts’ front matter or maybe a data file and then use JS to make the image pop up into a modal with the supporting text below. There are likely lots of gallery examples doing this - and there may be some sort of jekyll plugin or maybe just a blog post for how other people have done something similar.

Jekyll supports some things for static files - like you can filter static files by path I believe - then you could put all related mages into a sub folder in assets or something, and then you could filter all static files to find just the ones in that folder and then loop over them to make a gallery. That would eliminate the need to make a collection item for each image which seems tedious. But you would loose the ability to make a caption.

#5

So I’ve updated the config file with base_url and url, as those were omitted, but that change had no impact. So while I think it was important to have those properly set, collection pages are being generated at build, should I set a permalink on the collection to include the base_url path?

#6

So I made the following change to the config file, and while the 404 renders with themeing I’m still not getting content. I am not sure I’ve made the appropriate fix here.

collections:
  gallery-2009-10-18:
    sort_by: index
    output: true
    permalink: /kansaspattons/:collection/:name.html
  gallery-2009-10-28:
    sort_by: index

I am getting a url with the correct pathing though:

https://jeffpatton1971.github.io/kansaspattons/gallery-2009-10-18/img58363.html

#7

you need to have output: true which you have on one but not the other. The original link I posted worked when I did it, if you changed the collections info in the config file I don’t think you needed to.

#8

I don’t think you need the permalink.

#9

On gallery-2009-10-18 output: true was always set, on the other gallery it was never set. I’ll remove the permalink. I did update the config with the url and baseurl which was unset before.

baseurl: "/kansaspattons" # the subpath of your site, e.g. /blog
url: "https://jeffpatton1971.github.io" # the base hostname & protocol for your site, e.g. http://example.com
#10

Ok, so I’m confused as it’s working with the permalink removed, but I have to insert the kansaspattons in there, manually. As the url is generated I’m unsure what to do to resolve this. Here is the loop in the post.

{% for image in site.gallery-2009-10-18 %}
  [![{{ image.title}}]({{ image.thumb_url }})]({{ image.url }})
{% endfor %}

I would have thought that setting the permalink to the proper things it would work, the link you originally posted and the one i recently posted are the exact same. But when permalink is set it fails.

#11

Ok, so I wound up changing up my loop code in the post

{% for image in site.gallery-2009-10-28 %}
  [![{{ image.title}}]({{ image.thumb_url }})]({{ image.url | relative_url }})
{% endfor %}

From the docs

Relative URL

Prepend baseurl config value to the input to convert a URL path into a relative URL. This is recommended for a site that is hosted on a subpath of a domain.

I wonder if I’ll need to remove this once I finish migrating everything over and update the site to use my registered domain.

#12

when you move it to your own domain you should be able to just change the baseurl to be nothing/empty and it should be ok. If you do all the links properly and set the baseurl it should work either way.

1 Like