[Help Wanted] Update image thumbnails

[lfbrock]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide, specifically for machine setup and for developer workflow.

---

Details: Update image thumbnails to match the screenshot below.

You can find a PR that had a start on image thumbnails and has parts of the CSS needed to update them: #3874

[khawerrind]

@lfbrock i am interested in this task. Can you please tell me more about it.

1. Only the image thumbnails needs to changed or other type of attachments as well?
2. Clicking on image name should download the image or open the modal box for preview?
3. Clicking on thumb should download the image or open the modal box for preview?

[lfbrock]

Hi @khawerrind, thanks for the interest!

To answer your questions:

1. Other attachments should be changed as well
2. Clicking on the image name should download the file
3. Clicking on the thumbnail should open the preview

[khawerrind]

@lfbrock Some other questions

1. I can see that the sizes of the images are different in the attached screenshot that you have provided. Is there is any maximum width & height to fit the image within the block?
2. In the current UI we show the file size as well. Is it not needed now to show the file size?
3. What if the name is very long. Any maximum width & height for the name block after which we will show the ... if the name is bigger than certain characters?

[asaadmahmood]

@khawerrind Sorry for the late reply.

1. The minimum width should just depend on the image, it can even be 1px by 1px. But still the area should be clickable. The max width should be 100px, and the max height should be 60px.
2. Yes, the file size will not be shown now.
3. The name container should observe a max width of 100px as the image, it can only exceed to 2 lines, and no longer than that. So the max-height should not be of concern here.

[jasonblais]

Hey @khawerrind, this PR had a start on the image thumbnails and has parts of the CSS needed to update the thumbnails: #3874

That might be helpful to get you started.

[khawerrind]

@jasonblais here is the PR #5175

[it33]

The attempted PR was closed due to inactivity: #5175 (comment)