Larger Avatars for Posts Compatible with 4.1 & 4.2

[John 83]

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'>
			{template="userPhoto2" app="core" group="global" params="$comment->author(), 'variable', $comment->warningRef()"}
		</li>

Step: 5

Create New HTML Template

Name: UserPhoto2

Variables:

$member, $size='small', $warningRef=NULL, $classes='', $hovercard=TRUE

Location: Add To an existing location

Existing Location: front

Group: Add to an existing group

Existing Group: global

Application: System

Step 6:

Find HTML template "UserPhoto2" and paste the following code into it

{{if $member->member_id and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members' ) )}}
{{$memberURL = ( $warningRef ) ? $member->url()->setQueryString( 'wr', $warningRef ) : $member->url();}}
	<a href="{$memberURL}" {{if $hovercard}}data-ipsHover data-ipsHover-target="{$memberURL->setQueryString( 'do', 'hovercard' )}"{{endif}} class="ipsUserPhoto ipsUserPhoto_{$size}{{if $classes}} {$classes}{{endif}}" title="{lang="view_user_profile" sprintf="$member->name"}">
		<img src='{{if $member->pp_main_photo}}{file="$member->pp_main_photo"}{{else}}{file="$member->photo"}{{endif}}' alt='{$member->name}'>
	</a>
{{else}}
	<span class='ipsUserPhoto ipsUserPhoto_{$size} {{if $classes}}{$classes}{{endif}}'>
		<img src='{file="$member->photo"}' alt='{$member->name}'>
	</span>
{{endif}}

Step: 7

Find custom.css and Add this line of code below

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

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

Edited July 29, 2017 by John
Revamped the whole code

[rickzinho 3]

@john666M thanks!!! work perfectly

Just not like clicking on the avatar and go to profile

Edited June 2, 2015 by rickzinho

[John 83]

@john666M thanks!!! work perfectly

Just not like clicking on the avatar and go to profile

​edited the code a bit read Step:4 above and it should work now

[theezy 4]

Very nice tutorial thanks

[rickzinho 3]

@john666M thanks!!! work perfectly

Just not like clicking on the avatar and go to profile

​edited the code a bit read Step:4 above and it should work now

​works! thanks bro

[John 83]

updated the code again seems Default avatar was broken in the code when u used the code above now it should work like normal 

Step:4

Edited June 2, 2015 by John666M

[hegemon 0]

Will this work with the reflections avatar mod?

[Cheerio 135]

you could use your custom.css to do this without editing any files.

Edited September 5, 2015 by Erza
Restored deleted content

[John 83]

Will this work with the reflections avatar mod?

​this is for 4.x of IP.Board as far as i know the reflection avatar mod is for 3.4.x 

http://community.invisionpower.com/files/file/6083-nb34-reflection-avatars/ as u can see the path is Downloads > Previous Versions

 

you could use your custom.css to do this without editing any files.

​ it can? im not aware of any other way to use the original avatar that was uploaded, on your authorpane, as if u run inspect element u will get http://webflake.sx/uploads/profile/photo-thumb-173.png this as the image used and not the original file u uploaded, thats cause IP.Board crops the image and uses the crop image instead and if ur just doing css edit it will only modify that image size which is square and not the original if it were rectangle dimensions, my tut allows u to use the original in ur authorpane instead of a crop 

[Cheerio 135]

Custom.css will override all css if told to do so, that includes the css governing the avatar dimensions.

like say..

 

.ipsUserPhoto_xlarge img, img.ipsUserPhoto_xlarge, .ipsUserPhoto_xlarge:after 
{
    height:150px;
}

now i havent tried this and this is untested code, but the ability is sound.

Edited September 5, 2015 by Erza
Restored deleted content

[John 83]

Custom.css will override all css if told to do so, that includes the css governing the avatar dimensions.

like say..

 

.ipsUserPhoto_xlarge img, img.ipsUserPhoto_xlarge, .ipsUserPhoto_xlarge:after 
{
    height:150px;
}

now i havent tried this and this is untested code, but the ability is sound.

​

i just learned something there man, thanks, i manually edited misc.css and added my css part in it but u can add the css part in there as well and it will do as u said, however doesnt change the source of the avatar used on the authorpane, that source is a square or the same link as i showed u above which is a thumb of the original u uploaded, stretching a square image to the dimensions of a rectangle doesnt always look good, what my edit above does is totally different it changes the image source to that of what was uploaded the original dimensions and uses it on the authorpane what we do with the css is just shrink the width or expand it to whatever we want while keeping the height free instead of having a square outcome 

[Ben 2]

Tried your tutorial John, but the images wont appear after. Your way Beaker still achieves the square profile picture view, and it also makes images that isn't that big dragged out. If there was a way to have them all re-adjust according to height and being proportionate to the width.

I tried something like this

{
max-width: 170px;
height: auto; 
}

 

and
Didn't seem todo the trick either. 

Edited August 2, 2015 by Ben

[John 83]

Tried your tutorial John, but the images wont appear after. Your way Beaker still achieves the square profile picture view, and it also makes images that isn't that big dragged out. If there was a way to have them all re-adjust according to height and being proportionate to the width.

I tried something like this

{
max-width: 170px;
height: auto; 
}

 

and
Didn't seem todo the trick either. 

i retested my code on the newest version of the board available to me and it worked, my questions are what images arent showing exactly? is it the default avatars or the avatars uploaded or both? next question, is the avatars you uploaded showing up in the profile, and other places besides the post area? and lastly did you make sure to read my instructions well and replace the default avatar link in the code above?

[Ben 2]

It shows everywhere except in the post area..

Its not the default avatars, they're okey, only the ones thats uploaded.

[John 83]

Step 4

Code Updated

Edited August 16, 2015 by John