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

XF 1.4 How to add trophy images?

#1
Hey everyone I am wondering how can I add a Trophy image for my users?

So if a member hits up to 100 post they get a new badge/trophy which will say Rated Awesome.

Example:

 

Jeremy

Well-known member
#4
What you have shown is a banner, not a trophy.

Trophies are not displayed liked that. What you want are either banners or user titles based on lost count.
 
#5
What you have shown is a banner, not a trophy.

Trophies are not displayed liked that. What you want are either banners or user titles based on lost count.
Okay for an example when someone posts one post they get a star rank ill post examples!

Okay once a member joins the site they get this rank right here.

Example for being a member

Now example two is going to show when a member has hit 20 post

This is what I am wanting sorry!
I want my members to get more stars as they rank up as these examples.
 

Lawrence

Well-known member
#7
This simplest way to accomplish this is with a template edit, or two.

As you know at what trophy point value a new star will be shown, try the following. I'm using the message_user_info template as an example, as you may want it displayed elsewhere. Replace the numbers I used with the actual trophy points required (-1).

Find: <xen:require css="message_user_info.css" /> and below that add:
HTML:
<xen:set var="$starWidth">
    <xen:if is="{$user.trophy_points} > 19">
        oneStar
    <xen:elseif is={$user.trophy_points} > 49" />
        twoStars
    <xen:elseif is={$user.trophy_points} > 99" />
        threeStars
    <xen:elseif is={$user.trophy_points} > 149" />
        fourStars
    <xen:else />
        fiveStars
    </xen:if>
</xen:set>
Depending where you want the stars to show, add this (in this example below the h3 that contains the user title)
<div class="trophyPointStars {$starWidth}"></div>

Add to your EXTRA.css template, something like this:
HTML:
.trophyPointStars
{
    background: url('@imagePath/to_your/stars_pic.png') no-repeat;
    height: 24px; // replace with actual height of the pic
}

.oneStar
{
    width: 24px; // actual width of a star
}
.twoStars
{
    width: 48px;
}
.threeStars
{
    // you get the idea, :)
}
I never tested the above, but it should work.
BTW: from your first message it is clear that you were talking about trophy points, and not user banners. Just to let you know, :)
 
#8
This simplest way to accomplish this is with a template edit, or two.

As you know at what trophy point value a new star will be shown, try the following. I'm using the message_user_info template as an example, as you may want it displayed elsewhere. Replace the numbers I used with the actual trophy points required (-1).

Find: <xen:require css="message_user_info.css" /> and below that add:
HTML:
<xen:set var="$starWidth">
    <xen:if is="{$user.trophy_points} > 19">
        oneStar
    <xen:elseif is={$user.trophy_points} > 49" />
        twoStars
    <xen:elseif is={$user.trophy_points} > 99" />
        threeStars
    <xen:elseif is={$user.trophy_points} > 149" />
        fourStars
    <xen:else />
        fiveStars
    </xen:if>
</xen:set>
Depending where you want the stars to show, add this (in this example below the h3 that contains the user title)
<div class="trophyPointStars {$starWidth}"></div>

Add to your EXTRA.css template, something like this:
HTML:
.trophyPointStars
{
    background: url('@imagePath/to_your/stars_pic.png') no-repeat;
    height: 24px; // replace with actual height of the pic
}

.oneStar
{
    width: 24px; // actual width of a star
}
.twoStars
{
    width: 48px;
}
.threeStars
{
    // you get the idea, :)
}
I never tested the above, but it should work.
BTW: from your first message it is clear that you were talking about trophy points, and not user banners. Just to let you know, :)

These are images I am wanting to upload not code! So do you know I can insert the images?
 

Lawrence

Well-known member
#10
These are images I am wanting to upload not code! So do you know I can insert the images?
As Martok pointed out, to achieve what you want is going to involve adding some code to the templates. This is really pretty simple to do, and XF's template merge won't over-write those changes when you upgrade, :)

If you are using more than one image, I suggest you combine them into one sprite sheet, to save on loading multiple images. The above css will need to be changed, but it won't take too much effort to do so.