Jump to content

How to get a tall avatar using the Character Mod
   (0 reviews)

Morrigan
  • IPS, by default, uses square avatars and the Character Mod matches this system but there is a way to get taller avatars, you can actually even use this method to get larger avatars for your standard site avatars.

    Software: Invision Power Services (IPS)

Now, this does not replace the need for the main avatar upload. That should still be there for square images like in topic lists, the notifications center etc. What you do for this is you actually create a new upload field for the larger image.

 

For this I'm going to show you my settings. Note that I do not show it on either the profile or the post screen because it's unnecessary and will just conflict if you used the Basic profile alterations guide.

 

So the template we'll be editing is characters > front > character > authorPane.

 

You will need to find this:

    <li class='cAuthorPane_photo'>
        <a href="{$character->url()}">
            <span class="ipsUserPhoto ipsUserPhoto_large">
            {{if $avatar = $character->avatar()}}
                <img src="{$avatar->url}" alt="{$character->name}">
            {{else}}
                <img src='{resource="default_photo.png" app="core" location="global"}' alt="{$character->name}">
            {{endif}}
            </span>
        </a>
    </li>

Now, first thing is first we need to change the outer class. The class cAuthorPane_photo will try to make your image square and squish it which is not what you want to do. I renamed mine to this cCharPane_photo so that it was different and character related.

 

Next I removed the character url. You do not have to do this, however if you intend to have any sort of hover effect for your mini-profile, this is a mandatory thing so that it doesn't flash as someone runs their mouse of the image to see it. Totally up to you. Now we're going to use the tip that I talked about in the "How to use custom fields in the character mod" article so that I can pull the url out of the image. Otherwise it creates a lightbox link if you just use it as is. So the full replacement code that I use is as follows:

<li class='cCharPane_photo'>
            <div class="ipsCharPhoto ipsCharPhoto_large">
              {{if $character->fields('big_av')}}
              	{{$string = ''.$character->fields('big_av').'';}}
				{{$bigAv = explode('"',strstr($string,'https://'))[0];}}
              <img src="{$bigAv}" alt="{$character->name}">
            {{elseif $avatar = $character->avatar()}}
                <img src="{$avatar->url}" alt="{$character->name}">
            {{else}}
                <img src='{resource="default_photo.png" app="core" location="global"}' alt="{$character->name}">
            {{endif}}
            </div>
</li>

 

Now to explain the code it basically checks to see if there is a big_av first then if there isn't it checks for a normal avatar and if there isn't it uses a default image (that you can change in your theme resources if you want).

 

Now that you've done this you have one last thing to do, you need to add some code to your custom CSS, this is just in case someone didn't pay attention to the size and uploaded a HUGE photo instead of the correct size. So go to your custom.css and add:

.ipsCharPhoto img {
  max-width: 250px;
  max-height: 400px;
}

This will restrict the max-size of the image and make sure no overflow happens.


Related Guides




User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

There are no reviews to display.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.