Creating a searchable Staff Directory

Hello SS community!  I have read some previous posts on creating directories, but I would like some updated input as the posts I read were 2 years old.  I am looking to mimic the searchable directory and the look as seen on this website...https://www.stgeorges.edu/about/directory  

I have about 70 entries with headshots.  Is there an easy way to achieve this without third party integrations?  If not, what would the best application be to do something like this?  

Quote

I am looking to mimic the searchable directory and the look as seen on this website

This searchable directory looks like it might be backed by a real database that provides search and sort features.

SS has no such database backend available for this kind of effect.

Quote

Is there an easy way to achieve this without third party integrations?

No.

If you are into DIY the following may be of interest. Of course you don't have to DIY, you could hire a consultant.

16 hours ago, hollykdesign said:

I am looking to mimic the searchable directory and the look as seen on this website...https://www.stgeorges.edu/about/directory  

I have about 70 entries with headshots.  Is there an easy way to achieve this without third party integrations?

The example you provided was built on Firebase, which you could embed on Squarespace, but it will require your client to know how to use Firebase and to amend the data on that platform instead of Squarespace.

If you want to keep it entirely on the Squarespace platform, a popular way to do this is as follows:

• create a hidden Blog page to hold the data
• create a post for each record, using the thumbnail field for the headshot.
• add tags and categories to each record to organise them
• display the directory on any page of the website using a Summary Block.

If you'd like improved sort and filter options (better than Squarespace offers natively) you can purchase an excellent plugin called Universal Filter to add this functionality.

Let me know if you'd like more help with this.

Did this help? Please give feedback by clicking an icon below  ⬇️

On 7/21/2023 at 11:44 PM, creedon said:

This searchable directory looks like it might be backed by a real database that provides search and sort features.

SS has no such database backend available for this kind of effect.

No.

If you are into DIY the following may be of interest. Of course you don't have to DIY, you could hire a consultant.

 

Thanks @creedon!

On 7/22/2023 at 6:34 AM, paul2009 said:

The example you provided was built on Firebase, which you could embed on Squarespace, but it will require your client to know how to use Firebase and to amend the data on that platform instead of Squarespace.

If you want to keep it entirely on the Squarespace platform, a popular way to do this is as follows:

• create a hidden Blog page to hold the data
• create a post for each record, using the thumbnail field for the headshot.
• add tags and categories to each record to organise them
• display the directory on any page of the website using a Summary Block.

If you'd like improved sort and filter options (better than Squarespace offers natively) you can purchase an excellent plugin called Universal Filter to add this functionality.

Let me know if you'd like more help with this.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks @paul2009!  I think I will try the hidden blog post.  Do you know of any websites that have used the blog feature to create directories that I can look at?  I know I will probably need some help with this, do you give out your email address?  One more question...if I purchase the plug in, can I use it on any of the websites that I design for clients or does it need to be purchased per domain?  Thanks so much!

9 hours ago, hollykdesign said:

if I purchase the plug in, can I use it on any of the websites that I design for clients or does it need to be purchased per domain?

According to the FAQ, you can use Universal Filter on multiple websites.

9 hours ago, hollykdesign said:

Do you know of any websites that have used the blog feature to create directories that I can look at?

There are probably thousands. I believe this is one example: https://www.nbph.org.nz/services/health-services (from this thread).

If you need further help, please post back 🙂.

13 hours ago, paul2009 said:

According to the FAQ, you can use Universal Filter on multiple websites.

There are probably thousands. I believe this is one example: https://www.nbph.org.nz/services/health-services (from this thread).

If you need further help, please post back 🙂.

Thank you @paul2009  I appreciate your help and quick response!

On 7/22/2023 at 6:34 AM, paul2009 said:

If you want to keep it entirely on the Squarespace platform, a popular way to do this is as follows:

• create a hidden Blog page to hold the data
• create a post for each record, using the thumbnail field for the headshot.
• add tags and categories to each record to organise them
• display the directory on any page of the website using a Summary Block.

If you'd like improved sort and filter options (better than Squarespace offers natively) you can purchase an excellent plugin called Universal Filter to add this functionality.

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 Is this way possible in Squarespace 7.0?  I am trying to decide if it will be better for me to use Squarespace 7.0 or 7.1 for the 64 page school website I am getting ready to start.  I am a designer that is new to website building so I am pretty nervous about this large scale project (as you can tell by all of my posts and questions).  I have found in much of my research that many of the features I am looking for, are available in 7.0.  Some of the features I need are: multiple email form submissions, searchable staff directory, secondary navigation menu bar, and sub navigation side bar.  In your opinion, which version do you think I should be working in...keeping in mind that I am still learning how to build websites for clients?

