How can I add line breaks to Gallery Grid titles?

In early September 2018, Squarespace removed the option to add HTML markup to item titles in all collections, including Gallery, Blog and Product collections. It was something that they never directly supported but that they ‘allowed’. When they changed the text editor, they took a decision to improve the security model by following best practice and no longer render the code. They just pass it through as text.

What does this mean?

Put simply, it means that if you now add “Name<br>Title” to display someone’s name and title on two lines (with a line break in between), it won’t work. Any titles you added before the change in September will continue to work, but if you edit them, the HTML is stripped out when you save it.

What can we do?

I’ve produced a workaround, but it requires some JavaScript. This means that it will only work on Business Plans or above (Personal Plans do not allow JavaScript as a way of upselling you the more expensive option). My workaround for Galleries is to add the title with a ‘#’ character instead of the line break. The code will remove the # character, and replace it with a line break.

Add the following code to the site’s (not page) code injection:

<!--- Wrap gallery titles on two lines (www.soundfocus.co.uk) ---><script>
window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.image-slide-title');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/#/g, '<br>');
  }
});  
</script>

This works well for Galleries, but it wouldn’t work so well for Products because although a ‘#’ character would be removed from the title on the Product List or Product Detail pages, it would not be possible to remove the symbol from the checkout description or order confirmation emails. I’ve written a slightly different solution for Products, using a space, hyphen (-), space. This allows you to wrap something in titles whilst still looking normal in the checkout. I included the spaces so that product model numbers would not wrap, for example you wouldn’t want PXW-X70 to wrap.

<!--- Wrap product titles on two lines (www.soundfocus.co.uk) --->
<script>
window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.ProductList-title, .ProductItem-details-title');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/ - /g, '<br>');
  }
}); 
</script>