Allowing Members to Add Own Image in Mini-Profile + Tweaks

[Former Member]

DESCRIPTION

The below Instructions will show you how to make it possible for members to insert their own images into their mini-profiles. The Tweaks sections include customization that allows you to 1) make its opacity change upon cursor hovering, 2) make a set height and width of the images, and 3) make a set, clickable image that links to wherever the member specifies in their Edit Profile field input [so instead of putting in their own image, it's a default image made by the administrator and they get to put in their own link for it to click to].

INSTRUCTIONS

• Go to Admin > Members > Custom Profile Fields.
  
  
• Make a Custom Profile Field named Image. Note that if you change the name/spelling/etc. of this field, you will have to tweak the Template instructions below to accommodate your version, though it isn't difficult. Make sure that you make this the BOTTOM field. It needs to be a Text Field with Link (Plain Text) chosen in (view/edit), be set to show in Mini-Profiles, and editable by Members and Staff.
  
  
• Next, go to Admin > Themes > Layout Templates > Mini-Profile.
  
  
• The default code, meaning it has not been touched or modified at all, looks like:
  

[/noubbc]{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>[/ul]
So if yours looks different, you can always ask me any questions about how to tweak your Template. The part in green is where we're going to be focusing.

[/li][li] Change the part in green to:

[/noubbc]Image"}
<span class="$[user.mini_custom_field.content_class]"><center><br><img src="$[user.mini_custom_field.value]"></center></span>
{else}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/if}
{/foreach} [/ul]
If you named your field something other than "Image," then in the part above that's red, put the name of the field. [/li][/ul][/blockquote][/div]

IMPORTANT

• The member will need to put the image URL into the Image field when they go into Edit Profile. That will make the image show up. It needs to be a direct link to the image. I suggest uploading via photobucket or tinypic.
  
  
• The image will only show up if the member has input an image url. So if they haven't, it'll simply be missing and will not affect the mini-profile.
  
  
• There are no boundaries set up about the image size. Meaning: If your members decide to put in a 1,000 pixel tall image, it's going to make a mess of your mini-profile. I suggest putting up a rule about the size maximums allowed on your site. Furthermore, if they attempt to put in an image that is wider than your mini-profile, it's going to get cut off, so be sure to let your members know how wide your mini-profiles are so that they know their limitations. If you're unsure, 150 pixels wide is a pretty safe bet for a maximum [the size of a default avatar].

EXAMPLES

• Custom Field Creation: SCREENSHOT HERE
  
  
• Edit Profile Image Input: SCREENSHOT HERE
  
  
• Mini-Profile: SCREENSHOT HERE

TWEAKS

• If you would like to make the image have hover opacity, which means it is at a lower opacity and looks more faded normally and if you hover your cursor over the image it raises to full opacity/vibrancy, then you can add this part in orange to the code:
  

[/noubbc]style="opacity:.4;filter:alpha(opacity=40)" onmouseout="this.style.opacity=.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha(opacity=100)"/>[/ul]

[/li][li] If you would like to impose specific sizes on the images that, no matter the size of the image, it will be conformed to, then you can add this part in blue to the code:

[/noubbc]height="##" width="##">[/ul]
Change the ## placeholder to the pixel side you want. For example, 150 pixels wide and 50 pixels tall. Remember that this might deform/warp/pixelate/etc. whatever image a user inputs.

[/li][li] If you would like the image to be a set, forum-wide image and it instead to be clickable to a link that the member specifies in their Edit Profile field, you can instead use this code:

[/noubbc][/ul]
This will put the image in any mini-profile that has this custom field filled out and, when clicked, it will open up a new window and take you to whatever link the member has provided. They'll need to put it in their Edit Profile field input as the full URL, include the http and www. This can be used for things like Biographies, Trackers, or whatever else you want. [/li][/ul][/blockquote][/div]

Please post any questions you have and I will try to assist you

[Welshling]

₪» ⅀ ƪ Ƒ «₪ hey, I have tried and failed numerous times to edit any mini profile templates including this. For some reason, I think this area just hates me xD

Here's what I have in the wrappers. Including the parts in red, as they're showing in the template area.
<div class="$[miniprofile_class]">
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "MP Background Image"}
<span class="$[user.mini_custom_field.content_class]"><center><br><img src="$[user.mini_custom_field.value]"style="opacity:.4;filter:alpha(opacity=40)" onmouseout="this.style.opacity=.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha(opacity=100)"/></a></center></span>
{else}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/if}
{/foreach}

