User Selectable Layouts

[hnla]

Prompted by our chat in bp slack yesterday: https://wordpress.slack.com/archives/buddypress/p1467917123003010

There is a desire to be able to let users(admins) select what style of layout might be applied to elements such as bp lists ( members directory entries as a good example).

We have a customizer instance running now for bp-nouveau so have the means to provide the user options.

In the past I have built dashboard option screens to provide simple bool selections to check and create classes or functions, template tags based on the values for use around a site screens.

Recently I built the BP Styles Modules mini project and in that as an example module I added one to re-factor members loops into a grid pattern.

We could implement something(tester) as follows:

1/ Implement cust section 'Layouts' in there a 'Grid' selection and choices to match to 'members' groups', blogs' etc selecting one of those would be used to create a class function generating 'members-grid grid' or an empty value if false. A further selection might be added to set how many items spanned the width 2, 3, 4, etc or simply allow fluid grid.

2/ Having added the class function to the bp list loop at a suitable parent level (it's UL or div above that) we now have something to target styles to.

3/ We create a new stylefile or partial that covers 'layouts' ( we can easily add this into an appropriate section) in that file are described classes/rulesets to cover various layout styles, much of that I have already so we can implement something fairly rapidly for demonstration.

[imath]

The members loop is looking pretty nice really nice! Let's do it for members/groups and sites.

I don't think we should do it for the activity directory.

One thing to consider is how the switch is done between 1, 2 or 3 columns. The customizer will store an option. And we'll need to add the rulesets or token only if the default value (1) is not used. If it's a token we'll probably to edit the loop. And looking at the members i think it's probably the easiest way as for 3 columns, the full width avatar should be used.

[BoweFrankema]

I've implemented this functionality for a BuddyPress theme. I'd be happy to share my code/theme if that might be useful?

[imath]

@BoweFrankema Sure! You can even pull a request, if you wish ;)

[hnla]

@imath I guess one column is a non or null value we don't account for it other than saying it's 'false', '0' in terms of the options settings value, the user has made no selection and this is default value then when we fetch option values we won't add to our class function:

$grid_class = ''; $grid_layout = get_option('grid_layout'); if( 'grid2' == $grid_layout) : $grid_class = ' grid two'; else: $grid_class = ' grid three'; endif;

Or similar. Basic idea though. selecting any option must mean user wants grid so we really just need to know what number of rows then we can build class as above. 'grid' exists as parent class and defines the main rules the 'two', 'three' exist to simply add nth-child rules.

As you say though I haven't used this sort of layout for activity stream as it's not really that suited , activity is best flowed as a running list.

The classes are not attached so they can work for any suitable ul/li construct. Try on your local adding 'grid three' to your ul groups loop ul it should lay the li elements out as a grid, and /or changing the members class I hardcoded from two to three.

This is also but one approach, but is essentially the approach we should use to providing user layout options, it's relatively simple to implement and lightweight in terms of rulesets.

I have added the rules to a partial file included/compiled in to the main sheet as the overhead is negligible, alternatively - I don't advise - but we could keep this sheet separate and enqueue based on an options check but frankly the sheet would hold probably many classes like this, would be hard to know what option check to use as it would include rules not used and performance gains

[imath]

Thanks for the explanations @hnla I'm going to add some sections to the Template pack customizer panel based on them.

[hnla]

And obviously we change our list loops to look like: <ul id="members-list" class="item-list members-list bp-list <?php echo $grid_class; ?>">

The one var `$grid_class' will serve any of the loops or can serve any of the loops if we run a check on component or we could just say selection of the grid option/s affects all three main loops.

[imath]

That's what i've began to do :)

imath. http://profiles.wordpress.org/imath/

Le 11 juil. 2016 à 14:43, Hugo - hnla notifications@github.com a écrit :

And obviously we change our list loops to look like:

The one var `$grid_class' will serve any of the loops or can serve any of the loops if we run a check on component or we could just say selection of the grid option/s affects all three main loops. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[imath]

So the customizer parts is committed, @hnla i think you'll need to do some css adjustments for the groups and blogs loop.

This was a bit more complicated than i thought. But i think it's a really nice thing to have. Here's a preview:

[hnla]

? That's an odd styling view you have there, not like mine sort of looks like your picking up styles from somewhere forcing text larger what theme is that?

I'm sure the other loops would need attention to styling, this initially is to set up the process and classes to add the ability to grid up elements, the detail styling of the inner elements comes later.

[imath]

@hnla it's TwentySixteen, no other styling than what we have.

[hnla]

yep thought so - the 'Funereal Theme', black border gave it away :) Fifteen looks better cos that's the one I'm immediately working in and styling to :) . Guess this brings the question of companion styles back into focus and what it's actually possible to style for in a generic sense that suits the many as opposed to the one.

I'll take a look at sixteen and the other themes but for purposes of screenies can we take them from fifteen or one of the others, never thought sixteen suited BP that well and the black border is off-putting!