XF 2.3 How do I get custom images under profile?

[Greenandgold]

I am looking for something like this (see club logo below replies), however I've only been able to get it to work for static images and when I try and insert code for custom field images nothing shows up. I want people to be able to choose their club and for the image to automatically appear below their profile. Does anyone have any code that will work with xenforo for this type of request?

 

[frm]

This is really raw without any formatting, but should give you an idea of how to achieve it.

Custom user field "clubSelection" Drop down selection set in Personal details


Edit template message_macros

Find (should be line 1 in XF 2.3.4): <xf:macro id="user_info"> then go to the end of that and place this before </xf:macro> (should be on line 110 without any other edits).

    <xf:if is = "$user.Profile.custom_fields.clubSelection"><img src="https://domain.com/path/to/image/{{ $user.Profile.custom_fields.clubSelection }}.png" height="32" width="32"></xf:if>

Nobody will have anything set so it should display like:


They can set it at /account/account-details.





And it will show:







It's serving a.png, b.png, c.png, etc., as selected (or nothing if it's not set).

You can have the possible choices as TeamName as opposed to a, b, c..., but it has to match the file you upload.

Their Profile About tab will have the full text of the team name as chosen though.


Alternatively, you could make it a textbox for a URL, but if they input an invalid image, it's going to be broken. It's better for you to manage the teams and selections.

 

[DarkGizmo]

Wouldn't it be easier to simply use an add-on like this?

 

[Greenandgold]

This is really raw without any formatting, but should give you an idea of how to achieve it.

Custom user field "clubSelection" Drop down selection set in Personal details
View attachment 313976

Edit template message_macros

Find (should be line 1 in XF 2.3.4): <xf:macro id="user_info"> then go to the end of that and place this before </xf:macro> (should be on line 110 without any other edits).

    <xf:if is = "$user.Profile.custom_fields.clubSelection"><img src="https://domain.com/path/to/image/{{ $user.Profile.custom_fields.clubSelection }}.png" height="32" width="32"></xf:if>

Nobody will have anything set so it should display like:
View attachment 313977

They can set it at /account/account-details.

View attachment 313978

View attachment 313979

And it will show:

View attachment 313980

View attachment 313981

View attachment 313982

It's serving a.png, b.png, c.png, etc., as selected (or nothing if it's not set).

You can have the possible choices as TeamName as opposed to a, b, c..., but it has to match the file you upload.

Their Profile About tab will have the full text of the team name as chosen though.
View attachment 313984

Alternatively, you could make it a textbox for a URL, but if they input an invalid image, it's going to be broken. It's better for you to manage the teams and selections.

That is great! Thank you so much

 

[Greenandgold]

@frm

Choose your club!

Go into Account Details and choose your club! I've added all the A-league teams, I can add NPL later.

greenandgoldfc.com

If you wanted to take a look. I've set it small so it's not so distracting.

 

[frm]

If you wanted to take a look. I've set it small so it's not so distracting.

To make your titles prettier, try this:
title="{{ $user.Profile.custom_fields.clubSelection|replace('_', ' ') }}"

Tested and it should strip the _ in the file name and replace it with a better human-readable space.

Edit: Assuming you named the custom field name the same, otherwise change that, of course, from clubSelection to what you made.

 

[Greenandgold]

To make your titles prettier, try this:
title="{{ $user.Profile.custom_fields.clubSelection|replace('_', ' ') }}"

Tested and it should strip the _ in the file name and replace it with a better human-readable space.

Edit: Assuming you named the custom field name the same, otherwise change that, of course, from clubSelection to what you made.

All good I understood anyway. I was wondering how to do it, chatgpt said I had to do a php callback for every team or something which seemed time consuming. Thanks for the help!

 

[Greenandgold]

@frm If you noticed I've also got a hover so the logos appear larger. Thought it was a nice touch

 

[frm]

@frm If you noticed I've also got a hover so the logos appear larger. Thought it was a nice touch

Yeah, the hover effect was cool. I just thought you'd like to change it from The_Team_Name to The Team Name in the title.

...which I see that you updated.

Glad it turned out as you expected. Any issues on mobile?

 

[Greenandgold]

Yeah, the hover effect was cool. I just thought you'd like to change it from The_Team_Name to The Team Name in the title.

...which I see that you updated.

Glad it turned out as you expected. Any issues on mobile?

Thanks. Yeah exactly what I wanted.

None that I’ve noticed on mobile. I had some issues before attempting to get the logo towards the top right though now it’s been resolved.

 

[frm]

Awesome. Glad I could help.