-
Notifications
You must be signed in to change notification settings - Fork 911
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Provide a truncated view of recent diaries #5121
base: master
Are you sure you want to change the base?
Provide a truncated view of recent diaries #5121
Conversation
I agree with @tomhughes' comment on #5103 that this approach is more standard for addressing #3887. Since we're using Markdown, we should account for edge cases where the entry starts with images, headings, code blocks, or tables, which may look unreadable when truncated. Instead of using max-height, alternative solution would be to extract the first paragraph or a fixed number of characters and append ellipses (...). This would ensure the preview remains readable and coherent without cutting off important elements. |
@kcne Thank you for the review. I thought about truncating with a fixed number of characters, but it adds complexity in the code (it needs JS to calculate and trim number of characters) and introduces complexities about consistent height of the shown post (for example, if there is a post that starts with 5 big picture, if all of the pictures are shown (because of the small character number), shown post will be much bigger, than other posts' bodies, which include only characters and words). Same goes for showing the first paragraph, which in some cases will be huge and, in other cases, tiny. Truncation with a number of characters also needs additional custom parsing to avoid cut in the middle of an image link or any character sequence that is written for formatting. Of course, all of these are possible to make, but, I think, complexity they introduce is not worth, as there will be no such big quality of difference in visuals. |
One problem with this version is that the entire diary entry text is still present on the page. You can search with Ctrl-F and get results that are invisible. |
@AntonKhorev It's a good point, I'll try to fix it and, as we will need more complex solution than just adding |
When I thought how to do truncated diary entries I first considered doing it server-side. I already go through markdown parse trees in the richtext library to get images and descriptions for Open Graph tags. I can probably extend that to generate truncated entries. Then I thought that ultimately I want to limit entry heights. Isn't it easier to ask the browser what height each element is instead of trying to estimate it server-side? And if there's an image, it usually doesn't have its height specified in the source markdown code, therefore I can't know it server-side but client-side I can. But it's not that simple. Images can load any time, including never. I'd have to listen to load events to recalculate the heights. Now it doesn't look like a good idea. Let's suppose there's a large image and some text below. Before the image is loaded that text fits in the truncated view. Am I going to remove the text after the image loads, possibly when the user is reading it? I guess it's better to estimate heights and truncate server-side. |
I almost finished the code. I think it will be ready tomorrow. The idea is to truncate entries server-side and, for example, if we show only 1000 characters, estimate that image will take space of 500, therefore, it will truncate text and also won't allow to add many photos that will overload diary entries list page. |
d71a595
to
2f6e72a
Compare
This PR was updated. Now truncation is handled in the back end. After 1000 characters, entry is truncated and |
This PR is alternative to the #5103.
This PR addresses "Provide a summary view of recent diaries" issue mentioned in the #3887
Diary entries will be truncated after 1000 characters on the list pages. To avoid long diaries with pictures on the list page, every picture is handled as 500 characters. View of the diary entry details (show) page remains the same. "See full entry" button was added to the entry to explicitly mention that full entry is no more visible in the list and enhance UX. Fixes #3887
Screenshots: