Connecting Grids or Galleries to Collections

I’m specifically using Banner Grid right now, but often run across this need when working with grids or image galleries.

It would be useful if grids and galleries could be upgraded so that they can pull from a collection, and then fields within that collection. This would let image galleries auto-update as new records are added to a collection (of course, one would need to specify the image field to use within) and column layouts or grids that are made could be set to serve as collection listings (think for custom blog, article, etc. layouts).

The reason this is desirable–and a simple collection listing won’t suffice–is that to produce a non-repetitive design (such as banner grid), it would have to be coded. If collections could be set as data bindings into regular columns, grids, and galleries, the functionality and scalability of Sitejet collections would increase exponentially.

Another approach could be to rework the collection listing element so that galleries, columns, and grids can be place inside of it to work.

Hey Chase,

At first this sounds very interesting. But do you maybe have more examples for this?

I might also have a workaround which is not ideal but could work.

The specific example is below, where the Design Grid (oddly housed in the “Header” elements) could be made to be a collection listing. To my knowledge, collection listings don’t integrate with columns and grids/flexbox in any way (except within each repeating collection item,). Therefore, an asymmetrical design such as Design Grid isn’t posslble to use and have it automatically list the newest entries (reverse chronology) to a collection (articles, blogs, etc.).

Notice how below, I’ve listed each of the areas within the Design Grid to specify where the newest posts should go. Likewise, someone may want to have their collection items appear alphabetically,

Here’s a video walkthrough of what I mean using the Blogger template on Sitejet.
https://www.loom.com/share/b3cce16579574c99adbb162f88f68e0d?sid=43390a1f-66e6-406a-92f4-a725bd22956d

I’d love to hear about some of your workarounds. I’ve attempted some based on manually placing collection lists in each column and setting the number of displayed items to 1. However, I can’t seem to successfully tell the list to pull the “second” or “next” item based on the available filters unless I create a new collection field and use it to uniquely number each post/article in the collection… and that defeats the purpose. I’d like the grid to simply use the same display rules as the regular collection list (name ascending/descenting, slug ascending/descending, publish date ascending/descending, etc.).

Hey Chase,

I see! Now I understand and know where you try to go with this. Unfortunately, this is not yet realizable in an easy way… but we will take this up as a feature request and discuss this in the next product meeting. I really like that idea.

1 Like

Thanks Andre.

The simplest solution I can think of from a development perspective is to have a “start at n-th record” setting in the CMS for collection lists.

That way, the second column could be set to list only one item in the 2nd position, the third could pull only one item in the 3rd position, and so on.

That’s inherent in the SQL (or other) queries used to retreive the collection data, I’d imagine, so it’d just need to be walled off for security purposes and elevated to the UI. But my understanding of the CMS backend is limited.

Keep me posted.

1 Like

I’ve done what you’re after but for galleries on a single post page, what I did was made a multiple files field on collection data fields, then chucked a image gallery pulling all the data from that specific post, it’ll update on whatever images are in that gallery for that specific post.

have a look: MG EXIA BLUE TRANS-AM - Showcase: Masterpiece - Kenzbuilds: All About Gundam Modelling 2.0 (sitehub.io)

for what you wanted to achieve: maybe create them as containers then pull the thumbnails from the posts as backgrounds then hyperlink each post to “collection-item”

1 Like