Squarespace 6 localisation — 04 Apr 2013

I don't know about you, but I am hearing a lot about Squarespace these days, either at conferences or as a podcast sponsor, and I decided to evaluate v6 from an internationalisation angle.

Squarespace shines as a CMS. Really. Its approach to designing layouts and organising pages is amazing. The templates you have to choose from are very well designed, and you can customise most of it from the client interface. I won't go into the details her, but you can find numerous reviews elsewhere.

It felt as the perfect solution for those small budget websites projects. Build on an existing template with the client to meet their needs and expectations. Sounded great.. until you get to the localisation issues.

I didn't expect Squarespace to offer an localised version of their admin interface, but I did expect them to take into account the website's localisation settings set in «Time / Geographyí¢â‚¬Â.

As from I can see, this is only used in the lang parameter of the html element. I would expect them to use it to format the blog's dates and times and to initialise the YUI 3 Library Y.config.lang variable. But sadly, no.

Typically, the Calendar widget (template block) couldn't be used on a French site:

So, I tried to figure out what could be done via CSS and JavaScript. There are a number of similar request in Squarespace's forum for translation of the basic wording and date formating used in the blog, but very few answers.

Code injection

The following snippets work on the Template «Fiveí¢â‚¬Â and have not been tested on the others. Your mileage may vary depending on their markupí¢â‚¬Â¦

I first tried to set the correct localisation (French) for JavaScript widgets such as the Calendar by injecting code into the main page header (situated in Settings > Code Injection):

<script>
Y.use("lang/datatype-date-format_fr-FR",
function(Y) {
Y.Intl.setLang("datatype-date-format", "fr-FR");
}
);
</script>

Unfortunately, this only translates the month name, not the short weekdays which remain in English, so I added a line of CSS to hide them:

/*
Hide YUI3 Calendar weekdays
*/
table.yui3-calendar-grid thead {
display:none;
}

The Calendar widget looked acceptable now for a French public:

This approach didn't have any effect on the blog entry dates. I wrote a small JavaScript snippet injected into the page footer to basically translate the month name and change the format from <month day, year> to <day month year>.

<script>
/* List of months in French */
var month = new Array(12);
month[0] = "janvier";
month[1] = "février";
month[2] = "mars";
month[3] = "avril";
month[4] = "mai";
month[5] = "juin";
month[6] = "juillet";
month[7] = "ao탻t";
month[8] = "septembre";
month[9] = "octobre";
month[10]= "novembre";
month[11]= "décembre";
Y.use('node', 'node-load', function(Y) {
Y.on('domready', function() {
/* (1) Reformat blog entries published dates */
Y.all('time.published').each(
function() {
var pdate = new Date(this.getAttribute('datetime'));
this.setHTML(pdate.getDate() + " "
+ month[pdate.getMonth()] + " "
+ pdate.getFullYear());
}
);
});
});
</script>

This hack worked nicely for plain dates, but not for blog listings where Squarespace uses «time sinceí¢â‚¬Â dates like «3 months agoí¢â‚¬Â, so I substituted that string with the blog entry's date with the following snippet:

/* (2) Replace time since strings with published dates */
Y.all('time.timestamp').each(
function() {
var tdate = new Date(this.getAttribute('datetime'));
this.setHTML(tdate.getDate() + " "
+ month[tdate.getMonth()] + " "
+ tdate.getFullYear());
}
);

String substitution

Similarly, you can replace specific words/sentences by their French counterpart via JavaScript code injection in the footer:

• Share -> Partagez
• Read more -> Continuer à  lire

Y.all('.ss-social-button').setHTML('Partagez');
Y.all('.inline-read-more').setHTML('Continuer à  lire');

A blog entry will then look like this:



The CSS still needs to be tweaked, but we are getting closer to what I expected.

Developer Platform

Version 6 offers a Developer Platform which enables you to create your own Squarespace template from scratch. Morevoer, it is completely free until you are ready to publish so get started! Kudos for that. Unfortunately, you can't edit the template blocks (yet, says the documentation), so the same hacks apply.

Keep in mind we are hacking your way to a solution, this code will have to be removed once Squarespace formats dates according to the user's settings.