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.
the effect:
https://gyazo.com/9da9ce1173cfe9ddb275e46e0967fe2a
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