sssupers ist ein Squarespace Spezialist Webdesign Studio mit Website Boutique, das vom Fotografen und Designer Rasmus Schübel geführt wird. "Ich helfe meinen Kunden, ihre Website als sicheren Hafen der Selbstdarstellung im Internet zu erleben und verkaufe in meiner Boutique schlüsselfertige, maßgeschneiderte Websites an qualitätsbewußte Kunden mit Stil."

 

CoverPage Creator by Jason Barone

 
JB says: "Here's a version of the Cover Page creator to try out and see how it works. There's basically only 3 steps" …
 

* 1. *

 

Add these 2 files to your File Storage. One is the JavaScript script. One is a very tiny bit of CSS. It probably doesn't even need to be in a file, but for this test version it's probably easiest.


* 2.*

Add the following block of code to the Cover Page's Code Injection:

<!-- The line below adds your default Squarespace CSS to Squarespace-->
<link href="site.css" rel="stylesheet">

<!-- The line below includes a few lines of CSS for the Cover Creator -->
<link href="/s/layout.css" rel="stylesheet">

<!-- The line below is the Cover Creator trigger which turns on the feature -->
<div class="js-layout" data-url="your-page-url-here"></div>

<!-- The line below is the the Cover Creator JavaScript -->
<script src="/s/layout.js"></script>

* 3.*

Create a "Not Linked" page in your website to serve as the content source. Your page's URL is the URL that appears in step 2 where it says

data-url="cover-layout"
 

