Loading larg-sized Images

[reza899]

Description:

Our Rocket not work correctly after upgrading to 65.1 in loading image,
the problem most see in large-sized images,
this problem happens on old posts (before upgrading to 65.1)

Server Setup Information:

• Version of Rocket.Chat Server: 0.65.1
• Operating System: Ubuntu 16.04 (4.4.0-87-generic)
• Deployment Method(snap/docker/tar/etc): snap
• Number of Running Instances: 1
• DB Replicaset Oplog:
• Node Version: v8.11.1
• mongoDB Version:

[geekgonecrazy]

Not enough information to properly describe the issue. Please update to include more information

[TGriwenka]

I see the same issue, but with every large image that was uploaded or is uploaded.

I upload a large image and it is shown as you see in the two attached screenshots. It is shown the same in browser and in Rocket.Chat Client for MacOS (I tried already the actual developer version, which I compiled by myself).

First screenshot shows the image in the timeline. You see only part of the big image.

Second screenshot shows the image after I clicked on it in the timeline. There you see the complete original image...

[vynmera]

Yeah, it seems the new lazyload doesn't scale images. So images that are too large just expand beyond the view.

[reetp]

Same on docker 065.1

Really slows the loading and unnecessarily take up acres of screen real estate.

A real retrograde step.

[kuluev]

@rocket-cat label add "type: bug"

[rocket-cat]

You don't have permission to execute this command label

[kuluev]

I can confirm this. It happens when you upload a full-sized photo from android client.

[richardt3]

Timeline image previews are not being resized to an appropriate size but are being shown at the original file height and width. No scrollbars so image is useless. Either a css class has been deleted or a resize function is no longer being called.

[vynmera]

@richardt3 I'm pretty sure a CSS class was lost, as the images no longer have cursor: pointer either. I'll look into it...

[richardt3]

@vynmera because of users shouting, I added a dirty hack piece of custom css to my install to make width 80% of the frame. Image is still a full download but doesn't take up the whole screen now.

[geekgonecrazy]

Thanks for the fix @vynmera 👍

[ghost]

@vynmera - nice one. I don't suppose you have the CSS handy? Save waiting for the next release :)

[vynmera]

@acolville My fix includes a small HTML change too, so perhaps try out #10980 (comment) ?

[thepowerprocess]

quick fix before release

Administration > Layout > Custom CSS
add

.attachment-image img {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  width: auto;
}