Blog Documentation Book a Demo
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Masonry/ "Best of..."-style view on all categories

egroegegroeg New
in Vanilla 3.x Help

Hi there,

was wondering, how to set up something like the "Best of..." view in this very forum. (Dug up this older thread but seems like the user had a different question or is just inactive now.)

  1. Is this some hidden function in vanilla or is it CSS/JS only? (couldn't find a plug in either)
  2. Would it be possible to turn any category into a view like this? (not based on ratings but based on date)

As a side note: I am not a web developer and have limited CSS skills (JS close to none). 😬


thanks,

g

Comments

  • K17K17 ✭✭✭

    Hi ^^

    The Best Of option you see here is the one that comes with Vanilla Cloud only, not the open source one.

    But, you can find an addon called "YAGA" that mimics this feature for Vanilla Open Source. The up-to-date one is seen at https://vanillaskins.com/plugins.html#yaga (the one available on vanillaforums.com will not work correctly in 3.3)

  • egroegegroeg New

    thanks @K17 for the info. I am actually using the YAGA plugin already. unfortunatelly i can only access said "best of" page. I was hoping for a way to get a list of any category/ tag page in that same masonry view. but that's not possible, correct? (the hosted service of vanilla with almost 700$/month is sadly not an option for us.)

    is there a way to change how post lists are displayed in general? would like to see the content including posted media of the first post in the list.


    thanks

  • R_JR_J Admin

    That's no function of the hosted version either.

    You can format lists any way you want with css. Showing discussion information on list pages needs a plugin. Both requirements shouldn't be too complicated. The problem would be to show images in a special way. If you can forget about that, the solution is quite simple. Do you have a custom theme? I think it would best fit there.

    If not, I threw together a quick plugin. As always the css could be improved, I'd say.

    https://github.com/R-J/masonry

    Please give feedback and I will consider uploading it here to the addons section.

  • egroegegroeg New

    I threw together a quick plugin

    thanks @R_J this is great! probably have mentioned this before, but u r a rockstar. 🤟😁

    works like a charm. am using the Keystone theme with a few CSS tweaks.


    Regarding feedback for a plugin upload:

    1. Would it be possible to limit the length of the listed post (e.g. with button "more"?) as done in "Best of" of the hosted version?
    2. Would it be possible to add a "Comments" link, in case comments were posted?
    3. The plugin could mention that CSS-only masonry is sorted top to bottom not left to right. Not a big issue for me currently, but could be a problem in other situations?
    4. CSS: the first post's border-radius-top is overwritten by the theme. Just added !important to your CSS
    5. CSS: added a media query to your CSS for the mobile version
    @media only screen and (min-width: 800px) {
   .DataList.Discussions {
      column-count: 3;
   }
}


    Thanks again. Above are only nice-to-have suggestions. But the current version works fine already.

  • R_JR_J Admin
    1. Should be possible, not sure right now how difficult it would be though. I need to do some investigations on that. I think bluring the content after X pixels should be quite easy though.
    2. If 1. can be easily done, it would be trivial to add that request, too.
    3. Well, I disagree. If I see a layout in columns where each item is of a different length, I naturally expect that it is from top to bottom. If it would be from left to right, how should you determine the order for items that are not aligned any more?
    4. I hate !important. Could it be that you have styled those borders somewhere else? For me that above CSS works with Keystone theme
    5. That's interesting! I haven't tried it on mobile. There is a key in the addon.json "mobileFriendly": false which should make Vanilla ignore that plugin when page is viewed from mobile. Obviously that doesn't work anymore...

    Do you have a GitHub account and can you create a pull request for the media query change?

  • egroegegroeg New

    1 - bluring content or just cut it off after x lines/symbols as know of other CMS excerpt function?

    2 - nice

    3 - yeah, it can work either way, I guess. but it's just convenient on pages where old posts/images should appear at the bottom and new ones at the top. e.g. on this portfolio page where old projects should not appear second in line at the top. Got this example from https://masonry.desandro.com/ which seems like a nice library(?).

    4 - yes, apparently there is an entry in _lists.scss (/themes/keystone/design/custom_dark.css?v=1.0.0) according to the Firefox inspector. but I have no idea how to edit those css files. 

    .DataList .Item:first-child, .MessageList .Item:first-child {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

    Do you have a GitHub account and can you create a pull request for the media query change?

    ...have an account but have no idea how GitHub works or a "pull request". 🙈

  • R_JR_J Admin

    4. Never change css like : overwrite your own rules. YOu can either use plugin CSSEdit pockets plugin insert custom css rules. In css, selector has to be "overwritten", which in the end means you simply have to use the same selector in your css and you css has to be applied after that rule. Look here (I've changed it in the css in my repo):

    If you have changed any css already in the Keystone theme folder, I strongly advice to put those changes into the CSSEdit plugin.

    2. That Comments button has been easy.

    1. Cutting off is not as easy as it sounds: it would mean cutting off html which is not trivial when cutting of is right behind some opened and unclosed tags. Simply not showing content is easy, too. Having some switch to reveal it is far more complicated. I would need to have something that determines if content is hidden or not. Implementing that would require advanced JavaScript I guess.


    The beauty of such a plugin for me has been its simplicity. With the requirement to expand content its complexity grows. Not sure if I implement that. In my opinion reading a discussion in that format isn't fun at all. A user should know already if he is interested in visiting that discussion

  • egroegegroeg New
    edited May 2020

    4 - ah, got it. next fix will be through CSSEdit. :)

    EDIT: btw. the last-child needs to be in there too. sorry, didn't see that before.


    2 - kool! updated the plugin. thanks.

    but seems like the comments link is not working for me?

    the button links to /discussion/comment/#Comment_(the ID is missing, right?)

    but Vanilla uses the following for permanent links, i think? /discussion/comment/123/#Comment_123

  • R_JR_J Admin

    I've added a css rule for the last-child. But I don't like that dark sub theme, therefore I have to confess that I haven't tested this combination.

    Yes, I was too hasty with that comment links. I've fixed that

Sign In or Register to comment.