Auto-scroll to last unread post not working when there are pictures

CyberGene

The only solution so far is to use the Rich Embeds extension.

Jarvo

CyberGene There is no such plugin named “Rich Embeds” 🤨

tom23

CyberGene I've noticed when there are pictures in a discussion (pics uploaded through the Imgur extension if that matters), then the auto-scroll to the last unread post doesn't always work.

This is really annoying.
If there isn't a solution soon, we'll have to switch to another software. Our members have been complaining for years.

clarkwinkelmann

You could also hard-code the height of all images using CSS. This should be a fair compromise if all images are generally quite large. If you use images for badges/icons in posts (like we do here with the download counter images for extensions), then this would unfortunately scale up those images unless they are inserted using the image bbcode with specified width and height. You could have a bit of flexibility by applying a different height based on the image domain or a part of the URL path.

tom23

clarkwinkelmann where can I do this? What code do I need?

The problem is that not all images are the same, and they'll probably be lost.

clarkwinkelmann

tom23 I'm thinking of something like .Post-body img { height: 300px; } in the forum custom CSS. But I have not tested it, not sure how well this will work with the scroll logic and general UX. You will probably want to define multiple media queries to change the hard-coded height depending on the screen size, to make the pictures smaller on mobile. Some overflow rules might also be needed to handle pictures that will go out of frame if they are too wide.

An idea could also be to customize the TextFormatter IMG template using a Flarum extension, to wrap every image in a div, so you can force the size of the div and make the image responsive within. This part would probably be best created as an extension, so it can be re-used across multiple forums with ease. This could also be part of "lightbox" solution, where all images are made a fixed height, and additional code handles opening the image larger on click.

tom23

clarkwinkelmann It's a shame we specifically chose Flarum because neither of us knows how to program. Certainly not on a whim.

Just using CSS/LESS would be fine, but I don't feel confident editing glossy documents.

huseyinfiliz

Jarvo https://flarum.org/extension/kilowhat/flarum-ext-rich-embeds

Jarvo

huseyinfiliz Ahhh. But I am not coding the forum myself. I’m using Freeflarum 😅

CyberGene

The Rich Embeds is a paid extension but it’s totally worth it $20, thanks @clarkwinkelmann for the continued support 👏🏻 Its main purpose is to show URL previews and it does its job great. However, it can also show pictures in a rectangle with predefined dimensions and thus solves the scrolling issue. I think it will work only for new posts though. You have to enable the “Rich Embeds for Images” option.

BTW, the scrolling issue is also due to YouTube videos. However, the Rich Embeds also solves that issue too. But if you have the FoF Formatting extension, you will have to disable the “media embed” option there and also install the (free) Selective Media Embed extension and in its options to have all websites enabled except for YouTube. Yeah, it’s all a bit tricky but I did it once many years ago and haven’t had the scrolling issue ever since. It’s a pity that it’s not been part of Flarum Core though.

clarkwinkelmann

For users of FoF Upload, at some point it would be good if we can implement the same feature.

Off-site pictures with Markdown or BBcode are the real challenges, but when the file is uploaded locally the forum can know the dimensions will not change, it's just not implemented in FoF Upload right now.

The MediaEmbed YouTube embed should also be a solvable issue. With some CSS it would be possible to force the iframe/container height so it doesn't jump around during rendering.

luceos

clarkwinkelmann Off-site pictures with Markdown or BBcode are the real challenges

Once a post is made that includes on- or offsite images, we should probably do a one-time get request to try to identify the dimensions. Obviously this is not a 100% guarantee that this works and/or continues to work given:

htpasswd or other protections
file sizes that would make the request timeout
changing dimensions when files get modified through other means

But yeah, it's never a fully guaranteed solution.

clarkwinkelmann

luceos this is essentially what Rich Embeds currently does. The size is cached once and forever, until someone with the necessary permission uses the refresh button on the image to fetch it again.

There could also be a few other improvements that don't require pre-fetching anything, but they are all complex to create, test and maintain for compatibility across all environments:

Intentionally delay the scroll/rendering until some/all of the images have had time to load. This could work well if the images are always small and/or you expect most users will have a fast connection. With some additional logic, it could even be possible to implement a pre-fetch like Chrome does for links, where hovering the cursor above a mention already starts loading posts and their images in the background, even if you don't end up clicking
Adjust the scroll position in real time as the post content changes. This would likely require the use of the Resize Observer javascript API, perhaps combined with additional logic to lock onto a specific paragraph of text to handle content loading later inside a post you already started scrolling down into. This would have the benefit of handling everything, images, embeds, and interactive component added by an extension
As an hybrid between all these solutions, some code could also be used to hard-code a default size for all images in posts that are above the viewport, then when the post comes into view and the image is loaded, the height is animated into the actual height. Maybe a solution that does this could also provide a feature where images in posts only start loading once they enter the viewport, to reduce network traffic

huseyinfiliz

Jarvo Rich Text extension is available for use on FreeFlarum.

Jarvo

huseyinfiliz I tried that. But it doesn’t fixes the scroll bug.

Steve33

huseyinfiliz Rich Text extension is available for use on FreeFlarum.

But this is not the (paid) Version here is told from?
I also have (free) Rich Text, but had always this scroll issue.

clarkwinkelmann

Rich Text and Rich Embeds are very different extensions.

Rich Text is a free extension by askvortsov. It replaces the Flarum post editor with a WYSIWYG interface. I don't think it has been brought up in this discussion at all, and has nothing to do with it.

Rich Embeds is a paid extension created by myself that creates links previews and has a special feature to also augment image links with metadata as well as pre-fetch the width and height.

A WYSIWYG editor (but also the native editor) could also have an opportunity to address this issue pre-publication. Since the image is loaded in the preview of the post while it is written, the image link could be automatically converted into a bbcode image with hard-coded width and height before the post gets submitted. This value could be tempered with by the writer, but it wouldn't be dangerous as editing this value would just screw up the width/height ratio of your own images.

Trc4

clarkwinkelmann So I can set at Rich Embeds how high the pictures should be in the post and the jumping within the post finally stops? Can I also customize YT videos that I embed via FOFUpload?

Do the BBCode images then link to the original size, or how exactly does that work?

It's great that this is being discussed here. That's one thing that really annoys me about Flarum.

Jarvo

clarkwinkelmann But I still hope the jumping from posts will be fixed because it's also applicable (I just noticed) when there is a table (from Markdown Tables) in the message.

CyberGene

Trc4 everything is automatic with Rich Embeds, you don’t have to set anything, it will automatically fetch the image dimensions. As to YouTube, see my other post above, I’ve explained in details how that works and what other extensions you may need.

« Previous Page Next Page »