Jun 23, 2015 9:16:07 GMT -5
I have been trying with my limited knowledge to make something on my own but to no avail so far, so here I am. I have horizontal mini profiles like here and I would like to get a template code that would allow me to use a custom field where members can enter an image url then have the custom field/image be the background for their mini profile. Would also like to be able to have a fallback image so if they have nothing entered in the custom field it would just default to that image. I feel like this wouldnt be too hard with code as opposed to doing a whole plugin. I've also tried many of the plugins that are supposed to do this but none of them work, I dont know if its because im using a custom theme/template or not. Any help is appreciated.
Jun 23, 2015 16:04:49 GMT -5
I have been trying with my limited knowledge to make something on my own but to no avail so far, so here I am. I have horizontal mini profiles like here and I would like to get a template code that would allow me to use a custom field where members can enter an image url then have the custom field/image be the background for their mini profile. Would also like to be able to have a fallback image so if they have nothing entered in the custom field it would just default to that image. I feel like this wouldnt be too hard with code as opposed to doing a whole plugin. I've also tried many of the plugins that are supposed to do this but none of them work, I dont know if its because im using a custom theme/template or not. Any help is appreciated.
Hi there, this should hopefully help you:
This is will allow the member to choose their own background image for their miniprofiles. Alright. It's pretty simple actually.
First go to Admin Home > Members > Custom Profile Fields
And then add a field named MiniProfile Background Image. Then change the type to Text Field. Then click "(View/Edit)" and select the URL button. Then save and close the popup. Then change the location to Members Profiles Only.
Now time to edit the miniprofile template.
Go to Admin Home > Themes > Layout Templates > Mini-Profile
Now on line 1, you'll see this:
<div class="$[miniprofile_class]">
And replace that with this:
<div class="$[miniprofile_class]" {foreach $[user.custom_field]} {if $[user.custom_field.name] == "MiniProfile Background Image"}style="background-image: url('$[user.custom_field.value]');"{/if}{/foreach}>
Now to add an image just go to your profile, then edit profile, then the personal tab. At the bottom you will see "MiniProfile Background Image" with an input field below it, just enter the image URL and voila.
Credit to Shorty, and Source:
support.proboards.com/thread/434490/member-selectable-background-image
Jun 23, 2015 21:26:52 GMT -5
Thank you so much. I feel like an idiot because I think I had pretty much the same thing except I had " instead of ' around the url. But now that I look at mine, I dont have <div class="$[miniprofile_class]"> because mine was a custom layout/theme. Here's what mine looks like. I can probably take out the "if admin" and "if user" variables since I made them the same but I dont know what exactly I need to remove and re-add
{if $[user.is_staff] }
<table border="1" id="mini-table-staff">
<tr>
<td class="mini-cell-av">
{if $[user.avatar]}
$[user.avatar_medium]
{/if}
</td>
<td class="mini-cell-name">$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.group]}
<!--$[user.group.name]-->$[user.group.stars]
{elseif $[user.rank]}
<!--$[user.rank.name]<br />-->
{if $[user.rank.stars]}
$[user.rank.stars]
{/if}
{/if}<br />
{if $[user.personal_text]}
$[user.personal_text]
{/if}
{if $[user.custom_title]}<br />$[user.custom_title]{/if}
{if $[user.warning.level]}<br /><i>I have a</i> <font style="color: #c9544c;">$[user.warning.level]%</font> <i>warning</i>{/if}
</td>
{if $[user.is_member]}
<td class="mini-cell-forum">
{if $[user.is_online]}Status: <font style="color: #00af43;">Online</font>{else}Status: <font style="color: #ea002a;"><i>Offline</i></font>{/if}
{if $[user.posts]}<br />Posts: <font style="color: #efefef;">$[user.posts]</font>{/if}
{if $[user.location]}<br />Location: <font style="color: #efefef;">$[user.location]</font>{/if}
{if $[user.website]}<br />Website: $[user.website]{/if}
</td>
</tr>
{if $[user.badges_miniprofile]}
<tr>
<td colspan="6" class="mini-cell-badges">
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
</td>
</tr>
{/if}
{/if}
</table>
{else}
<table border="1" id="mini-table-member">
<tr>
<td class="mini-cell-av">
{if $[user.avatar]}
$[user.avatar_medium]
{/if}
</td>
<td class="mini-cell-name">$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.group]}
<!--$[user.group.name]-->$[user.group.stars]
{elseif $[user.rank]}
<!--$[user.rank.name]<br />-->
{if $[user.rank.stars]}
$[user.rank.stars]
{/if}
{/if}<br />
{if $[user.personal_text]}
$[user.personal_text]
{/if}
{if $[user.custom_title]}<br />$[user.custom_title]{/if}
{if $[user.warning.level]}<br /><i>I have a</i> <font style="color: #c9544c;">$[user.warning.level]%</font> <i>warning</i>{/if}
</td>
{if $[user.is_member]}
<td class="mini-cell-forum">
{if $[user.is_online]}Status: <font style="color: #00af43;">Online</font>{else}Status: <font style="color: #ea002a;"><i>Offline</i></font>{/if}
{if $[user.posts]}<br />Posts: <font style="color: #efefef;">$[user.posts]</font>{/if}
{if $[user.location]}<br />Location: <font style="color: #efefef;">$[user.location]</font>{/if}
{if $[user.website]}<br />Website: $[user.website]{/if}
</td>
</tr>
<tr>
</tr>
{if $[user.badges_miniprofile]}
<tr>
<td colspan="6" class="mini-cell-badges">
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
</td>
</tr>
{/if}
{/if}
</table>
{/if}
<style type="text/css">
.mini-cell-av {
width: 65px;
height: 75px;
padding: 5px 10px;
font-size: 10pt;
}
.mini-cell-name {
width: 80%;
padding: 5px 10px;
border-right: 0px solid #5b6770;
font-size: 9pt;
}
.mini-cell-name a {
font-family: "Inder";
font-size: 13pt;
font-weight: 700;
}
.mini-cell-forum {
width: 20%;
padding: 5px 10px;
line-height: 15px;
border-right: 0px solid #5b6770;
font-size: 10pt;
}
.mini-cell-about {
width: 0%;
padding: 5px 10px;
line-height: 15px;
border-right: 0px solid #5b6770;
font-size: 10pt;
}
.mini-cell-social {
width: 0%;
padding: 5px 10px;
line-height: 15px;
border-right: 0px solid #5b6770;
font-size: 10pt;
}
.mini-cell-additional {
width: 0%;
padding: 5px 10px;
line-height: 15px;
font-size: 90%;
}
.mini-cell-personaltext {
padding: 5px 10px;
margin-top: 10px;
line-height: 15px;
border-top: 0px solid #5b6770;
border-right: 0px solid #5b6770;
}
.mini-cell-custom-fields {
padding: 5px 10px;
border-top: 0px solid #5b6770;
}
.mini-cell-badges {
padding: 5px 10px;
border-top: 0px solid #5b6770;
}
#mini-table-member {
width: 100%;
color: #c8c8c8;
background: #262d35;
background-image: url("http://customsportscovers.x10host.com/SCW/MiniProfilePattern2.jpg");
background-repeat: repeat-x;
background-position: top left;
}
#mini-table-staff {
width: 100%;
color: #c8c8c8;
background: #262d35;
background-repeat: repeat-x;
background-position: top left;
}
</style>
Jun 24, 2015 11:37:42 GMT -5
Actually nevermind, I restructred it and finally got it working. Thank you so much again for the info.