Thank you again for your time and help with all of my questions!

5 minutes ago, hollykdesign said:

Is this way possible in Squarespace 7.0?  I am trying to decide if it will be better for me to use Squarespace 7.0 or 7.1 for the 64 page school website I am getting ready to start. 

Both versions support the solutions described in this thread 🙂

3 minutes ago, paul2009 said:

Both versions support the solutions described in this thread 🙂

Thank you @paul2009!

On 7/22/2023 at 6:34 AM, paul2009 said:

Let me know if you'd like more help with this.

Hi again @paul2009 I would love your help with this!  I have played around for countless hours trying to achieve the staff directory and have come up with nothing!

When testing the blog idea, this is what I found:

• There is no way to rearrange the blog posts, which I would want to do alphabetically (I did some research on the Universal Filter plugin and the Lazy Load summary plugin, but I am still not sure I can achieve what I am trying to do with those plugins).
• I do not want the image to be clicked on and linked back to the blog page, I only need it to be visible, with the contact info and email address accessible.  Maybe I am not doing this right?  I disabled the main blog page and when I tested the summary block and clicked an image, it took me to a "page cannot be found" page.
• I also tried using a search block and limiting the search to the blog page, and when the image was clicked in the search results, it took me to the blog page.
• I also do not like the idea of the tags and a categories being displayed (in the Bedford template, there is not way to hide the tags...maybe I can go without using them?).

While doing my research on the filter plugins and search block, I decided to try the directory as an image gallery collection.  I created a gallery collection page, but didn't like the template styling options.  Then I created a gallery block on a page and did not like the template restrictions on styling there either.  I then tried the summary block for the gallery and it looked great until I clicked the image and it took me back to the main gallery page (which I do not want visible).  So I tried disabling the gallery page and tested it to find the same results as the disabled blog page...it took me to a page not found once the entry was clicked.

So I guess my main question now is, can the summary block content be made to not link back to another area when clicked?  If I do the summary block, I am going to need the Lazy load summary, right?  Because the summary block can only accommodate 30 entries.

This is another website that shows the directory that I would like to achieve.  Can you tell what kind of plugin they may have used?

https://www.perkinsschools.org/staff-directory

I am reaching out to my client to see if they need the search feature (they only have about 70 staff members so I am not sure how crucial a search function would be).  I feel like the basic search block would be enough since it is a small school.

In summary, the key points that I need for the directory are:

• rearrangeable entries so that they can be displayed alphabetically when new entries are added
• headshot, name and contact info visible with a link for their email address
• not necessary to have a pop up once the content is clicked, but I like how it does in the link above.
• search and filter is a plus, but not the priority at this point
• keeping the content on Squarespace is desired, but after all of this research and SS restrictions, I may have to look for a third party plugin...any other suggestions other than Firebase?  I also looked into Community Box have heard negative reviews for that.

Thank you again for all of your help!  I would be lost without the help of the forum and all of its helpful members!  

Quote

There is no way to rearrange the blog posts, which I would want to do alphabetically

Blog posts are arranged date descending. What people do, with what SS provides natively, is assign dates to control the presentation order. You need to leave gaps in the dates so that new employees can be inserted. I recall several posts on this topic but I don't have specific pointers.

Of course this may not be viable depending on your circumstance.

It is a pain to set up but once done is not too bad as long as you don't have a huge number of employees or have to change them frequently.

You may find the following post of use when having to go to past dates, another thing SS blogs aren't good at.

Quote

I do not want the image to be clicked on and linked back to the blog page

Quote

I also do not like the idea of the tags and a categories being displayed (in the Bedford template, there is not way to hide the tags...maybe I can go without using them?).

These issues should be able to be taken care of with a little bit of CSS.

On 8/4/2023 at 5:25 PM, hollykdesign said:

I would love your help with this! I have played around for countless hours trying to achieve the staff directory and have come up with nothing!

When testing the blog idea, this is what I found:

