Add support for images with different sizes

[jahirfiquitiva]

Hey, I'm trying to use this lib, which looks pretty good, although I'm missing a small feature

I was using react-compare-image before, and it has this aspectRatio prop feature, allowing for the slider to look fine when images aspect ratios differ, and therefore being able to view both images in full size.

Here's their examples:
https://react-compare-image-git-master-junkboy0315.vercel.app/?path=/story/images-with-different-aspect-ratios--default-behavior

I created a sandbox showing the current behavior

https://codesandbox.io/p/devbox/infallible-shape-t5p8tl?file=/src/App.tsx:16,10

Would it be possible for you to add such feature? Or is it already possible? And if it is, how to set it up?

Thanks in advance!

[nerdyman]

Hi @jahirfiquitiva, that's an interesting use case!

There's no built-in prop to do this but you could achieve what you need with a bit of extra logic.

The most foolproof way would probably be to attach a resize observer to the slider component and refs to the images to get their natural widths and heights and then calculate their aspect ratios. You'd then opt for the higher or taller one. One thing to note is that it looks like react-compare-image uses fixed widths and heights on the slider where as this lib uses the intrinsic sizing of itemOne so you'd also want to set a fixed width and height on the slider component itself if you want to mimic what react-compare-image does.

I'll take a look at getting a demo set up, if it ends up being complex I think it would be worth adding a prop to this lib similarly to react-compare-image.

[jahirfiquitiva]

Thanks for your reply @nerdyman .. A demo would be incredibly helpful. Thanks in advance!

[nerdyman]

@jahirfiquitiva I've got a basic demo working here https://codesandbox.io/p/sandbox/rcs-aspect-ratio-forked-fngydc?file=%2Fsrc%2FApp.tsx%3A12%2C1-13%2C1

It starts with the default behaviour (shown as undefined) then cycles through undefined|'taller'|'wider'. I ended up using the aspect-ratio CSS prop rather than setting fixed widths and heights on things which is a bit cleaner IMO.

This is still fairly basic since it won't automatically change the aspect ratio if you change the images in itemOne and itemTwo. To do that I'd either use a resize observer to fire handleAspectRatio() on resize or a useEffect to fire handleAspectRatio() on prop changes.

The logic is a bit involved so I'll have a think about how to best add this to the lib but this should hopefully get you going in the meantime!

[jahirfiquitiva]

@nerdyman it says Sandbox not found, maybe it isn't public? 😬

[nerdyman]

@jahirfiquitiva should be ok now 🙏

[jahirfiquitiva]

@nerdyman wow, thank you so much for the help. It seems to work fine in the demo, I'll give it a try in my project later and let you know how it goes. Thanks again! 🎉

[nerdyman]

@jahirfiquitiva Happy to help 😄 let me know how it goes!

[jahirfiquitiva]

hey @nerdyman , it took me a bit to get back to this, sorry ... Anyway, I think this doesn't seem to work quite fine. Probably because the images are bigger than the container? 🤔

This is the result with your demo code:

This is the expected result:

I've made a PR to my website with these changes, in case you could take a look there 🙏

jahirfiquitiva/jahir.dev#74

Thanks in advance!

[nerdyman]

Hi @jahirfiquitiva, Thanks for proving the link to your use case 🙌

I think it's because the slider is still using the bounds of the first image. In the sandbox the slider is filling the width of the container so the images fit better.

I was thinking of adding a separate hook to the lib to handle this so I'll take a look at your repro and figure something out.

[jahirfiquitiva]

@nerdyman I kinda fixed it by using the container width to calculate its aspect ratio and waiting for the images to load

jahirfiquitiva/jahir.dev@f628fab (#74)

Anyway, it causes a layout shift.

Shot.2024-02-03.at.11.19.16.mp4

[mdrahiem]

Hey @nerdyman thanks for the nice lib. I am trying to use it in one of my project and I have the similar use case like above. In my case, itemOne is ReactNode (a div not an image) with say 200px height whereas itemTwo is ReactNode (a div not an image) with 300px height. May I know if you any plan to implement this feature? Thanks again for your help.

[nerdyman]

Hey @mdrahiem, I've been hoping to ship a util for this with v4 but haven't got anything for it yet.

v4 changes how itemOne and itemTwo render. Previously, itemTwo was absolutely positioned on top of itemOne which made determining its intrinsic size difficult. v4 uses grid to place the items on top of each other which should allow each of them to affect the size of the slider.

I haven't tried to repro this issue with v4 yet but as a workaround, if you know which item you want to use the size of, you could absolute position the other item so it doesn't affect the slider size. E.g. if you wanted to use the size of itemTwo you could make itemOne absolutely positioned so it doesn't alter the size of the slider.

If you're able to provide a Stackblitz repro with your specific use case I'll try and figure something out.

You can try out v4 by installing the beta tagged version - the API is the same as v3.

pnpm i react-compare-slider@beta
# Or
yarn add react-compare-slider@beta
# Or
npm i react-compare-slider@beta

[mdrahiem]

Awesome @nerdyman thanks much for your reply. I will try to implement your suggestion and let you know how it goes. Also I will try the beta as well and update you.