Client Galleries in Squarespace

DISCLAIMER: I am not affiliated with Squarespace other than a paying customer. I was not paid to publish this article or gaining any benefit from Squarespace. This is my true and honest opinion of the product.
Please Note: This article is not optimised for mobile viewing. Please consider switching to a desktop browser.
Creating Client Galleries in Squarespace | nickdjeremiah.com
This will be the first instalment of hopefully a couple of articles on Squarespace and how to utilise it for photographers. Hopefully this article is comprehensive and gives you an insight into thinking outside the box with Squarespace.

Squarespace hasn't got a built-in client gallery/proofing feature. However that does not mean that integrating one into your website is impossible. Because it's not. This article will guide you through the steps to fully integrate a third-party client proofing gallery into your website, and make it appear as though it's built right in to your website seamlessly.

I will be showing you how to do this with ShootProof. It's free, is simple to use and has all the features the majority of photographers will need. You can pay for it and gain extra features, but the free version is perfect for most uses.


Click the Image to view my Colour and Logo settings

Stage One:

Once you've set up your free ShootProof account, head to Studio > Colours and Logos. Create a new colour set and call it Website. If your website is predominantly white, set a Light theme, if your website is predominantly black, set a Dark theme. Choose a font set that closely resembles the fonts of your website. Set the Primary colour to whichever colour is the most prominent on your website. And the secondary colour to something simple, like Grey (for example).

We're now going to step into a photo editor program for a minute to create a small image file.

In Photoshop or your preferred creative software, create a blank canvas 300px x 63px - 72ppi - 8/bit. Use the eraser tool to erase the background so you have an empty picture. Save this as a transparent PNG file and upload that file to the Logos section. This allows you to hide the default text that ShootProof uses. Alternatively, you could just upload your logo there, if it looks good on your website.

Click the Image to view my Colour and Logo settings

Once that's done, click Save. Now go to Studio > ShootProof Homepage. Add your Subdomain, and set the Homepage Colour Set to 'Website'. On the right-hand side, make sure everything else remains blank.

Stage Two:

Now let's create our first client. This can either be a real client or a test one. Go to Photos > Gallery and create a new gallery. With the gallery name, I'll use "Client: Tutorial" as an example. My real clients have a 4 digit number assigned to them rather than their name. That way I can keep who my clients are private, as every client gallery will be visible to everyone else on my website, albeit secured by a password known only to the client. Set the Shoot Date and set the Gallery Default Settings to your settings (it should be your name).

Once that has been created, don't add any photos just yet. Head straight into Settings. Headline and Cascade are the options I use in Layout, this keeps everything tidy, clean and without too much visual clutter. Next you can set the client's name (in my case it's clienttutorial) into the Custom Link. Gallery Access set to Public - Password then put in a password next to that. This will be the password your client uses to log in to their gallery. With the other options, I leave them blank. I just keep things nice and simple. I don't allow clients to download, crop, make black and white or purchase prints here. I use this simply as a proofing gallery so my clients can Favourite the images they want so I know which images then to work on.

In Studio Info choose No Link, in Gallery choose your colour set we made earlier and everything else on that page I leave blank or as default.

I have created an image of the entire gallery settings I have used. Click Here to download it.

Stage Three:

Gallery_Header.jpg

Now add your photos. Once they have uploaded click the Manage Photos button. Next to the client name in the top left, you'll see the header image for the gallery. If you click on it you'll be able to set an image for this gallery. I use a simple Padlock image that I've created that you can download for free here to use. Of course, you can make it whatever you want. I use this image as it is generic and keeps the client landing page on my website clean and tidy.

Stage Four:

Head to Studio > ShootProof Homepage > Embed Code. Copy that embed code then head over to your Squarespace website. Create a new page and give it a name (I've named mine Clients). Add a Code Block and paste in the embed code. Part of the code looks like this {width:960,height:650} make sure you change the width:960 to the width of your website. This can be found in Design > Style Editor > Site Width. The width of my site is 1230. So I've changed the width in the code to 1230 as well. Changing this width will ensure your client gallery is centred on your page. Save those changes then visit your website through your web address and take a look at your gallery. Log in to a client and have a play and see what you think. If anything needs tweaking, just make those tweaks in ShootProof and the code in your Squarespace website will update automatically.

THAT'S IT... YOU'RE ALL DONE :)

It's a little bit of setting up, but for the most part it's all just designing the way you want it to look. Obviously, make sure you design it in accordance to the way your website looks. My website is very clean and simple with only four colours. White, Black, Dark Grey and Blue, so it was easy to blend the ShootProof gallery into it without it looking out of place. 

To view my client page visit www.nickdjeremiah.com/clients. I've left the tutorial client gallery for you to log in and have a stickybeak. The password is abc123.

Should you have any questions about this or need help setting it up, please leave a comment below or send me an email here: info@nickdjeremiah.com and I'll be happy to give you a hand.

 

I hope this article has been an interesting and informing read. If you have any questions or comments to make, comment below. Also, if you’d like to receive an email every time I publish a new post, you can subscribe to my mailing list below.


Other Recent Articles