Group Menu
Resolved

Heres a neat way to create a module "menu" for your groups. check the attached GIF to see the effect.
Simply copy paste this code into a "sourcerer" or FLEXI CUSTOM module.

If you set the module to PUBLIC it shows all groups.
If you set the module to REGISTERED it shows only the logged in users groups.

<style>
.demo-3 {
position:relative;
width:120px;
height:140px;
overflow:hidden;
float:left;
margin-right:0px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:0px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:5;
margin:-5px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:2;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:10px 10px;
background-color:rgba(78,78,78,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}


</style>

<?
require_once( JPATH_ADMINISTRATOR . '/components/com_easysocial/includes/foundry.php' );

$options['types'] = 'currentuser';
$options['userid'] = $my->id;
$model = FD::model('Groups');
$groups = $model->getGroups($options);

foreach ($groups as $group) {
$gr = FD::group($group->id);
$group_name = $gr->getName($options);
$group_totalmembers = $gr->getTotalMembers($options);
$group_category = $gr->getCategory($options)->title;
$group_avatar = $gr->getAvatar('square');
$group_link = $gr->getPermalink($options);
?>
<span>
<a href = "<?echo $group_link;?>">

<ul class="demo-3">
<li>
<figure>
<img src="/<?echo $group_avatar;?>" width = "120" height="120" alt="" />

<?echo "<figcaption>"
. "<h6>"
. $group_name
. "<br>"
. $group_totalmembers
. " Members<br>";

?>
</h6>
</figcaption></figure>
</li>
</ul> </a> </span>
<?
}
?>


the effect:
https://gyazo.com/9da9ce1173cfe9ddb275e46e0967fe2a
1 replies

We are sorry, you need a valid subscription for EasyDiscuss
in order to view replies for this post in this category.

Your time
Stack Ideas time
Support is
Offline
It's weekend!

It is currently a weekend from where we are at. Some answers may already be available on our documentation at http://stackideas.com/docs

Rest assured that we will get back to your posts as soon as the week starts!


Official support hour is:
Monday — Friday. 10:00 am - 7:00 pm
Our timezone:
Kuala Lumpur (GMT +8)