Images could be rendered as a carousel or grid at the bottom of the note #626

New Issue

fernandoporazzi · 2023-09-01T15:27:37Z

fernandoporazzi commented

2023-09-01 15:27:37 +00:00

Is your feature request related to a problem? Please describe.
Right now images are rendered between text, links and so on. This approach makes reading a bit confusing for long notes.

Describe the solution you'd like
Ideally, images should be rendered at the bottom of a note in a carousel or grid layout. Twitter uses a grid and Damus uses a carousel.

I think the right order would be:

Regular copy
Links
Media(videos and images)
Invoice

Images are from Damus(slider/carousel) and Twitter(grid) respectively.

**Is your feature request related to a problem? Please describe.** Right now images are rendered between text, links and so on. This approach makes reading a bit confusing for long notes. **Describe the solution you'd like** Ideally, images should be rendered at the bottom of a note in a carousel or grid layout. Twitter uses a grid and Damus uses a carousel. I think the right order would be: 1. Regular copy 2. Links 3. Media(videos and images) 4. Invoice Images are from Damus(slider/carousel) and Twitter(grid) respectively.

IMG_1883.PNG

1.6 MiB

Screenshot 2023-09-01 at 17.18.24.png

822 KiB

fernandoporazzi commented

2023-10-03 17:16:35 +00:00

I am working on a concept here. Check the video here https://streamable.com/q492ui (it expires in 2 days)
What do you think?

Event: nevent1qqs0mmnaagnzuth4pqtutexrgfdtsu5cud75j58zcakc4gpl4dyzdqgppemhxue69uhkummn9ekx7mp0qgs840v084fmuuq3zdf9chzxfqhdfralfjn8nzxfhhn9az30lexr54crqsqqqqqpvlw5c5

CC @Giszmo

I am working on a concept here. Check the video here https://streamable.com/q492ui (it expires in 2 days) What do you think? Event: `nevent1qqs0mmnaagnzuth4pqtutexrgfdtsu5cud75j58zcakc4gpl4dyzdqgppemhxue69uhkummn9ekx7mp0qgs840v084fmuuq3zdf9chzxfqhdfralfjn8nzxfhhn9az30lexr54crqsqqqqqpvlw5c5` CC @Giszmo

fernandoporazzi referenced this issue

2023-10-03 22:08:57 +00:00

feat: group images into a gallery #639

Giszmo commented

2023-10-04 02:01:56 +00:00

Very nice! So the video looks like you would generate a gallery for each block of media links? Yet in the description above you talk about putting text before links before media and invoices?

I think it's cool that you can alternate between media and text even with TextNotes without long form but see that Damus is breaking with that already.

Clients should avoid UI shifts as much as possible - something Snort does not excel in right now. So until you know the content, you should render the event in a certain size and ideally that size would not change once the content is loaded. Your layout is highly dynamic in length.

Very nice! So the video looks like you would generate a gallery for each block of media links? Yet in the description above you talk about putting text before links before media and invoices? I think it's cool that you can alternate between media and text even with TextNotes without long form but see that Damus is breaking with that already. Clients should avoid UI shifts as much as possible - something Snort does not excel in right now. So until you know the content, you should render the event in a certain size and ideally that size would not change once the content is loaded. Your layout is highly dynamic in length.

fernandoporazzi commented

2023-10-04 08:01:55 +00:00

Not all media links though, just images. Audio and video links remain the same.

You are correct, my initial idea would be to organize a note in text, links, media and invoices. But after putting some thought into it, I realised it would be a poor UX practice considering users create a post and expect it to be rendered in a certain way, a sort of WYSIWYG.

So in order to improve notes readability, I decided to group subsequent images to create a gallery instead of stacking them on top of each other.

What do you mean with UI shifts? There are no re-renders because once the <Text> gets called, it already has the whole content and just renders it once.

Not all media links though, just images. Audio and video links remain the same. You are correct, my initial idea would be to organize a note in text, links, media and invoices. But after putting some thought into it, I realised it would be a poor UX practice considering users create a post and expect it to be rendered in a certain way, a sort of [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG). So in order to improve notes readability, I decided to group subsequent images to create a gallery instead of stacking them on top of each other. What do you mean with UI shifts? There are no re-renders because once the `<Text>` gets called, it already has the whole content and just renders it once.

Kieran commented

2023-10-04 09:22:00 +00:00

He means change in height due to media loading, since we dont know the height of the images only the browser knows when it downloads them.

This is why Damus uses the imeta tag to encode the image size (and other stuff) into the event to prevent changes in height.

IMO it doesnt bother me that much that the size changes and that is probably why it has never been improved

He means change in height due to media loading, since we dont know the height of the images only the browser knows when it downloads them. This is why Damus uses the `imeta` tag to encode the image size (and other stuff) into the event to prevent changes in height. IMO it doesnt bother me that much that the size changes and that is probably why it has never been improved

fernandoporazzi commented

2023-10-04 09:47:07 +00:00

Well, the solution implemented in the PR enforces the height of the the grid item, and the image inside it will only take the space of the parent element(140px of height for instance).

👍 1

fernandoporazzi commented

2023-10-05 14:40:11 +00:00

The PR related to this issue got merged. Therefore I am closing this issue.

fernandoporazzi closed this issue

2023-10-05 14:40:11 +00:00

Sign in to join this conversation.