getRelated: automatically listing related Resources for Revolution

Make sure to allow for margins and padding in your width calculations.

Quote from: d_u_n. at Jun 04, 2013, 02:32 AM

So, if my ul is called getrelated, then the css would look something like this, right?

ul.getrelated li {width:40%;}

So...simple?

Yes, something along those lines. As sotwell mentioned though, you'll need to take into account your padding and margins if you're not setting box-sizing: border-box on those items.

The alternative would be to use column-count and column-gap, something like so:



But remember that IE9 and lower don't support that property so you'll not get the column effect on older browsers.

Quote from: pdincubus at Jun 04, 2013, 07:44 AM

Quote from: d_u_n. at Jun 04, 2013, 02:32 AM

So, if my ul is called getrelated, then the css would look something like this, right?

ul.getrelated li {width:40%;}

So...simple?

Yes, something along those lines. As sotwell mentioned though, you'll need to take into account your padding and margins if you're not setting box-sizing: border-box on those items.

The alternative would be to use column-count and column-gap, something like so:

ul.getrelated {
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
       column-count: 2;
       column-gap: 20px;
}

But remember that IE9 and lower don't support that property so you'll not get the column effect on older browsers.

Ok, its done! I didn't want to do it the fancier way as I need support for IE.

All I did was this:

ul.getrelated li {
float:left;
display:inline;
width:35%;}

And that's it! Easy as pie right! {Even though I felt completely stumped at first}

Thank you sotwell and especially pdincubus for pointing me in the right direction! I am not ready to offer 8 results in two columns from getrelated to my website visitors!

Ok now that I am pretty much done I want to put up my call and templates in case it helps others.

The templates for the chunks I used started out directly from the getrelated documentation page (http://rtfm.modx.com/display/ADDON/getRelated), which was really convenient, but the call I had to cobble from some different sources, mostly this thread.

My html and call are:



The div is perhaps unnecessary but I wanted to be able to style it. But actually most of the styling comes from the ul class rather than the div. I hope I am targeting the right info from my pages, as we focus on the long title generally.

I changed some values in the snippet itself instead of modifying them in the call, for instance I set the limit to 6 in the snippet directly rather than adding a value in the call of &limit. And I learned that you definitely need a ? after getRelated, or none of the properties specified afterwards will be followed.

Here are my final chunks:

outer:



Silly to use the h6 here for a custom title, but I will change it later.

row:



Here, I didn't want the title and long title appearing in the links, as I wanted the links to be short and sweet, so I cut some of the default template code out.

Finally, my glorious css:



The div is now centered in the containing div, and the li's are short enough to allow for two columns, but if the title is too long, then things will look less than beautiful, so I have been editing titles today.

Still got one issue, before I was able to put a border around the whole thing, but later I couldn't, I think its related to the display:inline and display:block lines, but that's a minor thing that I may or may not fix.

Another minor point, the documentation says that the default templates are in assets/components, but they aren't there in my install (Revo version 2.2.7). This seemed to be a problem at first, but once I specified my own templates, the defaults were gone and there was no need to mess with them.

Ok, I am off to implement this! Thanks to Mark and everyone who helped!

The default templates are in core/components/getrelated/elements/chunks/

Quote from: sottwell at Jun 07, 2013, 05:37 AM

The default templates are in core/components/getrelated/elements/chunks/

Ah I was not distinguishing between the assets/components in the modx manager and the core/components in the server.

I installed it and poked around, and I cheated because I've had experience poking around for this kind of thing in other add-ons

Ha yeah whereas for me the ftp server can only be accessed by the high priests of tech :-p

Quote from: markh at Dec 13, 2011, 12:50 PM

Hi createit, thanks for posting that! I'll take it for a spin and see if I can incorporate that in the actual package for the next version. Perhaps we can also get someone to contribute something that works for Japanese and also add that.

Thanks!

Hi, there is a problem with Polish language when using TVs.



I had to comment line with "createit" solution to get it work in Polish, so IMHO the next getRelated update should include my changed code or has multilingual preg_replace that just works.

Quote from: godzio at Jul 30, 2013, 02:44 PM

...
I had to comment line with "createit" solution to get it work in Polish, so IMHO the next getRelated update should include my changed code or has multilingual preg_replace that just works.

I would love to include a multilingual preg_replace that just works, but simply don't have the experience with countries/languages that use non-latin characters to know all the valid characters. Would you happen to have a preg_replace that just works that you can send over in a pull request on github?