Here's the JavaScript/JSON snippet: layout.js

 
!function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e){!function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e["default"]=t,e}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),a=n(1),u=o(a),c=n(32),f=o(c),l=n(34),h=r(l);n(35);var p=function(){function t(){i(this,t),this.core=u,this.sqs=f,this.layout=h["default"],this.initModules()}return s(t,[{key:"initModules",value:function(){this.layout.init(this)}}]),t}();window.onload=function(){window.app=new p},e["default"]=window.app},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e.util=e.dom=e.api=void 0;var o=n(2),i=r(o),s=n(10),a=r(s),u=n(9),c=r(u);e.api=i["default"],e.dom=a["default"],e.util=c["default"]},function(t,e,n){(function(t){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=n(9),i=r(o),s={fetch:function(t){function e(e,n){return t.apply(this,arguments)}return e.toString=function(){return t.toString()},e}(function(e,n){var r=i["default"].extendObject({nocache:!0},n),o=Object.keys(r).map(function(t){return encodeURIComponent(t)+"="+encodeURIComponent(r[t])}).join("&").replace(/%20/g,"+");return t(e+"?"+o,{credentials:"same-origin"}).then(function(t){return console.log("sync: Fetch to "+e+" successful."),t})["catch"](function(t){console.log("sync: Fetch to "+e+" failed. "+t)})})};e["default"]=s}).call(e,n(3))},function(t,e,n){(function(e,n){(function(){!function(t){"use strict";function n(t){if("string"!=typeof t&&(t=String(t)),/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(t))throw new TypeError("Invalid character in header field name");return t.toLowerCase()}function r(t){return"string"!=typeof t&&(t=String(t)),t}function o(t){var e={next:function(){var e=t.shift();return{done:void 0===e,value:e}}};return v.iterable&&(e[Symbol.iterator]=function(){return e}),e}function i(t){this.map={},t instanceof i?t.forEach(function(t,e){this.append(e,t)},this):t&&Object.getOwnPropertyNames(t).forEach(function(e){this.append(e,t[e])},this)}function s(t){return t.bodyUsed?e.reject(new TypeError("Already read")):void(t.bodyUsed=!0)}function a(t){return new e(function(e,n){t.onload=function(){e(t.result)},t.onerror=function(){n(t.error)}})}function u(t){var e=new FileReader;return e.readAsArrayBuffer(t),a(e)}function c(t){var e=new FileReader;return e.readAsText(t),a(e)}function f(){return this.bodyUsed=!1,this._initBody=function(t){if(this._bodyInit=t,"string"==typeof t)this._bodyText=t;else if(v.blob&&Blob.prototype.isPrototypeOf(t))this._bodyBlob=t;else if(v.formData&&FormData.prototype.isPrototypeOf(t))this._bodyFormData=t;else if(v.searchParams&&URLSearchParams.prototype.isPrototypeOf(t))this._bodyText=t.toString();else if(t){if(!v.arrayBuffer||!ArrayBuffer.prototype.isPrototypeOf(t))throw new Error("unsupported BodyInit type")}else this._bodyText="";this.headers.get("content-type")||("string"==typeof t?this.headers.set("content-type","text/plain;charset=UTF-8"):this._bodyBlob&&this._bodyBlob.type?this.headers.set("content-type",this._bodyBlob.type):v.searchParams&&URLSearchParams.prototype.isPrototypeOf(t)&&this.headers.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"))},v.blob?(this.blob=function(){var t=s(this);if(t)return t;if(this._bodyBlob)return e.resolve(this._bodyBlob);if(this._bodyFormData)throw new Error("could not read FormData body as blob");return e.resolve(new Blob([this._bodyText]))},this.arrayBuffer=function(){return this.blob().then(u)},this.text=function(){var t=s(this);if(t)return t;if(this._bodyBlob)return c(this._bodyBlob);if(this._bodyFormData)throw new Error("could not read FormData body as text");return e.resolve(this._bodyText)}):this.text=function(){var t=s(this);return t?t:e.resolve(this._bodyText)},v.formData&&(this.formData=function(){return this.text().then(p)}),this.json=function(){return this.text().then(JSON.parse)},this}function l(t){var e=t.toUpperCase();return m.indexOf(e)>-1?e:t}function h(t,e){e=e||{};var n=e.body;if(h.prototype.isPrototypeOf(t)){if(t.bodyUsed)throw new TypeError("Already read");this.url=t.url,this.credentials=t.credentials,e.headers||(this.headers=new i(t.headers)),this.method=t.method,this.mode=t.mode,n||(n=t._bodyInit,t.bodyUsed=!0)}else this.url=t;if(this.credentials=e.credentials||this.credentials||"omit",!e.headers&&this.headers||(this.headers=new i(e.headers)),this.method=l(e.method||this.method||"GET"),this.mode=e.mode||this.mode||null,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&n)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(n)}function p(t){var e=new FormData;return t.trim().split("&").forEach(function(t){if(t){var n=t.split("="),r=n.shift().replace(/\+/g," "),o=n.join("=").replace(/\+/g," ");e.append(decodeURIComponent(r),decodeURIComponent(o))}}),e}function d(t){var e=new i,n=(t.getAllResponseHeaders()||"").trim().split("\n");return n.forEach(function(t){var n=t.trim().split(":"),r=n.shift().trim(),o=n.join(":").trim();e.append(r,o)}),e}function y(t,e){e||(e={}),this.type="default",this.status=e.status,this.ok=this.status>=200&&this.status<300,this.statusText=e.statusText,this.headers=e.headers instanceof i?e.headers:new i(e.headers),this.url=e.url||"",this._initBody(t)}if(!t.fetch){var v={searchParams:"URLSearchParams"in t,iterable:"Symbol"in t&&"iterator"in Symbol,blob:"FileReader"in t&&"Blob"in t&&function(){try{return new Blob,!0}catch(t){return!1}}(),formData:"FormData"in t,arrayBuffer:"ArrayBuffer"in t};i.prototype.append=function(t,e){t=n(t),e=r(e);var o=this.map[t];o||(o=[],this.map[t]=o),o.push(e)},i.prototype["delete"]=function(t){delete this.map[n(t)]},i.prototype.get=function(t){var e=this.map[n(t)];return e?e[0]:null},i.prototype.getAll=function(t){return this.map[n(t)]||[]},i.prototype.has=function(t){return this.map.hasOwnProperty(n(t))},i.prototype.set=function(t,e){this.map[n(t)]=[r(e)]},i.prototype.forEach=function(t,e){Object.getOwnPropertyNames(this.map).forEach(function(n){this.map[n].forEach(function(r){t.call(e,r,n,this)},this)},this)},i.prototype.keys=function(){var t=[];return this.forEach(function(e,n){t.push(n)}),o(t)},i.prototype.values=function(){var t=[];return this.forEach(function(e){t.push(e)}),o(t)},i.prototype.entries=function(){var t=[];return this.forEach(function(e,n){t.push([n,e])}),o(t)},v.iterable&&(i.prototype[Symbol.iterator]=i.prototype.entries);var m=["DELETE","GET","HEAD","OPTIONS","POST","PUT"];h.prototype.clone=function(){return new h(this)},f.call(h.prototype),f.call(y.prototype),y.prototype.clone=function(){return new y(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new i(this.headers),url:this.url})},y.error=function(){var t=new y(null,{status:0,statusText:""});return t.type="error",t};var b=[301,302,303,307,308];y.redirect=function(t,e){if(b.indexOf(e)===-1)throw new RangeError("Invalid status code");return new y(null,{status:e,headers:{location:t}})},t.Headers=i,t.Request=h,t.Response=y,t.fetch=function(t,n){return new e(function(e,r){function o(){return"responseURL"in s?s.responseURL:/^X-Request-URL:/m.test(s.getAllResponseHeaders())?s.getResponseHeader("X-Request-URL"):void 0}var i;i=h.prototype.isPrototypeOf(t)&&!n?t:new h(t,n);var s=new XMLHttpRequest;s.onload=function(){var t={status:s.status,statusText:s.statusText,headers:d(s),url:o()},n="response"in s?s.response:s.responseText;e(new y(n,t))},s.onerror=function(){r(new TypeError("Network request failed"))},s.ontimeout=function(){r(new TypeError("Network request failed"))},s.open(i.method,i.url,!0),"include"===i.credentials&&(s.withCredentials=!0),"responseType"in s&&v.blob&&(s.responseType="blob"),i.headers.forEach(function(t,e){s.setRequestHeader(e,t)}),s.send("undefined"==typeof i._bodyInit?null:i._bodyInit)})},t.fetch.polyfill=!0}}("undefined"!=typeof self?self:this),t.exports=n.fetch}).call(n)}).call(e,n(4),function(){return this}())},function(t,e,n){var r;(function(t,o,i){(function(){"use strict";function s(t){return"function"==typeof t||"object"==typeof t&&null!==t}function a(t){return"function"==typeof t}function u(t){V=t}function c(t){tt=t}function f(){return function(){t.nextTick(y)}}function l(){return function(){K(y)}}function h(){var t=0,e=new rt(y),n=document.createTextNode("");return e.observe(n,{characterData:!0}),function(){n.data=t=++t%2}}function p(){var t=new MessageChannel;return t.port1.onmessage=y,function(){t.port2.postMessage(0)}}function d(){return function(){setTimeout(y,1)}}function y(){for(var t=0;t<Z;t+=2){var e=st[t],n=st[t+1];e(n),st[t]=void 0,st[t+1]=void 0}Z=0}function v(){try{var t=n(7);return K=t.runOnLoop||t.runOnContext,l()}catch(e){return d()}}function m(t,e){var n=this,r=new this.constructor(w);void 0===r[ct]&&U(r);var o=n._state;if(o){var i=arguments[o-1];tt(function(){B(o,r,i,n._result)})}else j(n,r,t,e);return r}function b(t){var e=this;if(t&&"object"==typeof t&&t.constructor===e)return t;var n=new e(w);return M(n,t),n}function w(){}function _(){return new TypeError("You cannot resolve a promise with itself")}function g(){return new TypeError("A promises callback cannot return that same promise.")}function E(t){try{return t.then}catch(e){return pt.error=e,pt}}function x(t,e,n,r){try{t.call(e,n,r)}catch(o){return o}}function T(t,e,n){tt(function(t){var r=!1,o=x(n,e,function(n){r||(r=!0,e!==n?M(t,n):A(t,n))},function(e){r||(r=!0,S(t,e))},"Settle: "+(t._label||" unknown promise"));!r&&o&&(r=!0,S(t,o))},t)}function O(t,e){e._state===lt?A(t,e._result):e._state===ht?S(t,e._result):j(e,void 0,function(e){M(t,e)},function(e){S(t,e)})}function D(t,e,n){e.constructor===t.constructor&&n===at&&constructor.resolve===ut?O(t,e):n===pt?S(t,pt.error):void 0===n?A(t,e):a(n)?T(t,e,n):A(t,e)}function M(t,e){t===e?S(t,_()):s(e)?D(t,e,E(e)):A(t,e)}function P(t){t._onerror&&t._onerror(t._result),C(t)}function A(t,e){t._state===ft&&(t._result=e,t._state=lt,0!==t._subscribers.length&&tt(C,t))}function S(t,e){t._state===ft&&(t._state=ht,t._result=e,tt(P,t))}function j(t,e,n,r){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=e,o[i+lt]=n,o[i+ht]=r,0===i&&t._state&&tt(C,t)}function C(t){var e=t._subscribers,n=t._state;if(0!==e.length){for(var r,o,i=t._result,s=0;s<e.length;s+=3)r=e[s],o=e[s+n],r?B(n,r,o,i):o(i);t._subscribers.length=0}}function k(){this.error=null}function R(t,e){try{return t(e)}catch(n){return dt.error=n,dt}}function B(t,e,n,r){var o,i,s,u,c=a(n);if(c){if(o=R(n,r),o===dt?(u=!0,i=o.error,o=null):s=!0,e===o)return void S(e,g())}elsPlus
 

+ a little CSS = layout.css  ==>

.copy-layer-background{opacity:0;transition:opacity .2s ease}
.copy-layer-background.is-loaded{opacity:1}
.sqs-slice-group.group-copy{overflow:scroll}

Your Cover Page looks like this. Assuming you uploaded the 2 files I gave you to file storage.

 

 

JB says: "This should work with most Cover Pages. I currently have a bug I'm trying to fix where the content overlaps until you move the browser width, which then forces the content to refresh itself and work as usual."


JB says: "That's it!"