Layouts Plugin

@angus :sweat_smile:

In the profile widget, the user’s avatar is displayed, on a regular screen, the natural dimensions for the image are 45px height and width.

I would like to show larger avatars in the widget. 96px.

I noted that on high resolution screens 135px (natural) avatars are loaded, so CSS tweaks are enough for high res screens. :grinning:

The same tweaks lead to blurry avatars on regular res screens. Since 45px is displayed at 96px. :sweat:

I tried to change the settings for avatar sizes in discourse to only allow 120px ones, no change even with new avatar uploads.

setting discourse avatar size to only allow avatars higher than 120px

Is the cutoff point for loading the 135px avatars part of the plugin or is it part of Discourse?

Would ot be possible to increase the resolution of the loaded avatars on all devices? (if it’s set by the plugin)

The thing to do in a scenario like this is follow the breadcrumbs in the code.

In the profile widget, there’s an avatar element, with the class avatar, which uses a function called avatarImg

h('div.avatar', avatarImg('large', {
 template: currentUser.get('avatar_template'),
 username: username
}))

It looks like the part that deals with size is the string large which is passed to the function as the first variable. If you look at the top of the file, that function is imported:

import { avatarImg } from 'discourse/widgets/post'

If you then go to discourse/widgets/post and find the avatarImg function, you’ll see that the first variable passed to it, wanted, is passed onto another function called translateSize.

If you look at the top of the file again, you’ll see that translateSize is imported from 'discourse/lib/utilities.

If you go to discourse/lib/utilities you’ll find that translateSize is what you’re after:

export function translateSize(size) {
  switch (size) {
    case 'tiny': return 20;
    case 'small': return 25;
    case 'medium': return 32;
    case 'large': return 45;
    case 'extra_large': return 60;
    case 'huge': return 120;
  }
  return size;
}

Like you say, the ‘large’ size the profile widget currently uses translates to 45 pixels. So you’ll want to change the 'large' we saw in the first function to 'huge', which will give you a 120px image.

4 Likes

This worked like magic. Thank you so much! :grin:

3 Likes

it is possible to create the topic page like it by sort from facebook button like ?

I’m not quite sure what you mean? Maybe show me what you mean with a screenshot / markup.

Hmn, just want to create somethink similar like mems site.There is always ranking of Top Week/Top Month/Top year most like pages/images by facebook button or similar social zone

Sorry, I’m still unclear about what you’re after. Maybe PM me some more details.

1 Like

I can use plugin layouts to format posts my website like this site or not.

To like this site.

Thank you.

What you’re after is better pursued through Topic List Previews itself, rather than Custom Layouts. I think @dalerka has used TLP to achieve a result similar to that.

1 Like

If you are trying to build a marketplace maybe it is better to search for another open-source solution I’m no expert here, so you’ll have to do your research based on your needs. Take a look at Sharetribe.

If you want to do it with Discourse you’ll have to invest a lot of time in customizing CSS, and maybe custom logic with JavaScript and Ruby.

Also for data-fields like $Price search here on meta for “custom fields

(just in case) you can hire someone like here:

For your other questions (not directly related to this plugin) creating a new topic might be better. :wink:

2 Likes

Thanks for the good advice.

1 Like

just did a web-interface upgrade. this may have blown up my forum. FYI.

1 Like

And removing the plugin and rebuilding fixed it.

1 Like

@8BIT My apologies. You should be good to go again now.

https://github.com/angusmcleod/discourse-layouts/commit/fb88287b001884b915ab24924f88eb40d3dda1a2

3 Likes

@angus
I installed the plugin.
Enabled it.
Went to plugin settings and then enabled left and right sidebars. Added routes like latest, topics, tags etc.
Went to categories -> settings -> enabled left and right sidebars for some routes there too.
I came back to the homepage, I can see that, it created space on the left and right side.
But nothing is showing up in the space. In other words, I can see the sidebar space for left and right sidebar but nothing is showing up there. Yes, I added stuffs there to be shown like latest, tags, topics etc.

Do you know what I might be doing wrong here?

You need some widgets. This plugin doesn’t come packaged with any widgets. A widget will typically live in a separate plugin. The selection of routes in the layouts_sidebar_left_enabled and layouts_sidebar_right_enabled settings determines where the sidebars appear, not what appears in them.

The first post gives a bit more detail on all of this, e.g.

3 Likes

Since the navigation widget link is 404, and your subsequent comment about using custom html widget instead, does it mean the navigation widget is gone for good? thanks.

No, it’s just been moved again, and subsumed into another plugin. If you’re interested in using it I can create a separate plugin. It’s basically just a wrapper for the map-widget in the locations plugin.

https://github.com/CivicallyHQ/civically-layout/blob/master/assets/javascripts/discourse/widgets/civically-navigation.js.es6

1 Like

Yes. Most interested. If I understand correctly, its a place to display the map for the category being displayed? And if there is no map in that category, just leave blank?

Thanks.