Image compare problem

I Need Help
1

I was having a similar problem to the post below.

I took the following actions:

  1. Removed the image compare bric from the Blocs Project
  2. Delete the image compare bric from Blocs
  3. Downloaded the image compare bric from Blocs Store and Installed
  4. Added the image compare bric back into the Blocs Project

Now I see the before image with the after image below as well as the slider does not move at all.
Screenshot 2023-02-11 at 8.20.52 AM

One other oddity is when in blocs the before image and after image are correct but the original slide stays visible when I slide the slider.
Screenshot 2023-02-11 at 8.20.24 AM

Here is a link to this test website.

Image Comparison

I am using Blocs 5.0.5 and macOS 13.2 Ventura

One more thing I tried adding the image compare bric to another Blocs project and it works as expected!

Any ideas how to resolve?

2

I thought I had found the problem. I saw a copy of cocoen.min.js in the attachments for the project settings so I deleted this and it now works fine in preview mode but then I export the project and upload to my server it still has the before image above the after image.

Also, does the same thing on windows 11 using edge.

Any ideas why it works fine in preview but not from the webserver?
Below are my export settings.

Screenshot 2023-02-11 at 4.10.45 PM
Screenshot 2023-02-11 at 4.10.45 PM1008Ă—582 95.2 KB

3

Ask the developer kindly if he will be updating his Bric at some point to support Bootstrap 5.

Small Potato Ltd 2023-02-12 at 06.47.55@2x
Small Potato Ltd 2023-02-12 at 06.47.55@2x1920Ă—1425 111 KB

4

Hiya
Just had a look at Safari console & the cocoen. js file is still on your server in the js folder so maybe try manually deleting it from there.

5

@Jerry . I tried it with a bootstrap 4 project and it does the same thing. Does it work for you?

6

@Hiya, I had tried that but it make it worse as the slider is no longer there and you just have two images one on top of another.

Also, on export I see the file, so it is needed to make the image comparison work properly.

7

Hi, I used the bric recently and I had the same problem, I solved it just turning off the “generate WebP” option in project settings

8

Yes, it does.

Small Potato Ltd 2023-02-12 at 16.35.16

9

It’s the webp problem again

10

how did you customize it? :heart_eyes:

11

You were faster :wink:

1 Like
13

Thanks, I deleted webp and now works as expected.

1 Like
14

Just add:
.cocoen-drag and .cocoen-drag::before to the class manager and apply your fancy styling.

1 Like