{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>

Unfortunately I can't show you the theme this is on at the moment, because I've had to set another theme to default to get help with a plugin. But I have set a background on my mini profile, which isn't even showing up in the post areas.

Ideally, if I could figure out this first step I would like to attempt building my own mini profile.

[Former Member]

Welshling,

Well, for this line
<span class="$[user.mini_custom_field.content_class]"><center><br><img src="$[user.mini_custom_field.value]"style="opacity:.4;filter:alpha(opacity=40)" onmouseout="this.style.opacity=.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha(opacity=100)"/></a></center></span>
You are using </a> and closing a link you never started, so first off I'd suggest removing that.

Do you have the custom profile field word-for-word exact to MP Background Image, even the capitals? Also is it set to Plain Link in (view/edit) of the custom profile field section in your admin panel? And are you positive they are inputting a functioning image URL into the field, starting with http?

[Welshling]

I copied your code as it was written above, but yes I will remove the closing </a>.

Yup its word for word the same, but no its not set to plain link because I was following your instructions and you didn't state that above so I will do that now.

Ok I've done all that and checked that its a full working url in my profile, but there's still no background image working.

Would it be ok for me to send you a message, once the default theme has been changed to this one i'm working on to save clogging up your post here? So then we can look at it together maybe?

[Former Member]

Works for me ^^

[Former Member]

I'll throw this onto my test site later today and fix it and will post here with the results =)

[Forever Sunshine]

Can I ask please if this is a global thing or does it have to be done to each and every theme? Please tell me it's global.

[Former Member]

Forever Sunshine, as it's layout templates, it's per-theme. Only headers/footers are global in V5. =)

jrryan and Welshling, I have not looked into exactly why yours aren't working but I went on my test site and put in the below code and it worked, as demonstrated by the TEST IMG here. I'll look at yours exactly in a moment but the code I used that is working fine on my test site is:

<div class="$[miniprofile_class]">
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Image"}
<span class="$[user.mini_custom_field.content_class]"><center><br><img src="$[user.mini_custom_field.value]"></center></span>
{else}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/if}
{/foreach}
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>

[Welshling]

₪» ⅀ ƪ Ƒ «₪, so the image has to be a small icon then and not a full background to fill the entire place holder?

[Former Member]

I never said it had to be small, though you're saying background which makes me think you want it to be the entire mini-profile's background, which this is not coded for. It's coded to display an image, like a second avatar, a GIF, something like that. If you use the exact code I posted in my last post there, does your image still not show up?

[Welshling]

₪» ⅀ ƪ Ƒ «₪, thanks for the reply I was just clarifying what the code itself actual does or what its not doing in my case. Its ok now though, because i've coded my mini profiles differently for this theme but thanks for the help and for the code itself, no doubt others will find it useful and will use it... i may actually use it for contests in the not too distant future

[Pebbles]

this works, nice one

[hwutheseries]

This is great thank you! At the moment however although the image is showing up in the profile, it's also showing up as a text url too as a custom field. Is there anyway to have the image in a mini-profile with the custom field text showing?

I've made someone a moderator, and I'm trying to add a little banner at the bottom of their mini profile, using this template, because they don't want to loose their rank and stars.

[₪» ⅀ ƪ Ƒ «₪]

Feb 18, 2017 8:51:06 GMT -8 hwutheseries said:

This is great thank you! At the moment however although the image is showing up in the profile, it's also showing up as a text url too as a custom field. Is there anyway to have the image in a mini-profile with the custom field text showing?

I've made someone a moderator, and I'm trying to add a little banner at the bottom of their mini profile, using this template, because they don't want to loose their rank and stars.

Hey there, I'm the original OP - new account.

To help me troubleshoot, can you open your layout templates > mini-profile, click in the code textbox anywhere just so your computer knows that is the area you want to search, and then use CTRL + F which will create a searchbox at the top left of the code textbox? Once you have that pulled up, type in this: {foreach $[user.mini_custom_field]} and hit enter, every instance of that code will then show as a yellow segment in the right-hand scrollbar.

Please copy all instances of {foreach $[user.mini_custom_field]} in your mini-profile and paste them here so I can see what is happening in your code. Whenever you see {foreach $[user.mini_custom_field]}, copy everything up until you see {/foreach}, so whatever is between those 2 pieces of code should be included. That is the relevant chunk of code that I need to see so I can help troubleshoot what is happening. :)

If you have any questions, let me know and I will rephrase to help clarify as best I can.