Hi there, I am wondering if there is a good way of inserting some form of interactive before-after photo widget in a blog post.
More or less something like this: https://codepen.io/josephwong2004/pen/NWRGxdR
You can insert all of that using an html card.
Hi, can you please elaborate? I assume you mean I could store the JS file somewhere (and probably include it in header/footer code), but then what about inserting the images themselves? In the example I linked the two images are defined in CSS classes. Do you imply I should hardcode them in a style file like it’s done in the example?
If your theme already loads jQuery, it’s a very small bit of javascript that could go into code injection.
You could put the images into the post, grab their urls, and then delete them. Or you could write some javascript that finds two adjacent images in the post and converts them into this before/after format.
While there’s no widget built in, if you use Ghost snippets, it won’t be all that much trouble to add one, after you get it set up.
Hello AlexKalopsia
Did you find a simple way to do this?
Searching for information I found this link, but I don’t quite know the right way to implement it.
10 Awesome Image Comparison Slider Javascript Libraries
For people without technical knowledge, it is not so simple.