Why use TwentyTwenty inside Semplice?
I was looking to add a Before & After slider to easily show the Photoshop and CG work I did to some source photos as part of a job for a light installation pitch for Oh Wow. I found Twenty20, which seemed like the perfect solution but I didn't know how to use it within a Semplice page because I am not a web programmer. After poking around on the Semplice help site for a while I found many others were trying to figure this out as well. So I took the time to figure it out. Hopefully other non-web developers will find this info useful.
Steps To Integrate The Code
Below are the steps I took integrate the image slider for two before and after images.
- Let's start with the assumption that you have Semplice installed, working, and want to create a page with a slider for two images of the same size that you have ready to roll.
- Install Twenty20 if you have not already.
- Create a new Semplice page. Then add some words and get it to a point where you can save it. You will notice, you can't add the TwentyTwenty plugin to a Semplice page, but only to a standard WordPress blog page. So instead, just save this page for now as we'll get back to it in a bit.
- Create a new blog post. This post will essentially be thrown away, so don't worry about title or any meta crap.
- Click the Add Twenty20 button at the top of the page near add media. It looks like this:
- Upload and select your two images, the before and after dialogue should look like this:
- When you press Insert Shortcode, it will spit out something like this inside brackets
twenty20 img1="658" img2="656" offset="0.5"
and on a normal blog page looking like this:
- Copy this short code, then and close the blog post. There is no need to save because it's no longer needed. Basically, I'm using the tools to generate a proper bit of short code since I don't know what I am doing if I had to write it from scratch. Doing it this way also makes sure the short code links to the proper images.
- Now open the Semplice page you started earlier. Click to edit it's content:
- Next click modules up top. Then choose </code>
- Click code editor in the following dialogue:
- This is where you will paste the short code you copied earlier.
- Press the check mark and save to view the post. Everything should work. 🙂
- It's quite simple really, it just wasn't obvious at all to me at first as I am not super-familiar with all the WordPress and Theme nuances.
- If someone has a way to do this with video, it would be appreciated if you let me know in a comment.
Also if you are wondering... the header image is from a 3DMax scene that I made to visualize some other before and afters I made for Oh Wow.
View Project Page That Uses This Effect...