[BUG] Image attachment can't expand or show original image

[JeffreytheCoder]

Description:

Image attachment can't expand or show original image

Steps to reproduce:

1. Try clicking on any image attachment in message

Expected behavior:

When clicking on a image attachment, shows the original image in full screen mode

[JeffreytheCoder]

Working on it

[Spiral-Memory]

Hey @JeffreytheCoder , I suggest you confirm with the maintainers once whether we need this or not. Like, consider this: the embedded chat has to be integrated into multiple other websites, as in chat app. In those contexts, space will be limited, so displaying the image fullscreen won't work properly. We need to maintain the aspect ratio and handle many cases. Therefore, once confirm with them to confirm whether this addition is helpful before working on it.

[JeffreytheCoder]

@sidmohanty11 @abhinavkrin ^^

I think expanding to the full screen in EC window does a good job. Right now the only way to see the original image is to download and we want the user to the original image while staying in EC.

[sidmohanty11]

@JeffreytheCoder I think it will be a good addition! Let's use the swiper and try to keep the UI/UX similar as the core RC - https://github.com/RocketChat/Rocket.Chat/blob/5b7623dfe45a450c7d18094617d176117ccc1e39/apps/meteor/package.json#L426C4-L426C10

[Spiral-Memory]

@sidmohanty11 @JeffreytheCoder

[sidmohanty11]

Thanks @Spiral-Memory!

[JeffreytheCoder]

I had no problem working with Swiper, but need a little help with fetching the original image.

In RC, if you check the source of the image attachment, it has src as the preview image link and data-src as the original image link.

<img data-id="tmPWgDNGMWJh5wRZo" class="gallery-item" data-src="https://ucla.rocket.chat/file-upload/tmPWgDNGMWJh5wRZo/codeimage-snippet_22.png" src="https://ucla.rocket.chat/file-upload/JMrwvXTTSpdigDeW8/codeimage-snippet_22.png" width="360" height="122.25">

The Swiper in RC uses the data-id as the image url, as in ImageGalleryProvider

@sidmohanty11 @Spiral-Memory Any idea how we can get the original image link in EC? Right now all attachment urls, including the downloading link, only return the preview image

[Spiral-Memory]

Hey @JeffreytheCoder , nope, I don't have any idea regarding that. I'll check it tomorrow and respond back to you.

Edit : Did you find a way ? I haven't tried yet. Little busy writing proposals.

[JeffreytheCoder]

Hey @JeffreytheCoder , nope, I don't have any idea regarding that. I'll check it tomorrow and respond back to you.

Edit : Did you find a way ? I haven't tried yet. Little busy writing proposals.

Not yet, I'm writing proposal too

Will dig deeper later this week

[JeffreytheCoder]

@Spiral-Memory Found it! The original link is attachment.title_link while the preview link is attachment.image_url

[Spiral-Memory]

@JeffreytheCoder Awesome !

Edit: I'm stuck with my final B.Tech presentation, honors, research paper publication, and lab exams. I thought I'd feel a little free after submitting the proposal, but then all of this happened.

[JeffreytheCoder]

@JeffreytheCoder Awesome !

Edit: I'm stuck with my final B.Tech presentation, honors, research paper publication, and lab exams. I thought I'd feel a little free after submitting the proposal, but then all of this happened.

@Spiral-Memory No worries lol

Good luck with your presentation and exams!