Search code examples
squarespacerevolution-slider

Using Revolution Slider with Squarespace


I'm having trouble determining for certain whether the jQuery version of Revolution Slider could be made to work with a Squarespace site. The documentation mentions that you need to upload several folders (assets, css, fonts, js) containing files to the web server, which you can't really do with Squarespace (you can just upload individual JavaScript files or other asset files). But maybe having a folder structure isn't necessary. Is it possible to use Revolution Slider with Squarespace?


Solution

  • Based on the following text from the documentation:

    Please upload the <strong>revolution</strong> folder to your server. In this folder you will find the following subfolders containing all of the items content:
    
        assets
        css
        fonts
        js
    
    If your Slider Revolution is placed in a different folder, don’t forget to change the file paths in the upcoming examples!
    

    It seems that you could use this in Squarespace by enabling Developer Mode/Platform. You would add a folder called, say, "revolution" into the "assets" folder in Squarespace. That "/assets/revolution" folder would contain all of the files referenced in the docs (assets, css, fonts, js). You'd then change the file path as instructed in the docs.

    I happen to use Dev. Mode exclusively, so while I'm very familiar with it, I have not used the slider you mention. However, I see nothing in the docs that leads me to believe it would not work. I have included other plugins in a similar fashion using Dev. Mode/Platform.

    This would require you to learn and use the Developer Platform, which you'll want to consider because it will raise the overhead of using this slider (you'll not only be learning to use the slider, but first learning Squarespace Developer Platform, how/where to add the scripts and files, Git/SFTP, etc.)

    You can of course start with a Squarespace Template, the enable Dev. Mode from there, then edit the files only minimally to achieve your use of the slider (add the files to /assets, add the script, done).

    From the docs, you'd add the following (with edited file paths) "between the <head></head> tags".

    - RS5.0 Main Stylesheet -->
    <link rel="stylesheet" type="text/css" href="/assets/revolution/css/settings.css">
    
    <!-- RS5.0 Layers and Navigation Styles -->
    <link rel="stylesheet" type="text/css" href="/assets/revolution/css/layers.css">
    <link rel="stylesheet" type="text/css" href="/assets/revolution/css/navigation.css">    
    
    <!-- RS5.0 Core JS Files -->
    <script type="text/javascript" src="/assets/revolution/js/jquery.themepunch.tools.min.js?rev=5.0"></script>
    <script type="text/javascript" src="/assets/revolution/js/jquery.themepunch.revolution.min.js?rev=5.0"></script>
    

    From there, it'd be a matter of adding the "slider markup" and initialization script either in a code block in Squarespace LayoutEngine, or 'hard-coded' within the template files themselves (this latter choice would require navigating/editing the template files more than using a code block). I'd recommend trying to use the code block first.