# Github Pages Collections output 404

**URL:** https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055
**Category:** Help
**Created:** [February 21, 2022, 7:23pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055 "2022-02-21T19:23:32Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 7:23pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/1 "2022-02-21T19:23:32Z")

</div>

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](https://jeffpatton1971.github.io/kansaspattons/blog/2009/10/18/pumpkin-patch.html)

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](https://jeffpatton1971.github.io/gallery-2009-10-18/img58363.html)

Thanks!

---

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 7:24pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/2 "2022-02-21T19:24:35Z")

</div>

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:

> **[Introduction to collections](https://learn.cloudcannon.com/jekyll/introduction-to-jekyll-collections/)**
>
> Learn how to use collections to manage and organize related content

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

repo: [GitHub - jeffpatton1971/kansaspattons](https://github.com/jeffpatton1971/kansaspattons)

---

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 7:34pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/3 "2022-02-21T19:34:34Z")

</div>

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:

> <https://github.com/jeffpatton1971/kansaspattons/blob/main/_gallery-2009-10-18/img58363.md>

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.

---

<div class="post-metadata">

### Author: ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [February 21, 2022, 9:41pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/4 "2022-02-21T21:41:14Z")

</div>

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](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.

---

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 10:03pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/5 "2022-02-21T22:03:34Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 10:20pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/6 "2022-02-21T22:20:35Z")

</div>

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.

```auto
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](https://jeffpatton1971.github.io/kansaspattons/gallery-2009-10-18/img58363.html)

---

<div class="post-metadata">

### Author: ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [February 21, 2022, 10:23pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/7 "2022-02-21T22:23:27Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [February 21, 2022, 10:24pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/8 "2022-02-21T22:24:35Z")

</div>

I don’t think you need the permalink.

---

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 10:39pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/9 "2022-02-21T22:39:00Z")

</div>

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.

```auto
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

```

---

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 10:43pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/10 "2022-02-21T22:43:34Z")

</div>

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.

```auto
{% 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.

---

<div class="post-metadata">

### Author: ![jeffpatton1971](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jeffpatton1971/32/4383_2.png) [@jeffpatton1971](https://talk.jekyllrb.com/u/jeffpatton1971)
#### Post date: [February 21, 2022, 11:13pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/11 "2022-02-21T23:13:30Z")

</div>

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

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

```

From the [docs](https://jekyllrb.com/docs/liquid/filters/)

> **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.

---

<div class="post-metadata">

### Author: ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)
#### Post date: [February 21, 2022, 11:28pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/12 "2022-02-21T23:28:51Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![TechTuneUpHub](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/techtuneuphub/32/5924_2.png) [@TechTuneUpHub](https://talk.jekyllrb.com/u/TechTuneUpHub)
#### Post date: [May 15, 2024, 2:45pm UTC](https://talk.jekyllrb.com/t/github-pages-collections-output-404/7055/13 "2024-05-15T14:45:03Z")

</div>

I had this problem for hours but solved it by changing the extension to .html in my URL (first).
