HomeAdd photos of members in the widget
5 posters
Page 1 of 1
Add photos of members in the widget
by كونان2000 April 27th 2023, 8:59 am
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, 7:09 am; edited 4 times in total
كونان2000- Forumember
-
Posts : 284
Reputation : 120
Language : Arabic -
skouliki, Ape, YoshiGM, BlackScorpion, SarkZKalie, TonnyKamper, Jucarese and Razor12345 like this post
Re: Add photos of members in the widget
by skouliki April 27th 2023, 11:15 am
hey nice to see you again 
thank you for sharing this code
it would also be very useful to add the numbers ex. the number of posts, the number of points
thank you for sharing this code
it would also be very useful to add the numbers ex. the number of posts, the number of points
Last edited by skouliki on April 27th 2023, 11:30 am; edited 1 time in total
skouliki- Manager
-
Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece -
TonnyKamper and كونان2000 like this post
Re: Add photos of members in the widget
by TonnyKamper April 27th 2023, 11:23 am
Wow, very nice again @كونان2000
TonnyKamper- Active Poster
- Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin -
كونان2000 likes this post
Niko- Helper
- Posts : 3285
Reputation : 254
Language : English, Italian, French
Location : Italy -
كونان2000 likes this post
YoshiGM- Active Poster
- Posts : 1562
Reputation : 146
Language : Spanish & English
Location : Mexico -
كونان2000 likes this post
Re: Add photos of members in the widget
by كونان2000 April 28th 2023, 7:14 am
thank you all my friends @skouliki @TonnyKamper @Niko @YoshiGM
Thank you all for your comments
+
The tutorial has been updated
1: A green dot has been added to the image, and the information will appear after the mouse pointer has passed
When the last visit token is installed, it will show the date of the last visit
And when you install the most contributed, the number of contributions will appear,
2: The Invision version has been temporarily removed
I noticed some problems
,
After I finish fixing it, I will put it back again, God willing
Thank you all for your comments
thank you skouliki ^^skouliki wrote:hey nice to see you again
thank you for sharing this code
it would also be very useful to add the numbers ex. the number of posts, the number of points
+
The tutorial has been updated
1: A green dot has been added to the image, and the information will appear after the mouse pointer has passed
When the last visit token is installed, it will show the date of the last visit
And when you install the most contributed, the number of contributions will appear,
2: The Invision version has been temporarily removed
I noticed some problems
,After I finish fixing it, I will put it back again, God willing
Last edited by كونان2000 on August 26th 2023, 7:10 am; edited 1 time in total
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
BlackScorpion, Niko and TonnyKamper like this post
skouliki- Manager
- Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece -
TonnyKamper and كونان2000 like this post
Similar topics» Members Photos
» Photos Not showing intermittently for some members
» How do forum members attach photos to their messages?
» Storage space question when members upload photos to their posts
» Scaling Widget Background Image Based on Widget Size/User Resolution
» Photos Not showing intermittently for some members
» How do forum members attach photos to their messages?
» Storage space question when members upload photos to their posts
» Scaling Widget Background Image Based on Widget Size/User Resolution
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
