Image compare works, but how?

Using Ghost
1

Hey folks,

In WordPress, Jetpack has an ‘Image Compare’ feature. You add two images in it and it adds a slider in between. You can move the slider to see more portions of one image. An example can be found here: https://avif.io/

So recently, we moved from WordPress. I was under the impression that the image compare won’t work in Ghost as it was a feature provided by Jetpack plugin.

But to my surprise, it works the same in Ghost as well.

An example here: 6 Tips and Tools to Enhance Your Flatpak Experience in Linux

Now, my question is how can we do this image comparison in a fresh article with fresh images?

2

That’s still in alpha, and by the looks of its usage in your post for good reason too.

3

What will happen if I enable the URL cache option? What is the process of this option?

Screenshot 2023-01-13 at 12.52.04 PM
Screenshot 2023-01-13 at 12.52.04 PM2526×906 157 KB

4

It’s an unfinished alpha feature that isn’t supposed to be used outside of core development - the alpha toggle list is there to enable the core team to selectively enable pieces of code whilst working on them without having to manage the nightmare of long-running git branches.

None of those features are ready to be used in live sites and you will run into usability issues or problems upgrading at some point if you’re making use of them.

If code is finished it will be released in a normal release or if it’s ready but needs wider testing then the feature will be promoted to beta and be available to everyone on the labs page.

5

Ah, that means Cardmageddon also can discontinued by the team. Isn’t it?

6

Sorry to bring this back from the dead but I’ve switched to Ghost from CMS and it looks like the built-in solution for image comparison was dropped. Is there another service I can use that lets me do that? I wanted to compare photos from two phones I’m reviewing.

7

You could use Interacty and embed image comparison.

Regards,

Abhishek Prakash
Founder
It’s FOSS

8

Thanks. Haven’t heard of this before, but I’ll check it out.

9

Hope it is what you need. I use them for quizzes and all but I got their lifetime license in one of the AppSumo sales couple of years back.

Regards,

Abhishek Prakash
Founder
It’s FOSS

10

I’ve got a slider demo here: Some mighty nice refactoring

I don’t think I ever wrote up how to do it, but I can if you want it. :slight_smile:

11

This looks great- would love to find out how you did it!

12

Here ya go:

(I might have had too much fun setting up the demo… )

2 Likes
13

Nice!

You’ve demoed that we can have multiple of these in an article, which is great, as I plan on doing that. So, do I use it as a snippet and post it before or after two adjacent images each time I want to use this? Or do I just put it in the post’s code injection and then anytime there are two adjacent images, this automatically fires up?

Lastly, can I use Left/Right instead of Before/After? I will be comparing two photos from different phones so something like “Left: iPhone 17 Pro” and “Right: iPhone 16 Pro” sounds better captions

14

No, just once. It’ll work fine as a snippet (in an html card) or as code injection.

The javascript should be pretty readable, and that’d be an easy change. Take a look at the javascript on the post. :slight_smile:

Currently, captions aren’t preserved. That could probably be changed. The simplest thing would probably be

15

Code looks super easy to follow but your last response feels like it ended before you intended it to :slight_smile:

1 Like