Jump to content

Gallery Block Custom Thumbnails

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: http://www.differentkennedy.com

While I'm aware of squarespace's inherent gallery block customization features, I'm not seeing an option to customize the thumbnail display of items in a gallery block. My goal would be to have a gallery block of thumbnails [bottom right in the attached image -- trying to set up a template I can copy for "sub galleries" within an index gallery] but have them display as numbers but still click through to that respective image and a lightbox display of the gallery. 

My initial thought was to have this as two seperate images, one the "thumbnail" of the number, and one the intended image; however, I'm not seeing an option for dictating the thumbnail, or even a custom thumb display if I were to include the number within the lightbox image. 

Looking for solutions that could achieve this effect, whether it be through CSS, different blocking etc. if this is possible. Any help would be much appreciated! 

Screen Shot 2020-06-16 at 7.32.57 AM.png

Link to comment

differentkennedy

I wonder if this is what you are after: 

image.thumb.png.c034293d60f4bf3f2f3ed658d907c841.png

Edited by bangank36
change

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@bangank36  This looks to be what I'm hopping to achieve - can you explain a bit the solution so I can duplicate on all items? Are you just overlaying a designated title or are you inserting an image that is then clicking through to the lightbox? Or is it possible to drop in your css for me to copy paste and I can work backwards from there? Thanks so much! 

Link to comment
12 minutes ago, differentkennedy said:

@bangank36  This looks to be what I'm hopping to achieve - can you explain a bit the solution so I can duplicate on all items? Are you just overlaying a designated title or are you inserting an image that is then clicking through to the lightbox? Or is it possible to drop in your css for me to copy paste and I can work backwards from there? Thanks so much! 

sure let me send you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Here we go, paste this Design->Custom CSS

#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid {
  /* Set "design-grid-counter" to 0 */
  counter-reset: design-grid-counter;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::after {
  background: #9E9E9E;
  z-index: 998;
  content: " ";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::before {
  /* Increase "design-grid-counter" by 1 */
  counter-increment: design-grid-counter;
  content: "0" counter(design-grid-counter);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   
  background: #9E9E9E;
  z-index: 999;
  color: #fff;
  font-size: 3em;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::before,
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::after {
  opacity: 0;
  cursor: pointer;
  z-index: -999;
}

image.thumb.png.f512928c04fbeccfffd53487890d37c1.png

Edited by bangank36
change

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options?  Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? 

Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! 

Edited by differentkennedy
Link to comment
3 hours ago, differentkennedy said:

@bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options?  Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? 

Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! 

Noticed the issue, will update

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, differentkennedy said:

@bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options?  Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? 

Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! 

I just update the accepted answer content, pls have a look

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
6 minutes ago, differentkennedy said:

@bangank36  Still no lightbox unfortunately. 

#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid {
  /* Set "design-grid-counter" to 0 */
  counter-reset: design-grid-counter;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::after {
  background: #9E9E9E;
  z-index: 998;
  content: " ";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::before {
  /* Increase "design-grid-counter" by 1 */
  counter-increment: design-grid-counter;
  content: "0" counter(design-grid-counter);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   
  background: #9E9E9E;
  z-index: 999;
  color: #fff;
  font-size: 3em;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::before,
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::after {
  opacity: 0;
  cursor: pointer;
  z-index: -999;
}

My bad, pls take this http://recordit.co/Ywd7XDS9EX

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.