• There is no way to rearrange the blog posts, which I would want to do alphabetically (I did some research on the Universal Filter plugin and the Lazy Load summary plugin, but I am still not sure I can achieve what I am trying to do with those plugins).
• I do not want the image to be clicked on and linked back to the blog page, I only need it to be visible, with the contact info and email address accessible.  Maybe I am not doing this right?  I disabled the main blog page and when I tested the summary block and clicked an image, it took me to a "page cannot be found" page.
• I also tried using a search block and limiting the search to the blog page, and when the image was clicked in the search results, it took me to the blog page.
• I also do not like the idea of the tags and a categories being displayed (in the Bedford template, there is not way to hide the tags...maybe I can go without using them?).

When I get a moment, I'll write a guide about this! In the meantime, in response to your questions:

1. There is no way to rearrange the blog posts, which I would want to do alphabetically.
If you aren't using Universal Filter, the Lazy Summaries plugin can sort them. If you need sorting/searching capabilities and use the Universal Filter, you can use the sorting feature in this plugin instead.

2. I do not want the image to be clicked on and linked back to the blog page.
You can do this with a line or two of CSS to block "pointer events" so users cannot click/tap the titles/images. If you'd like help with this, please provide a link to the page containing the Summary Block that is displaying the blog posts.

3. I also tried using a search block and limiting the search to the blog page, and when the image was clicked in the search results, it took me to the blog page.
In my opinion, the built-in search features cannot be relied upon. Universal Filter has a search feature.

4. I also do not like the idea of the tags and a categories being displayed.
These can also be hidden with a line or two of CSS. 

On 8/4/2023 at 2:43 PM, creedon said:

You may find the following post of use when having to go to past dates, another thing SS blogs aren't good at.

Thank you @creedon!  That was helpful when backdating news blog posts from the previous website!

13 hours ago, paul2009 said:

2. I do not want the image to be clicked on and linked back to the blog page.
You can do this with a line or two of CSS to block "pointer events" so users cannot click/tap the titles/images. If you'd like help with this, please provide a link to the page containing the Summary Block that is displaying the blog posts.

Thank you for the detailed information @paul2009!  So here is what I ended up doing...I created 5 separate not linked gallery pages and put summary blocks on the Staff Directory page, organizing them by department.  (My clients did not need the search functionality of the plugins because they are a small school.)  I put the lightbox on so when the image is clicked, it only opens up in a lightbox on that same page (not directing them back to the hidden gallery pages).  The problem is, when the name is clicked (the title of the image), it opens up a lightbox in the hidden gallery page.  Is there a way to block the pointer events in those specific gallery pages for just the image title?  I still need the email to be linked, which is part of the image description.  I really do not need any of the images to open up in a lightbox or to be clicked on at all...I just need the email in the description to be linked.

These are the url slugs of the galleries I created:

• /administration-gallery
• /advancement-development-gallery
• /staff-administrative-support-gallery
• /faculty-1-30-gallery
• /faculty-31-gallery

This is the link to the site (the Staff Directory is in the About section and the url is /staff-directory😞

https://duck-gopher-pebd.squarespace.com/  (pw: SCCS)

Thank you again for all of your help!

Holly

On 8/8/2023 at 1:47 AM, hollykdesign said:

please provide a link to the page containing the Summary Block that is displaying the blog posts.

Hi @paul2009  This is the url for the summary block.  It is a summary of multiple gallery pages.  If you read my my last reply, you will see what I ended up doing.  Let me know if you can help.  I will be handing the site over on Monday.  I can start a new stream asking for help if you think that will be my best bet. Thank you for your time! 

https://duck-gopher-pebd.squarespace.com/staff-directory  (PW:  SCCS)

Thanks a million @paul2009!  That worked perfectly!  I truly appreciate all of your assistance on this web project!

Hello. 

I am trying to create something similar on my page (although not a staff directory, it is a directory of environmental standards/certifications). 
I tried to follow the same method and use a Summary Block that links to a Gallery. However, it seems like this isn't possible on Version 7.1. 

I'm keen to know how you made this work?
Thanks,

Jonny

1 hour ago, JonnyLevi said:

I tried to follow the same method and use a Summary Block that links to a Gallery. However, it seems like this isn't possible on Version 7.1. 

Gallery Pages don't exist on v7.1 but you can use a Summary Block connected to a Blog Page. Let us know if you have any questions.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks Paul. So I need to create a Blog Page for every entry for the Directory? 

2 hours ago, JonnyLevi said:

So I need to create a Blog Page for every entry for the Directory?

See my earlier post in this thread. 

Thanks for this. It's quite clunky, and seems like it's difficult to arrange the order, but it's probably the only option to keep it within Squarespace. I might try and create an Airtable database and embed that.