This is a CSS issue. I have not tried this out, but you can use this as a basic idea. There are different ways to do this. This is just a quick stab at a possible solution for you, to get you down the road. You’ll need to adjust based on your desired cell size and how and where you’re placing this grid in your theme.
If you are not using FIrefox with FIrebug Add-on, you will want to do so. It will make it a lot easier to tweak your CSS.
In your site-wide.css:
div.cells {
width: 50px;
float:left;
padding: 2px;
}
In your theme:
<div class="cells">1st user avatar</div>
<div class="cells">2nd user avatar</div>
<div class="cells">3rd user avatar</div>
<div class="clear"></div>
<div class="cells">4th user avatar</div>
<div class="cells">5th user avatar</div>
<div class="cells">6th user avatar</div>
<div class="clear"></div>
<div class="cells">7th user avatar</div>
<div class="cells">8th user avatar</div>
<div class="cells">9th user avatar!</div>
You’ll need to mess around with the padding and figure out how you want to position each avatar within its cell.
Also, instead of hard coding the grid dimensions within your theme, you could use a looping structure, allowing you more flexibility in setting the grid dimensions. For example, you could easily change the grid from a 3×3 dimension to a 4×8. The next day, switch it to 6×6. You could change the size automatically based on certain parameters.
Hi Jeff! Thanks a lot for the detailed examples. I do have Firebug – its a helpful tool
The problem here is how to tell the code to generate the stuff so that the output is in a grid or table-cell pattern. The rest can be then done with css.
Usually the admin interface for many cms has option to define the elements in a block on one of the chosen ways : list, grid etc. Here we do not have that. So css only probably can’t help.
The relevant code is
<div class="avatar-block">
<?php foreach ( (array) $users['users'] as $user ) : ?>
<div class="item-avatar">
user_id) ?>" title="<?php bp_fetch_user_fullname( $user->user_id, true ) ?>"><?php echo bp_core_get_avatar( $user->user_id, 1 ) ?>
</div>
<?php endforeach; ?>
Question is how I tweak the code so that the output is in table-row-column or cell form or grid form ?
I tried with the following.
This gives a row but not grid.
<div class="avatar-block"><table><tr>
<?php foreach ( (array) $users['users'] as $user ) : ?>
<td><div class="item-avatar">
user_id) ?>" title="<?php bp_fetch_user_fullname( $user->user_id, true ) ?>"><?php echo bp_core_get_avatar( $user->user_id, 1 ) ?>
</div></td>
<?php endforeach; ?></tr></table>
I’d really like to do this as well. Anyone had luck turning the Who’s Online Avatars into a grid of say 3×3, or even creating slightly smaller icons, a-la ning?
I’d like to display a 4×3 grid of members on my front page. I found what I believe to be the necessary code here: https://codex.buddypress.org/developer-docs/custom-buddypress-loops/the-members-loop/
My problem is I don’t know where to put that code. Can anyone help me out?
