Topic List Previews


(David Kingham) #273

Would it be possible to get some guidance on how to translate this How to increase avatars size on Latest without making them blurred to make the avatars larger in the tiles view without being blurry? I’ve been trying for hours but my knowledge is a bit too limited.


#274

Hi David,

This is the plugin template code. Very similar but differs in the image size it retrieves:

{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" imageSize="small"}}

Not sure if you could override (the override) in a Theme component …

Because of the use case, image size is requested as small. If you try to enlarge these in CSS they will surely look blurry.

Sure, you could update the plugin to request a larger size. However, there is risk of formatting issues for long Topics if we were to change this to a larger size and in any case the tiles are very constrained by space, so you wouldn’t want to make this the default (although could hack it to reduce the larger avatars to smaller size but that would increase browser load).

The only other option is to make this a configurable option. I’ve added it to github as an enhancement request. Happy to consider that effort if sponsored.


(David Kingham) #275

Thank you! I’m looking to do this in order to increase the size of only the first avatar for the original poster, which I have already done and the formatting is working fine so far, I just need to retrieve the larger avatar so it’s not fuzzy. The template code looks to be the same, the only part I’m still struggling with is what class to target, instead of <td class='posters'> what do I target in tiles?


#276

Like any HTML just simply right click the item you are interested in on a desktop browser and ‘inspect’ or ‘inspect element’ and that will show you the div structure and the classes involved. The div class is topic-users

You can’t get away from the fact that the source png images are small though unless there is more fundamental change.


(Per Torstensson) #277

Thank you for great and super useful additions @merefield!

Since the removal of social, I fail to understand how to set the tiles to one column – Could you please instruct?


#278

By restricting browser width.

Neither Social or Tiles really made sense full width on desktop unless you added additional columns of them.

What device are you concerned with though? There may be cases, especially on mobile, where two columns are showing which should be one. I recently deployed a fix for iPhone Plus models because it wasn’t appropriate to display two columns in portrait on those devices.


(Per Torstensson) #279

My concern is related to full desktop view – I am using a sidebar, with which a single column Social worked perfectly. Now, it doesn’t look as good on this particular site… Would be awesome if was possible to set max columns somehow, i.e. 3, 2 or 1.


#280

Got you. I have that exact same setup on one of my websites. It has a large sidebar. I’ve stripped out the media queries and added JavaScript to cope with that situation. That required a fork as over-riding the media queries in a Theme is not straightforward.

CSS unfortunately doesn’t support ‘element queries’ yet which would solve that problem by measuring the available width for the tiles section instead of measuring the entire browser width, but I’ve been meaning to try out a JavaScript library to fake them.

Do you have a GitHub account where you can fork the repo? Then you have full control over the CSS which is all you’d have to change. I can share my JavaScript hack.

This used to ship without prescriptive media queries. If there is enough interest I can delete them and require the user to add them in a Theme Component. That makes it harder for less expert users to use Tiles out of the box though.


(Luka Renko) #281

On my forum, thumbnail previews for YouTube videos get moved to tombstone after couple of days and this causes 404 requests on non-existing previews.

Example:
If you get this page Pojalabanda.com, there will be one request which will return 404.

If you check for image in tombstone, it exists. Also, if you open specific topic, it will have all images of YoutTube videos.

If I run “Regenerate HTML” on first post in topic, new preview image is created and is then shown for several days, until it is again moved to tombstone. This seems to be the case for all preview images of YouTube videos.

Any idea why preview thumbnails would be moved to tombstone?


#282

This is only affecting YouTube video thumbnails and no other? Are you able to switch hotlinking on til the issue can be identified?


(Per Torstensson) #283

Aha, I see… but couldn’t one solution be to add setting for maximum number of allowed columns (i.e. 3, 2 or 1) – a setting which could decide which CSS for media queries is valid, and would be honored regardless of screen size/device?

Anyhow, I am definitely interested in a solution to this and would highly appreciate any help I can get and I have no issues with “maintaining” my own fork in order to achieve a solution :slight_smile:


#284

Of course I’d rather you didn’t have to. It’s an issue that’s been bugging me. I’ll have a play around and see whether I can improve the out of the box flexibility.


(Mittineague) #285

Maybe you could use getComputedStyle() somehow?

It looks to have good browser support (except for Opera Mini on psuedo-elements)
https://caniuse.com/#feat=getcomputedstyle


(Luka Renko) #286

Yes, it is only for YouTube videos - regular images never disappear.
Currently I just do Regenerate HTML on problematic topic, to get preview back - this is fine for me as we only have couple YT topics and forum is still small.


#287

I’ve just spent some time integrating a javascript library which simulates element queries and have an experimental build you can try which is on a branch of my fork.

It is more responsive and now takes into account sidebars, even when they themselves appear and disappear. It is not configurable, but with normal browser width will produce a more sensible 2 columns with a largish sidebar, instead of having 3 crammed together. Shrink the available width, by increasing the size of the sidebar(s) or narrowing the browser, and this will drop to 1 column.

If you would like to test this, you could replace the normal plugin clone command in app.yml with this:

git clone https://github.com/merefield/discourse-topic-previews -b "element_queries"

It is otherwise identical to the master build. You may find it a bit less robust though as there are so many tricks going on here. It doesn’t seem to cope very well when the sidebar just appears or just disappears (workaround: just manually resize the browser a tiny bit more).

If you are interested, here’s the library:


#288

Not sure how that would help, can you elaborate?


#289

That is very odd! I’ll discuss with @angus who knows that part of the code better than I. Thanks for your patience.


(Mittineague) #290

Ideally, different CSS for different breakpoints would be preferred. But if for some reason that might not work (eg. another theme changing the layout) I was thinking JavaScript might provide a solution. eg. (in pseudocode)

mycontainer = querySelector('mycontainer'); 
myleftcolumn = querySelector('myleftcolumn'); 
myrightcolumn = querySelector('myrightcolumn'); 
mycontainerwidth = getComputedStyle(mycontainer); 
if (mycontainerwidth < OKwidth) { 
// example only, likely not what would be needed
  myleftcolumn.style.display = block; 
  myrightcolumn.style.display = block; 

#291

Yeah, we have the benefit of jQuery though.

My existing ‘hack’ is javascript which switches class based on width when window is resized, but I prefer the elegance of an ‘element query’. Looking forward to the day that becomes native, because almost all these tack-on solutions are a little ‘glitchy’ :cloud_with_lightning: :smiley:

Javascript & CSS
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
        var primaryDiv = $(".tiles-grid");
        primaryDiv.find(".tiles-grid-item").removeClass("widthforone").addClass("widthfortwo");
        primaryDiv.masonry();
});
$(window).on({
    resize:function() {
       var primaryDiv = $(".tiles-grid");
       var primaryWidth = primaryDiv.width();

       if(primaryWidth < 500){
           primaryDiv.find(".tiles-grid-item").removeClass("widthfortwo").addClass("widthforone");
       } else {
           primaryDiv.find(".tiles-grid-item").removeClass("widthforone").addClass("widthfortwo");
       }
    }
}) ;
</script>

with CSS:

.widthfortwo {
    width: calc((100% - 6px)/2);
}

.widthforone {
    width: 100%;
}

NB this is the hack prior to adding the element query library … it’s not used in the new branch.

NB#2 this won’t work with the current build as you have to remove the media queries. You need to fork the plugin to use the above.


(Luka Renko) #292

On my forum Pojalabanda.com, latest view on tablet (Huawei Mediapad M5 8.4") is broken, as it puts category sometimes on right and sometimes correctly on left under topic name.
Screenshot_20190312-142912

I tried with default Light theme as well as Materialize theme - same result. No problem on desktop or mobile phone (Pixel 2 XL).
meta.discourse.org looks OK on same device.

Any idea what could cause this?