FriendsOfFlarum Discussion Thumbnail

datitisev

martoslawa The extension caches the thumbnail URL so it doesn't have to determine what it is for every discussion every time. It should be refreshed when edited, but the logic might be bugged. I'll check locally and see if I can reproduce the issue.

Update: I checked locally and it works fine for me. If you remove all images from the first post, does the thumbnail disappear (or is replaced with start user avatar)?

martoslawa

datitisev Sorry, I'm so silly I didn't realize I had to clear my forum's cache, not my browser's cache. 😅 It works perfectly fine now. Sorry for the bother!

datitisev

martoslawa Does it update fine without needing a forum cache clear? It shouldn't need it.

martoslawa

datitisev No, the thumbnail doesn't update after changing the first image in the discussion or removing all images in the discussion. It's stuck until I clear forum's cache.

------------

1 issue with this that results in bad UX:

clicking the post thumbnail opens the poster's profile page. Instead of opening the post.

any idea how to change the behavior so it opens the post?

Darkle

------------ Interested in this as well, it causes quite a bit of confusion that clicking on an image related to the post opens a user's profile, would be a nice change for this extension.

TB54

It's maybe obvious, but in case anyone is interested, here is the little CSS code I added to avoid the image being deformed in the little circle icon:

.Avatar img { object-fit: cover; }

And the one to deactivate the link of the icon (in order to avoid linking to the profile):

.DiscussionListItem-content a.DiscussionListItem-author { cursor: default; pointer-events: none; }

Nice extension! (specially useful in the first day when you made half the topics and that it's a little cringe to see your avatar appear everywhere!)

EDIT (2022/11/21) :

The .Avatar img { object-fit: cover; }solution is problematic, has the image appears pixelated in Chrome.

Instead, rather use this, which gives the same result and doesn't get pixalited in Chrome:

.Avatar img {
    width: auto;
}

.Avatar.DiscussionListItem-thumbnail {
    width: var(--size);
    overflow: hidden;
}

TB54

Don't know if it's easy to do at all, but it could be nice if the extension also picked the preview image of videos included in the message (youtube, vimeo, etc.). Because when there is a message with a video (which displays the preview image), it's rare people add an image in it.

clarkwinkelmann

TB54 if it was a manually inserted video & poster image with a dedicated bbcode it would be possible.

However for MediaEmbed or AutoVideo, there's no way to achieve this without adding an additional scraper script in the backend and that makes the extension a lot more complex.

If you already have a scraper (for example my Rich Embed for link previews), the links to the OpenGraph images from the preview are now in the database so could be retrieved as a fallback. This particular implementation would likely need to be a separate extension though because we couldn't maintain compatibility with a closed-source extension inside an open-source extension easily.

TB54

clarkwinkelmann Ok, i understand, it's indeed an all other functioning... And a way maybe to manually add a thumbnail to a discussion, even if the image is not present in it?

clarkwinkelmann

TB54 if you need to manually add a thumbnail to a discussion without another extension, maybe you could edit the discussion and add a new image manually? You could put the image in a spoiler tag and/or define a very small width/height if you don't want it too visible in the post itself.

I think I remember another extension that allowed to manually provide an image. But maybe this was something only for OpenGraph and not the discussion list.

It shouldn't be a difficult thing to create as a separate extension.

TB54

clarkwinkelmann In fact a <div style="display:none"> around the image would be enough, but I don't think there is any extension currently available in flarum which allows to insert such html code in messages?

TB54

A weird little bug: if I split messages and merge them into a new discussion, the thumbnail doesn't react: even if there is an image in the discussion, it keeps the initial thumbnail (here the first poster avatar), even after emptying the cache.

TB54

I don't know if it's a bug, or something which should be improved: if the first image is posted after the first message, and/or by someone else than the guy who created the thread, it's not used as thumbnail.

Is it normal?

datitisev

TB54 The current behavior of the extension, if I remember correctly, is that the thumbnail only uses the first image in the first post.

TB54

datitisev Oh ok, I thought it was the first image found in the all discussion. Well, I don't know if it would be needed by anyone else, but it could be an improvement to search in next messages if images has not been found in the first one.

datitisev

1.1.0

Add option to make thumbnail link to discussion's first post (FriendsOfFlarum/discussion-thumbnail12)
- If no "discussion thumbnail" is found, the discussion author avatar will still link to their profile
- To differentiate between user avatar vs discussion thumbnail, custom styles can be added by targetting .DiscussionListItem-thumbnail in custom CSS
Update to Webpack 5 - requires flarum/core v1.2.0

OwlGreen

bloodchen Allow specify tags that will use this layout.

How to show discussion thumbnail only in specify tag?

I was try do it in CSS, but have problem:

1. If I sets .Avatar.DiscussionListItem-thumbnail img.Avatar: {display:none}, discussion image empty, but I need to show user avatar when I hide thumbnail image.

2. TagsLabel class don't have individual id, without it I can't add rules in CSS to show element only in TagsLabel with id 1,4,6 (example).

🙁

OwlGreen

OwlGreen How to show discussion thumbnail only in specify tag?

I think need create custom BBCode for discussion thumbnail, example [thumbnail]https://linktoimage[/thumbnail]
and add this bbcode only in discussion template with specify tag 🙂

Next need change regex in AddDiscussionThumbnail.php

preg_match('/<img.+?src=[\"\'](.+?)[\"\'].*?>/i', $content, $match);

To this:
preg_match("]([^\]]+)[/thumbnail]", $content, $match);

I'm not test it. Please correct me if you understand regex.

So if I wanted to set discussion thumbnail, I need to use this bbcode, of course it's not perfect solution, but lite compromise because i use custom style in this plugin (larged image) and it's look beautiful only in specify tag, without list topics with default avatar style.

TB54

I discovered a little problem on chrome: while on firefox, the image resizing gives a soft result, on chrome it's very pixelated (like if it used "nearest neighbor" resizing):

A zoom x2 to see more clearly the difference:

Any idea why chrome does that, and how to repair it?

(note that I use .Avatar img { object-fit: cover; } on thumbnails, maybe it plays a role)

EDIT: arf, testing without the object-fit: cover; the problem is not there anymore. So it's on my side. Still, if someone as an idea how to fix that, I'm interested!

EDIT2 (2022/11/21) :

Found the solution. To keep the image in correct ratio without getting pixelated in Chrome, replace .Avatar img { object-fit: cover; } with this (same result, but no pixelated problem anymore):

.Avatar img {
    width: auto;
}

.Avatar.DiscussionListItem-thumbnail {
    width: var(--size);
    overflow: hidden;
}

« Previous Page Next Page »