Topic List Previews

Do you know if it would be possible to create something similar for those that have Discourse host their site? That is not a plugin, but a Component?

Probably not, as the thumbnail creation and delivery requires back-end processing changes, so changes to Ruby code. Iirc that’s not possible with a Theme component.

Finally (phew!), big PR merge this morning! (a nice round ‘#50’ … how appropriate!):

Tiles Improvements:

  • Makes standard a 3/2/1 column arrangement which responds to width

  • New settings for gutter @lmy and transition time @bartv (set transition time to zero for no animation, this is forced on mobile)

  • AND … support for mobile!

https://github.com/angusmcleod/discourse-topic-previews/commit/7558bbee126cdcb51dcaf29a27bd7ac58923888a

Known issues

  • This version forces a 3/2/1 column appearance depending on view width. It may clash with your custom CSS. Suggest removing those elements in your local theme which change column number behaviour. This was done to avoid less experienced users having to mess with the CSS to get a more responsive view and to fix the logged out view. btw, Chrome doesn’t seem to allow the browser width to get small enough to dive into 1 column mode (Firefox is fine).

  • I’m not happy with the new post badges positions at the moment and intend to refine that at some stage.

  • On mobile: currently as the new tiles are rendered before being put into place by Masonry, the view can appear to momentarily ‘glitch’. This is most likely down to how much ‘grunt’ a mobile browser has versus desktop and how much processing power it is given to maximise battery life … i’m going to take a look at potential for some tricks to hide this.

  • On mobile: individual Categories are not yet supported.

  • Tiles view is always best with hot-linking on, however this setting temporarily prevents featured images being updated. If you have a new featured image, briefly switch this off, rebuild the HTML of the affected post and once complete, reactivate hot-linking.

Let me know if you find any more.

And there’s more …

Box shadows, highlighting with hover and ‘button click’ behaviour of a tile are not standard but left to the Theme designer. For your interest, here’s my local CSS to enhance the look of the tiles:

.grid-item {
    box-shadow: 3px 3px 3px 3px #888888;
}

.grid-item:hover {
    background-color: darken($secondary, 3%);
    lighten: ($primary, 70%);
}

.grid-item:active {
    -webkit-transform: translateY(+2px);
    -ms-transform: translateY(+2px);
    transform: translateY(+2px);
    -webkit-transform: translateX(+2px);
    -ms-transform: translateX(+2px);
    transform: translateX(+2px);
    box-shadow: 1px 1px 1px 1px #888888;
}

.topic-details .topic-excerpt {
    max-height: 300px;
}

NB Social view and Tiles view will be merged!

My next job is to simplify the plugin slightly. Now we have a mobile version of Tiles that can support a single column view, the next step is to simplify things by removing ‘social’ view in place of ‘tiles’. I anticipate this may take a couple of weeks. Feel free to let me know if you have any concerns.

7 Likes

Please note there’s been a PR merge and a new version of TLP is available.

This is mainly a maintenance release which does a three main things:

  • Removes ‘Social’ view. Now there’s a responsive ‘Tiles’ view which can be reduced to one column by simply reducing the available width and which also leverages the same meta-data. ‘Tiles’ also now works on mobile. There was not much point maintaining both.
  • Removes a load of jQuery hacking that was used to switch the Social to Tiles format, so the code is now ‘cleaner’ and slightly easier to maintain.
  • Updates the CSS to avoid collision with core naming but temporarily this may break your theme, apologies:
    • grid becomes tiles-grid
    • grid-item now becomes tiles-grid-item
    • grid-sizer now becomes tiles-grid-sizer
    • gutter-sizer now becomes tiles-gutter-sizer
    • I think you get the idea :wink:

The PR also sneaked in a tweak to post badges moving them next to the title so look much better and more logical

Thanks to @angus for his time spent checking the PR

Next up, a feature PR!

5 Likes

Yay, new feature: “Featured Tiles”!

Pleased to announce a new feature for tiles view which takes advantage of the existing ‘featured’ system (and masonry).

If you enable this setting, all tiles tagged with the selected featured tags will appear up to four times as big taking up two columns, instead of one. It is enabled by default, so if you don’t like it, feel free to turn it off or simply remove your chosen featured tags from the tiles you wish to keep a normal size.

image

Remember, that it will take the specific tags from this setting:

image

You can list more than one tag in this setting and it will feature the tile if the Topic has at least one of these tags. Simples!

Remember you need to have enabled ‘tiles’ for that discovery list:

image

Please be aware that masonry does its best to lay things out, but sometimes small gaps will be necessary. The feature is currently only enabled on desktop/tablet.

Enjoy!

Donations for the ongoing support of this plugin are very much appreciated (Select Topic List Previews). If you have an account on Angus’ site you automatically get displayed as a backer. Thanks for your consideration.

Known issues and enhancement requests are up-to-date on the repo.

https://github.com/angusmcleod/discourse-topic-previews/pull/67

@robotnjik, @shiva, @angus

10 Likes

A new tiles ‘renderer’

Guys, I’ve not been 100% happy with the use of masonry for the tiling system in tiles view. There’s various glitches, challenges with media queries, an inability to theme how many columns you want (but see this post) and A LOT of javascript involved, so whilst I was looking for a way of accommodating sidebars out-of-the-box, I decided to try out a technique I read about in a blog post a while back:

I’ve now coded this into an experimental version of this plugin. I have it running on two sites at the moment and it seems fairly stable.

If you’d like to try out the new renderer and let me know what you think, change your app.yml and replace the existing TLP clone command with this:

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

Admin control over number of columns

This was always a challenge with Masonry and I never quite cracked it so you could Theme customisations locally in a way that allowed a default behaviour out-of-the-box for novices, that more expert admins could override.

This version will render three columns out of the box, reduced to 2 columns if you have a reasonably sized side-bar.

But this version gives you more control:

If you add this CSS in your Theme, it will render only one with a sidebar:

.tiles-grid-item {
   grid-column-end: span 2;
}

If you have no sidebar and want only one column you can experiment with increasing that span to 3.

3 Likes

Yay, new feature: Thumbnails that retain aspect ratio!

Pleased to announce a new feature (intended mainly for tiles view) which optionally allows you to render thumbnails that retain their original aspect ratio.

Who’s it for?

The feature is mainly intended for those running TLP tiles on image heavy sites, especially those sites who’s users tend to upload large images to Topics, rather than one-box. Using thumbnails speeds up time-to-interactive and can considerably reduce network load. I’ve halved the time it takes to load one of my sites with this.

Background

Up until today you had to hotlink all images to retain aspect ratio in TLP. This new feature will allow you to render and store un-cropped, undistorted thumbnails locally and avoid hotlinking to the originals and may provide a significant performance benefit. It should be particularly useful for image heavy sites. It should make Tiles view more viable for more sites now.

How to use it

With the update you will now have the option to pick just the thumbnail width resolution and height will be calculated for you if you set it to zero, thereby maintaining the aspect ratio. If you set both Width and Height to non-zero numbers, nothing changes to prior behaviour.

Like so:

This will create two thumbnails, one with width 200 for standard res displays and one with width 400 for retina displays. The height will depend on this and the original image’s width/height ratio.

Be sure to switch this off:

(Finally! :slight_smile: :sweat_smile:)

Now for the rebake

For the change to take effect for existing posts you need to ‘rebake’ them. You can rebake posts individually by selecting “Rebuild HTML” from the admin wrench control menu below the first post:

image

OR: you can rebake all or a subset of your posts using the console.

Thanks to @davidkingham for testing this. He’ll forgive me if I quote him:

“I’ve been playing around with different thumbnail widths and think 400 will be the sweet spot, 200 looks terrible on a phone. 600 would cover all screen sizes but the file size is still quite large.”. Given David’s (rather beautiful) photography forum is very image heavy indeed, this is pertinent advice.

Enjoy!

NB This will work on non-tiles views but I’m not sure the layout effect is desirable.

Donations for the ongoing support of this plugin are very much appreciated (Select Topic List Previews). If you have an account on Angus’ site you automatically get displayed as a backer. Thanks for your consideration.

Known issues and enhancement requests are up-to-date on the repo.

@angus @thwright

5 Likes

Is it possible for the generated thumbnails to use the s3_cdn_url setting if enabled?

1 Like

@angus

Thanks for good work

Can I set so that only users from a given group or above trust 2 lvl can use this function?
maybe just one line in the code is enough?

No you can’t differentiate between TLs of users and no such distinction is planned or afaia been requested before.

However you can enable it on specific Category routes that could be restricted by TL.

Is there any chance we could get support for the ‘unseen’ view? Simple Unread List Plugin (discourse-simple-unread)

1 Like

@merefield the single_tiles_column branch isn’t working anymore - is there a possible workaround to have a single column tile view?

1 Like

Hi David, that’s possible but requires an enhancement.

For now I’ve raised an enhancement request.

It’s a perfectly reasonable feature request that might be pushed up in priority by sponsorship.

2 Likes

As discussed offline, it doesn’t look like TLP is a source of the issue and it’s likely to be another plugin

That said, I’ve updated that branch (single_tiles_column) with the latest changes in master and checked that it runs briefly. Enjoy.

1 Like

Looks like this commit in core upset the formatting for tiles in TLP:

Specifically, this property was removed (together with the wiring to make it control the header visibility):

skipHeader: function() { return this.site.mobileView; }.property(),

@maja is there any way to restore this property and wiring as it was otherwise I may have to start overriding an additional .hbs file (which is always risky!), specifically:

  • assets/javascripts/discourse/templates/components/topic-list.hbs

and this change kind of removes some general plugin flexibility to control the header visibility in any case?

In the meantime, please do not upgrade if you use ‘tiles’ and tests-passed

Fix deployed

2 Likes

That should make it:

6 Likes

oh thanks a lot Joffrey! I didn’t want to impose on the core agenda, but this is very helpful, thank you!

with that change I’ve removed the added template, restoring things back to how they were:

1 Like

Hi @merefield,

great plugin, thanks for your work! How complicated would it be to bring the featured images to mobile? Is this already implemented, but just not styled yet? Or is it a more complex issue?

Thanks!

1 Like

Its an existing enhancement request

1 Like

Ah, cheers, perfect, then I would second that! :wink:

1 Like