FriendsOfFlarum Discussion Thumbnail

FriendsOfFlarum

Discussion Thumbnail by FriendsOfFlarum

Replace author avatars with the first image in a discussion's starting post. By itself, the extension just replaces the avatar with the discussion image - however, with CSS magic, this can become very powerful 🙂.

Images are loaded when the discussion item comes into view, and a spinner is shown until it has completed loading.

Installation

Use Bazaar or install manually with composer:

composer require fof/discussion-thumbnail:"*"

Updating

composer update fof/discussion-thumbnail

Links

An extension by FriendsOfFlarum.

nitaaikumar

FriendsOfFlarum [InvalidArgumentException] Could not find a version of package fof/discussion-thumbnail matching your minimum-stability (beta). Require it with an explicit version constraint allowing its desired stability. I have the 0.1.0-beta.11.1. Anyone else getting same error?

nitaaikumar

It got installed now and has really made my Flarum very attractice and beautiful. I changed the size of the discussion list avatars to 80x50 and they look so lovely on all devices. Now my flarum home page looks like a mobile blog theme like yahoo.com, which is exactly what I wanted. Especially the lazy loading of the images as we scroll down in the discussion list works so smoothly, just excellent. Thanks so much FriendsOfFlarum

nitaaikumar

Thanks so much. Will try and let you know.

datitisev

nitaaikumar Oops, looks like the version I tagged never got pushed. Try again, should work now.

[deleted]

Can confirm - works as described 😄
Thank you, @datitisev

fladis

nitaaikumar Hi, could you please share the link of your forum? I'd like to see how attractive and beautiful it is.

nfr472xb

thaks for your work ,i love this plugin

just a suggest,the plugin will load orign image i think if it can generate thumbnail is better

datitisev

nfr472xb This was a suggestion made by @nitaaikumar as well. However, I didn't want to have to make a system that would resize remote images and save thumbnails to the disk - that could take up a lot of space very quickly and could cause unintended consequences in terms of load, etc... so I decided to use lazy loading instead.

RecepBilgin

Many thanks for the extension. Clicking on the discussion thumbnail goes to the user profile. How can we do this as a link to discussion?

datitisev

RecepBilgin That is true, I did not think about that. I'll probably add an option to also toggle showing user avatars when no image exists and/or linking to discussion or user.

n512

RecepBilgin

Hi !

If you want, you can do it with some CSS (I also made the thumbnails a little bigger) :

.DiscussionListItem-author{
    margin-left: -95px;
    pointer-events: none;
    margin-left: 0px;
}

.DiscussionListItem-author .Avatar {
    width: 82px;
    height: 82px;
    border-radius: 7px;
    line-height: 82px;
    object-fit: cover;
    background-color: transparent;

}

.DiscussionListItem-content {
    padding-left: 10px;
    margin-bottom: 10px;
    padding-right: 50px;
    border-top:1px solid #EEE
}

.DiscussionListItem-main {
    margin-left: -82px;
    padding-left: 92px;
    padding-bottom: 50px;
}

ikramy

RecepBilgin I was able to get over this using the following solution https://discuss.flarum.org/d/26248-remove-the-link-to-the-user-profile-from-the-main-discussions-page

RecepBilgin

datitisev Hello again, I wonder when the update is published?

RecepBilgin

thank you so much. I'll be happy to offer this update as soon as possible 🙂

datitisev

RecepBilgin I haven't worked on it, and cannot offer a time frame of when this change will be implemented, I apologize.

tuilagio

I really love this plugin however the loading time is really a concern for me. See my github issue: FriendsOfFlarum/discussion-thumbnail1

there is a problem: Loading image really slow if embed image used in post (first image, ofc).

This raises (imho) a few solutions:

Auto download and cache (first) image if they are not saved in server. Problem: copyright?

Create other extension: Allow user choose image for their post to use as post-thumbnail (replace user 's avatar). This photo will be explicit download locally.

huuduy216

DanielOX You can do it with the CSS below. Thanks to @n512

n512 .DiscussionListItem-author{
margin-left: -95px;
pointer-events: none;
margin-left: 0px;
}

.DiscussionListItem-author .Avatar {
width: 82px;
height: 82px;
border-radius: 7px;
line-height: 82px;
object-fit: cover;
background-color: transparent;

}

.DiscussionListItem-content {
padding-left: 10px;
margin-bottom: 10px;
padding-right: 50px;
border-top:1px solid #EEE
}

.DiscussionListItem-main {
margin-left: -82px;
padding-left: 92px;
padding-bottom: 50px;
}

There other UI changes in there as well, but I think the most important one is pointer-events: none;

fakruzaruret

is there a demo?

datitisev

fakruzaruret There's a GIF that shows it in the first post.

TOWUK

datitisev on my forum dont work this ext (latest flarum)

clarkwinkelmann

TOWUK what happens? Please describe the problem

I don't think this extension has any user-facing setting. The first image from the post is automatically used.

datitisev

clarkwinkelmann The first image from the post is automatically used.

That is correct.

TOWUK

clarkwinkelmann yes, i dont know how change thumbnail, not button "change thumbnail" etc