Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
aelder

Display grid gallery title + description upon hover (+ some other questions), Avenue Template

Question

Posted (edited)

I've seen variants of this question asked on this forum, and tried many of the proposed solutions but am still having no luck on the Avenue Template for Squarespace 7.0. I was trying to use some 7.1 templates but it seems like they removed quite a bit of the Title / Description functionality for galleries?  

Here's my particular situation:

I have roughly 130 images (each image is a different character illustration). I would like to upload and display all of these images to a single landing page, using a single, clean Grid Gallery. Each image has a unique Title (the character's name) and a unique Description (a brief character background, just a few lines), which are added to their respective fields of the Image Settings. I would like for users to be able to hover over a character, and be able to read the Title + Description text displayed over a 90% white overlay on the image. It would be ideal if I could have the text formatting dictated by my Header / Paragraph settings. 

I'm looking for Custom CSS to help solve this issue. Any advice? I'm also not beyond alternate solutions or templates, if it seems I'm missing an obvious / easy thing here.

--

Additionally, these 130 images (characters) each fall into a category (Good, Bad, Neutral, etc.) as well as some tags (location, traits, etc.). What would be the best way to allow users to look at the Gallery Grid of 130 images, but quickly filter to just see, for example, the Good character category? Is that a doable task, or would I have to create unique Gallery Grids for each Category and then create new pages / drop-down items for each? 

Any help is massively appreciated. These forums have been so helpful over the years—thanks all. 
 

Edited by aelder

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1

Post a link to your page so we can help.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

See if this gets you started.

I think we can get the hover stuff done pretty easily, but first, look into the tags and categories.

https://support.squarespace.com/hc/en-us/articles/209114107-Organizing-Gallery-Pages


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1
Posted (edited)

If it were me, and I use Avenue, I would create a blank page with a gallery block for each category of images. Those gallery blocks can be a grid, wall, slideshow, stack, or carousel. Avenue gallery pages are always stacked when viewed from an index page and a slideshow when viewed directly so to do what you want pages with gallery blocks will work out better. Once all these pages are made you put them all into an index page which will create thumbnails for all these galleries and in essence make them look like one big page here are two sites where I am doing just that. I have a whole lot of images on both these sites set up in may different ways. The second one has lots for sale  page and lots for rent page, take a look at those. My site has different categories of picutres I have taken and I am using various types of galleries, the last thumbnail under pictures is a wedding displayed as a grid. I have lightbox enabled for all pictures and I could have all kinds of text on hover if I wished. 

my random views derrick Lee parker

Deer Creek Motorcoach Resort Virginia Make Yourself at Home in the Blue Ridge Mountains

Edited by derricksrandomviews

Share this post


Link to post
  • 0

@rwp I'm afraid there isn't a ton to see on my working page—I was just starting it this weekend but most of the time has been spent researching and testing CSS (which has been unfruitful thus far). Right now it's just a grid of a handful of images—the first 3 or 4 have Title and Description copy, but I wanted to make sure I had the right solution before proceeding with the rest. The site is located at:

https://tunny-orange-dbxc.squarespace.com/

password: littlecreeps

 

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...