Jump to content

Is it possible to utilize categories with an image grid?

Recommended Posts

Hi all, 

First time on Squarespace Forum.  I have a portfolio site at www.bryantcoffey.com/work and I'm hoping to figure out a way to add categories to my image grid.  Something like:

All Work | Corporate | Travel | Documentary | etc.  

Then, I'm hoping that the image grid would shuffle around the relevant grid items for each category.  

I tried creating separate pages for the work and then linking them, but unfortunately it's clunky as it has to reload the entire page each time.  Searching online and in the forums hasn't yielded any results yet for me, but I'll keep searching.  You can see my testing here - www.bryantcoffey.com/all-work2 & www.bryantcoffey.com/corporate-work - hopefully that gives you an idea.  

A follow up question would be - is it possible to center the icons if they are less than 4 without changing the size of the grid?  Could be as simple as playing with spacers I guess potentially if needed.  

Any thoughts on this?  

Thank you, 

B

Link to comment
  • Replies 8
  • Views 353
  • Created
  • Last Reply

It's possible but it requires custom coding and css.

Here one I've previously built, to illustrate the functionality. Is it the sort of thing you're after?

https://www.chothompson.com/

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

The Cho Thompson example makes lists of projects filterable (specific to certain templates). Similar code would work for summary blocks. 

Galleries don't support tags, so it would be slightly more complex to implement - probably by embedding the tag information in the image file name. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

I see.  Might be a little too much for me to implement.  I have it sort of working, I'm not afraid to dive into CSS, but I'm not sure I've gotten into custom coding before.  I've used code injection before, but that's about as deep as I've gotten.  

Link to comment

It's not overly complex. 

The script would:

  • Wait for a click on one of the filter names
  • Clear any previously applied 'hide' class from all items
  • Add a hide class to the items that do not match the filter

The hide class would be as simple as

.hideNotMatching { display: none;}

There would probably need to be some addition css to tidy up the grid. This is because pre-existing css adds extra padding to the to row and the first and last items on any row and, when filtered, these can end up appearing in the wrong place and going higgledy piggledy. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

The code should ideally be in the sitewide injection points. You can use a page's collection id and a galleries id to narrow down to a particular instance of a gallery. 

What you do is add the class name to the item -the class in custom css is then instantly applied to it. From memory you would apply the class to  the image's wrapper rather than the image itself otherwise you'd just have an empty slot rather than a rejigged grid. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.