Linking Files Correctly [V5]
I spend quite a bit of time on the Squarespace Developer Forums (which is somewhere I highly recommend if you need help) and the most common problem I see when people are adding new custom scripts or features is incorrect references to external files!
Many of you will be familiar with going into File Storage to upload new files and if you are used to using the WYSIWYG (what you see is what you get) editor to insert/link files, you won’t have needed to know how to reference files in manually. Any files you upload into File Storage can be linked to by adding “/storage/” and then the pathname to the file you see in File Storage.
For example, if you see a folder called “photos” with the file “image1.jpg” inside, to link to it you would use “/storage/photos/image1.jpg”.
A simpler (and foolproof) way to find this path is to navigate to the file in File Storage and click “URL” next to the file, a blue box with the URL will appear which you can copy and paste to wherever you need. However the url will be the full url (e.g. “http://www.squaresites.net/storage/photos/image1.jpg”). If you are using this resource on the same site, I recommend you do not use the “http://www.yourdomain.com/” part of it (copy the bold part). This will possibly prevent any errors you run into in the future if you are using javascript and migrating from your squarespace.com domain to yourdomain.com.
Note: One error I have seen is to omit the forward slash before storage, this can cause confusion because it will work on your home page, but not any other page. This is because if you omit the slash, the link becomes relative from the current url (e.g. yourdomain.com/gallery/) not the base url (e.g. yourdomain.com).
External Stylesheets:
If you are adding javascript slideshows/edge etc. which link to external CSS files, you will likely run into the situation where said files links to other files. Given that these files were likely packaged as part of some bundle, you won’t have gone though them line by line and noticed this. What will happen is you will end up with broken links (see below) which are coming from nowhere.
To solve this you need to edit the CSS file and fix the link. An example is a file linking to multiple background images in the format of “/images/bg.png”. This obviously won’t work on Squarespace as www.yourdomain.com/images/ doesn’t exist (as a file storage directory). My approach is to open up the file in a text editor and find/replace, “/images” with “/storage/images” (assuming that is correct for however you uploaded them!). Re-upload the file and all should be well. (Beware of uploading files of the same name again, as Squarespace or your browser might cache them and take a while to update).
How to tell if you have broken links:
Get your browser to check! Bring up the developer/error console in your browser (they differ from browser to browser) and look at what it says. I use chrome for development and the picture below is what you would see if you have a broken link:
How to open the developer console:
Chrome (Mac): Alt+Cmd+J
FF (Mac): Cmd+Shift+J
Chrome/FF (Windows): Ctrl+Shift+J
(I can’t really recommend doing primary web development in any other browsers as of 2012)