Home
Hello all
Collect user photos in the widget
------------------------------
This trick enables you to collect photos of members in the widget automatically
------------------------------
You have five tokens to collect member photos
You can choose from them what you like
=======
Administration Panel > Modules > Portal & Widgets > Forum widgets management > Create a widget.
Create a Widget and add the following content
- ModernBB-phpBB3-AwesomeBB:
- The following code collects the images of the last members who visited the forum
- last visit:
- Code:
<div class="lastvisit-photo">
<div class="lastvisit-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.lastvisit-photo1');
$.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('.table1').html();pa.html(h);});});
</script> <style>
.lastvisit-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.lastvisit-photo img {
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.lastvisit-photo {
font-size: 0;
}
.lastvisit-photo .material-icons,
.lastvisit-photo td.mobile-hidden,
.lastvisit-photo img.i_icon_pm,
.lastvisit-photo [target="_blank"] {
display: none;
}
.lastvisit-photo tr.row2 {
display: inline-block;
}
.lastvisit-photo tr.row1 {
display: inline-block;
}
.lastvisit-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.lastvisit-photo td:nth-child(5):hover {
font-size: 11px!important;
z-index: 999;
}
.lastvisit-photo td:nth-child(5) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 6px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the images of the last registered members of the forum- New members:
- Code:
<div class="lastregistered-photo">
<div class="lastregistered-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.lastregistered-photo1');
$.get('/memberlist?mode=joined&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('.table1').html();pa.html(h);});});
</script> <style>
.lastregistered-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.lastregistered-photo img {
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.lastregistered-photo {
font-size: 0;
}
.lastregistered-photo .material-icons,
.lastregistered-photo td.mobile-hidden,
.lastregistered-photo img.i_icon_pm,
.lastregistered-photo [target="_blank"] {
display: none;
}
.lastregistered-photo tr.row2 {
display: inline-block;
}
.lastregistered-photo tr.row1 {
display: inline-block;
}
.lastregistered-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.lastregistered-photo td:nth-child(4):hover {
font-size: 11px!important;
z-index: 999;
}
.lastregistered-photo td:nth-child(4) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 6px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the photos of the last members joined to the groups- members of the groups:
- Code:
<div class="lastgroups-photo">
<div class="lastgroups-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.lastgroups-photo1');
$.get('/memberlist?mode=groups&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('.table1').html();pa.html(h);});});
</script> <style>
.lastgroups-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.lastgroups-photo img {
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.lastgroups-photo {
font-size: 0;
}
.lastgroups-photo .material-icons,
.lastgroups-photo td.mobile-hidden,
.lastgroups-photo img.i_icon_pm,
.lastgroups-photo [target="_blank"] {
display: none;
}
.lastgroups-photo tr.row2 {
display: inline-block;
}
.lastgroups-photo tr.row1 {
display: inline-block;
}
.lastgroups-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.lastgroups-photo td:nth-child(3):hover {
font-size: 11px!important;
z-index: 999;
}
.lastgroups-photo td:nth-child(3) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 6px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the photos of the members with the most posts- The most active members:
- Code:
<div class="Moreposts-photo">
<div class="Moreposts-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.Moreposts-photo1');
$.get('/memberlist?mode=posts&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('.table1').html();pa.html(h);});});
</script> <style>
.Moreposts-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.Moreposts-photo img {
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.Moreposts-photo {
font-size: 0;
}
.Moreposts-photo .material-icons,
.Moreposts-photo td.mobile-hidden,
.Moreposts-photo img.i_icon_pm,
.Moreposts-photo [target="_blank"] {
display: none;
}
.Moreposts-photo tr.row2 {
display: inline-block;
}
.Moreposts-photo tr.row1 {
display: inline-block;
}
.Moreposts-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.Moreposts-photo td:nth-child(6):hover {
font-size: 11px!important;
z-index: 999;
}
.Moreposts-photo td:nth-child(6) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 6px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the photos of the members with the most points- members with the most points:
- Code:
<div class="Morepoints-photo">
<div class="Morepoints-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.Morepoints-photo1');
$.get('/memberlist?mode=point&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('.table1').html();pa.html(h);});});
</script> <style>
.Morepoints-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.Morepoints-photo img {
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.Morepoints-photo {
font-size: 0;
}
.Morepoints-photo .material-icons,
.Morepoints-photo td.mobile-hidden,
.Morepoints-photo img.i_icon_pm,
.Morepoints-photo [target="_blank"] {
display: none;
}
.Morepoints-photo tr.row2 {
display: inline-block;
}
.Morepoints-photo tr.row1 {
display: inline-block;
}
.Morepoints-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.Morepoints-photo td:nth-child(3):hover {
font-size: 11px!important;
z-index: 999;
}
.Morepoints-photo td:nth-child(3) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 6px;
border-radius: 100px;
color: white;
}
</style>
- PunBB:
The following code collects the images of the last members who visited the forum- last visit:
- Code:
<div class="lastvisit-photo">
<div class="lastvisit-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.lastvisit-photo1');
$.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('table.table').html();pa.html(h);});});
</script> <style>
.lastvisit-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.lastvisit-photo tr {
margin-left: 10px;
float: left;
}
.lastvisit-photo img {
margin-top: -11px;
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.lastvisit-photo {
font-size: 0;
}
.lastvisit-photo .material-icons,
.lastvisit-photo td.mobile-hidden,
.lastvisit-photo img.i_icon_pm,
.lastvisit-photo [target="_blank"] {
display: none;
}
.lastvisit-photo tr.row2 {
display: inline-block;
}
.lastvisit-photo tr.row1 {
display: inline-block;
}
.lastvisit-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.lastvisit-photo td:nth-child(4):hover {
font-size: 11px!important;
z-index: 999;
}
.lastvisit-photo td:nth-child(4) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 0px 7px;
border-radius: 100px;
color: white;
}
.lastvisit-photo td:nth-child(4):hover {
font-size: 11px!important;
z-index: 999;
}
.lastvisit-photo td:nth-child(4) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 0px 7px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the images of the last registered members of the forum- New members:
- Code:
<div class="lastregistered-photo">
<div class="lastregistered-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.lastregistered-photo1');
$.get('/memberlist?mode=joined&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('table.table').html();pa.html(h);});});
</script> <style>
.lastregistered-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.lastregistered-photo tr {
margin-left: 10px;
float: left;
}
.lastregistered-photo img {
margin-top: -11px;
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.lastregistered-photo {
font-size: 0;
}
.lastregistered-photo .material-icons,
.lastregistered-photo td.mobile-hidden,
.lastregistered-photo img.i_icon_pm,
.lastregistered-photo [target="_blank"] {
display: none;
}
.lastregistered-photo tr.row2 {
display: inline-block;
}
.lastregistered-photo tr.row1 {
display: inline-block;
}
.lastregistered-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.lastregistered-photo td:nth-child(3):hover {
font-size: 11px!important;
z-index: 999;
}
.lastregistered-photo td:nth-child(3) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 0px 7px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the photos of the last members joined to the groups- members of the groups:
- Code:
<div class="lastgroups-photo">
<div class="lastgroups-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.lastgroups-photo1');
$.get('/memberlist?mode=groups&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('table.table').html();pa.html(h);});});
</script> <style>
.lastgroups-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.lastgroups-photo tr {
margin-left: 10px;
float: left;
}
.lastgroups-photo img {
margin-top: -11px;
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.lastgroups-photo {
font-size: 0;
}
.lastgroups-photo .material-icons,
.lastgroups-photo td.mobile-hidden,
.lastgroups-photo img.i_icon_pm,
.lastgroups-photo [target="_blank"] {
display: none;
}
.lastgroups-photo tr.row2 {
display: inline-block;
}
.lastgroups-photo tr.row1 {
display: inline-block;
}
.lastgroups-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.lastgroups-photo td:nth-child(2):hover {
font-size: 11px!important;
z-index: 999;
}
.lastgroups-photo td:nth-child(2) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 0px 7px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the photos of the members with the most posts- The most active members:
- Code:
<div class="Moreposts-photo">
<div class="Moreposts-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.Moreposts-photo1');
$.get('/memberlist?mode=posts&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('table.table').html();pa.html(h);});});
</script> <style>
.Moreposts-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.Moreposts-photo tr {
margin-left: 10px;
float: left;
}
.Moreposts-photo img {
margin-top: -11px;
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.Moreposts-photo {
font-size: 0;
}
.Moreposts-photo .material-icons,
.Moreposts-photo td.mobile-hidden,
.Moreposts-photo img.i_icon_pm,
.Moreposts-photo [target="_blank"] {
display: none;
}
.Moreposts-photo tr.row2 {
display: inline-block;
}
.Moreposts-photo tr.row1 {
display: inline-block;
}
.Moreposts-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.Moreposts-photo td:nth-child(5):hover {
font-size: 11px!important;
z-index: 999;
}
.Moreposts-photo td:nth-child(5) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 0px 7px;
border-radius: 100px;
color: white;
}
</style>
The following code collects the photos of the members with the most points- members with the most points:
- Code:
<div class="Morepoints-photo">
<div class="Morepoints-photo1">
</div>
</div>
<script>
$(function(){var pa=$('.Morepoints-photo1');
$.get('/memberlist?mode=point&order=DESC&submit=Ok&username' , function(data){
var h= $(data).find('table.table').html();pa.html(h);});});
</script> <style>
.Morepoints-photo {
right: -10px;
display: inline-block;
text-align: center;
position: relative;
overflow: scroll;
height: 300px;
width: 100%;
}
.Morepoints-photo tr {
margin-left: 10px;
float: left;
}
.Morepoints-photo img {
margin-top: -11px;
position: relative;
margin-bottom: 10px;
border-radius: 100px;
width: 70px !important;
height: 70px !important;
}
.Morepoints-photo {
font-size: 0;
}
.Morepoints-photo .material-icons,
.Morepoints-photo td.mobile-hidden,
.Morepoints-photo img.i_icon_pm,
.Morepoints-photo [target="_blank"] {
display: none;
}
.Morepoints-photo tr.row2 {
display: inline-block;
}
.Morepoints-photo tr.row1 {
display: inline-block;
}
.Morepoints-photo1 a {
font-size: 9px;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.Morepoints-photo td:nth-child(2):hover {
font-size: 11px!important;
z-index: 999;
}
.Morepoints-photo td:nth-child(2) {
margin-left: 29px;
margin-top: -20px;
position: absolute;
font-size: 0px;
display: block!important;
background: #4CAF50;
border: solid #000 1px;
padding: 0px 7px;
border-radius: 100px;
color: white;
}
</style>
After installing the codes in the correct way
Images will appear in widgets with slight differences depending on your forum version
We hope you like this great little Trick
_________________________________________
This tutorial was written by @كونان2000,
(The codes were written by @كونان2000, and @Milouze14 code was used in this thread)
Last edited by كونان2000 on August 26th 2023, 5:09 am; edited 4 times in total
,
