Take Over the Gallery Title with Basic HTML

Do you know basic HTML?

If so, you hold more power in customizing Squarespace than you may have previously thought. 

One thing that most people do not know about Squarespace is that you are able to write HTML directly into the title areas of images. More importantly, you are able to do this to gallery blocks as well as galleries that can be selected as a part of an index section. Why is the gallery so important to this ability? It's because the gallery comes with loads of options that standard image blocks do not have by default. Making the gallery a very useful tool for UI/UX purposes.  

Wondering how this is done?  Well, it's probably easier than you thought.  

For our example we are going to use a gallery page within an index. See below and let's walk through the steps together.

Example of a gallery being used inside of an index

Example of a gallery being used inside of an index

Step 1

To begin, open the settings for one of the photos within your gallery. Next, click in the 'Image Title' area and begin your HTML there. For this example we've started with an <h4> because the <h4> has not been styled yet within our site stylesheets so it make sense for us in this context. You can use whatever works best for you.

<h4>Just Two Hipsters Walking</h4>

Step 2

Next, for our example we wanted to create a subtitle for the image as well as the title. So, inside of our <h4> tag we have added a <br> to push the text down to the next line and a <span> tag that will facilitate the subtitle text.

<h4>Just Two Hipsters Walking<br><span>December 2016 in LA</span></h4>

Step 3

Now that our framework is built out it's time to begin styling. This is all done with standard inline styling techniques. In this step we are giving the <h4> it's style. Note: That since our <span> is wrapped by the <h4> there are certain things that the <span> will inherit unless told other wise. In this case we are use "background: #fff;" to give the <h4> and all of it's elements a white background.

<h4 style="background: #fff; color: #000; font-size: 18px; padding: 10px 20px;">Just Two Hipsters Walking<br><span>December 2016 in LA</span></h4> 

Step 4

Our <h4> has been styled and our <span> has a background behind it to give it contrast as well. Now, it's time to style our <span> to give it a style more suitable for a subtitle.  Note: If you do not style the <span> it will inherit the styles of the <h4> in this case.

<h4 style="background: #fff; color: #000; font-size: 18px; padding: 10px 20px;">Just Two Hipsters Walking<br><span style="font-size: 11px; color: 777;">December 2016 in LA</span></h4> 

Step 5

You have arrived at the end of the tutorial.  Yep, that's right.  It's that easy to tweak the title within galleries.  Once you've written your HTML and inline styles hit 'Save' at the bottom of your image and check your work.  Have fun with this because this really is a unique portion of customizing Squarespace that is not widely known by most designers, developers and "do-it-yourselfers".  


For more Squarespace plugins, tips, tricks and hacks stayed tuned to The Custom Square and sign up for our newsletter at the bottom of the page.