IPS4-Tutorial Larger Avatars in Post

[ADMIN 322]

Step:1

Go to ACP > Customization > Themes and Select the skin you wish to edit

 

Step: 2

Find postContainer in the templates

 

Step: 3

Look for

<li class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			</li>

 

Step: 4

Replace it with

<li class='cAuthorPane_photo'>
                {{if $comment->author()->pp_main_photo}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$comment->author()->name"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$comment->author()->name"}' title="{lang="view_user_profile" sprintf="$comment->author()->name"}"><span class='ipsUserPhoto ipsUserPhoto_variable'><img src="{setting="base_url"}uploads/{$comment->author()->pp_main_photo}" /></span></a>{{else}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$comment->author()->name"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$comment->author()->name"}' title="{lang="view_user_profile" sprintf="$comment->author()->name"}"><span class='ipsUserPhoto ipsUserPhoto_variable'><img src="{resource="default_photo.png" app="core" location="global"}" /></a>{{endif}}
			</li>

#Note: you need to manually add the image url for "Default Image Url" in the code above as i believe each default images are different named differently; to find this you can go into uploads/set_resources_1 on your ftp server and look for the image, or you can right click inspect element and find it copy the image link and replace Default Image Url in the img src i have above, this will enable Default Avatar as it was broken before i updated the code above when a custom one isnt uploaded it will use the default

Step: 5

Find misc.css

 

Step: 6

Add this line of code below

.ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after {
		width: 150px;
		{{if theme.rounded_photos}}
			border-radius: 0px;
		{{endif}}
	}

After this one

.ipsUserPhoto_xlarge img, img.ipsUserPhoto_xlarge, .ipsUserPhoto_xlarge:after {
		width: 120px;
		height: 120px;
		{{if theme.rounded_photos}}
			border-radius: 60px;
		{{endif}}
	}

 

after you have completed all the steps above the results should be like this below

Spoiler