• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Add pictures to member profile page based on user profile field selection

ArnyVee

Well-known member
#1
ArnyVee submitted a new resource:

Add pictures to member profile page based on user profile field selection (version 1.0) - Change the look of your site's member profiles by adding some visual nuggets of greatness

NOTE: Big thanks for the help from Jake Bunce in getting this accomplished :)

This template modification was something that I was looking to carry out in order to make the member profiles look a little spiffier and give them a little more of a social network sort of feel.

This quick tutorial assumes that you already have some images ready for your site as well as sized correctly for the width of your...
Read more about this resource...
 

DRE

Well-known member
#4
This is great for fixed width backgrounds but for fluid styles it can get a little confusing since not everyone's screen is the same width when in a fluid style. How about add an optional field for fluid styles (in case the member is using a fluid theme) but make it so that the fluid style background is repeated horizontally? For instance, that's how the header code works when you add a long banner. css repeat-x, you know, something like that. This way they can select a background for both their fixed style (in case someone is viewing their profile on a fixed style and a background for their fluid style.

Example: http://xenforo.com/community/threads/custom-background-for-members.25665/
 

ArnyVee

Well-known member
#5
This is great for fixed width backgrounds but for fluid styles it can get a little confusing since not everyone's screen is the same width when in a fluid style. How about add an optional field for fluid styles (in case the member is using a fluid theme) but make it so that the fluid style background is repeated horizontally? For instance, that's how the header code works when you add a long banner. css repeat-x, you know, something like that. This way they can select a background for both their fixed style (in case someone is viewing their profile on a fixed style and a background for their fluid style.
Good point T8L :)

Maybe someone here can chip in on how to add a 'background' to it via styling css to ensure that members can view it nicely. I'll look into it as well.
 

RobinHood

Well-known member
#6
Great resource Arny! Your screenshots are small though without the option to see large versions which makes it hard to read them.

I can't wait to try this out :)
 

ArnyVee

Well-known member
#7
Great resource Arny! Your screenshots are small though without the option to see large versions which makes it hard to read them.

I can't wait to try this out :)
Glad you like it RH :)

I see what you mean about the screenshots. Everything is pretty much typed out, but I will work on getting new/larger screenshots uploaded. That's probably what Allan meant earlier ;)
 

ineedhelp

Well-known member
#8
I've added the code but I see no image? I just see a x like u do when the image doesn't exist or the path is wrong.

I selected a random timeline cover from google image and uploaded it to the path in my ftp
 

ArnyVee

Well-known member
#9
I've added the code but I see no image? I just see a x like u do when the image doesn't exist or the path is wrong.

I selected a random timeline cover from google image and uploaded it to the path in my ftp
ineedhelp, do you have the same extension (.jpg, .gif or .png) in the code and the image saved on your server? Ensure the path is correct as well. Those are two of the more common issues.
 

ineedhelp

Well-known member
#10
ineedhelp, do you have the same extension (.jpg, .gif or .png) in the code and the image saved on your server? Ensure the path is correct as well. Those are two of the more common issues.
This is the code to the path
Code:
<xen:if is="{$user.customFields.coverpic}">
    <img src="/xxxxxx/covers/{$user.customFields.coverpic}.jpg" />
</xen:if>
But the image Only displays if I edit the code to this:
Code:
<xen:if is="{$user.customFields.coverpic}">
    <img src="/xxxxxx/covers/{$user.customFields.coverpic}image.jpg" />
</xen:if>
What's going wrong? Surely I shouldn't have to insert each image name in the code?
 

ArnyVee

Well-known member
#11
This is the code to the path
Code:
<xen:if is="{$user.customFields.coverpic}">
    <img src="/xxxxxx/covers/{$user.customFields.coverpic}.jpg" />
</xen:if>
But the image Only displays if I edit the code to this:
Code:
<xen:if is="{$user.customFields.coverpic}">
    <img src="/xxxxxx/covers/{$user.customFields.coverpic}image.jpg" />
</xen:if>
What's going wrong? Surely I shouldn't have to insert each image name in the code?
Based on what you've shared, it looks like you named your 'custom user field' as "coverpic".

What did you name the image in the 'choices' for the dropdown? Not the actual display text, but the choice name on the left when setting up your options.

Make sure whatever that is matches exactly to what your image is named. You do not need to add the 'image' text in there.
 

Divvens

Well-known member
#13
Based on what you've shared, it looks like you named your 'custom user field' as "coverpic".

What did you name the image in the 'choices' for the dropdown? Not the actual display text, but the choice name on the left when setting up your options.

Make sure whatever that is matches exactly to what your image is named. You do not need to add the 'image' text in there.
I made sure of these things, but still it shows the broken image kinda sign.

Once I right click and press view image it gives me a source such as this

path/to/myimages/.png

It's somehow ignoring the name of the image selected :\
 

ArnyVee

Well-known member
#14
Is it possible to add picture based on URL?
You can place any image in the img src code. But, you should be careful not to hotlink to images that are not yours, etc.

I made sure of these things, but still it shows the broken image kinda sign.

Once I right click and press view image it gives me a source such as this

path/to/myimages/.png

It's somehow ignoring the name of the image selected :\
It was doing that for me before I had my profile fields listed in there correctly. PC me a copy of what your code is and I'll see if I can see what's wrong with it. Also, be sure to include the actual profile field text you created as well, please.
 

ArnyVee

Well-known member
#15
Thanks to CapnLuffy for finding the screenshot error where I selected "Multi-Choice Drop Down" versus "Drop Down Selection" as the choice to select for the options. :)
 

ArnyVee

Well-known member
#17
Thanks Ranger. Yeah, it was done so that it sort of looks like the Facebook timeline.

I'm trying to incorporate functions and features on my test sites so that when I move my sites over from vB and Ning, I can have a similar user experience .... but, with the power of xenForo behind it ;)
 

Sheldon

Well-known member
#18
Arny, start to finish, a total of 5 minutes. Thank you for the easy to follow instructions. What's even better, is using the TMS so that it will stay now, instead of constantly having to edit. Again, thanks. (y)
 

DRE

Well-known member
#20
Thanks Ranger. Yeah, it was done so that it sort of looks like the Facebook timeline.

I'm trying to incorporate functions and features on my test sites so that when I move my sites over from vB and Ning, I can have a similar user experience .... but, with the power of xenForo behind it ;)
First thing I thought of when I saw this add-on is that it reminded me of the Facebook Timeline.