Hi everyone!
I've seen a few people asking about P5js sketches in Laytheme. We recently did a project like that and wanted to share our findings on this with you.
Here is the project: https://ja-kob.ch/
I had two goals:
- Show the sketch only on one specific site
- Make the sketch responive (full width / auto height)
Here is my current solution:
I stored the library files in a folder assets in wp-content (probably theres a better place for this?) and implemented them in Lay Options -> Custom CSS & HTML -> Custom <head> content like this:
<script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.js"></script>
<script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.dom.js"></script>
<script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.sound.js"></script>
I created an empty div with an ID of sketch-holder in Lay Options -> Custom CSS & HTML -> Custom HTML at top. I later place the sketch canvas inside it to have better control.
<div id="sketch-holder"></div>
To place the sketch canvas into this div I gave the canvas a parent element in sketch.js like so:
function setup() {
var cnv = createCanvas(1998, 1080);
cnv.parent('sketch-holder'); // this is the id of the div
cnv.position(0, 0); // this gives the sketch an absolute position in the top left corner
}
To make the sketch responsive I added the following code to Lay Options -> Custom CSS & HTML -> Custom CSS for Desktop Version
#sketch-holder {
margin: 0;
padding: 0;
width: 100%;
}
#sketch-holder canvas {
width: 100% !important;
height: auto !important;
margin: 0;
padding: 0;
}
Ok, now comes the fun part. Somehow the sketch.js broke all the functions of the mobile navigation. I haven't found a solution for this and decided to only use the sketch on desktop sizes and instead using a static image for the mobile version. I used the following code to load the sketch.js file only when the window width was greater than the breakpoint for mobile:
if (jQuery(window).width() > 600) {
jQuery.getScript( "https://yoururl/wordpress/wp-content/assets/sketch.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});
}
Last but not least I only wanted to show the sketch on a single page. I used a piece of code from the Laytheme docs to determine the page (since Laytheme isn't really realoading from page to page as far as I understood):
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "ja-kob"){
jQuery('#sketch-holder').show();
} else {
jQuery('#sketch-holder').hide();
}
});
It's very important to hide the #sketch-holder (meaning your sketch) if you don't want to show it. Because the sketch.js file creates a default canvas element on every page no matter what. Even if you placed the actual sketch inside a parent element. This default element remains empty but still takes up space at the bottom of every page, underneath the footer. This is because it's using visibility: hidden (instead of display: none.) I didn't managed to trigger a css class with JQuery so I ended up using it's built in function hide/show.
Probably there is a way better way to achive this. But I wanted to share it anyway for the public discussion. If you see some bugs of the site, let me know. Also if you have found other ways to use P5js inside Laytheme. :-)
Cheers'
Max
