Changing the aspect ratio of profile images / thumbnails?

Thorium · September 2015

I posted about this issue yesterday, but I left out some critical information and didn't get an answer, so I'm trying again

Basically, I'm trying to change the aspect ratio of my profile photos and (and their thumbnails) from 1:1 to 1:2, or 40 x 40 to 40 x 80.
I've found tons of information on simply making the image larger by adding a line to the config file and playing with the CSS, but I can't find anything on changing the actual ratio.

This is what I have at the moment - http://i.imgur.com/oilvc4v.png
And this is what I want it to look like - http://i.imgur.com/meey15N.png

(Though of course, I don't want the image to be stretched)

I'm using version 2.1.11, the site I'm working on is modernpowers.net and I'm using a very slightly customised version of the default theme.
Can anyone help me out here?

vrijvlinder · September 2015

http://vanillaforums.org/discussion/comment/233664/#Comment_233664

peregrine · September 2015

@vrijvlinder I gave that link yesterday in the almost duplicate question the OP posted yesterday.

but it was not satisfactory. or it didn't work for them or they didn't try it.

so instead of commenting they started a new discussion.

http://vanillaforums.org/discussion/30806/resizing-profile-photos-to-a-different-aspect-ratio

not the code.

the answer is - it is not that simple as that. think about it.

the problem is this: what if someone uploads an image that is 1000px in height and 500px in width.

2:1 height to width

and you want to convert to 1:2 height to width or 40:80

how do you expect it to look if it isn't cropped it has to be stretched.?
where do you want it cropped. top center left and right.?
no one can guess what you want.?
are the users uploading 40 x 80 originals or images in 2:1?

here is the picture method. if you want to peruse the code

https://github.com/vanilla/vanilla/blob/master/applications/dashboard/controllers/class.profilecontroller.php#L704

for aspect in thumbnail see....
you can look at saveimageas for the thumbnail

https://github.com/vanilla/vanilla/blob/master/applications/dashboard/controllers/class.profilecontroller.php#L774

774 and 775 represent height and width.

you could add a crop parameters as well to saveimage.

/**
* Saves the specified image at $Target in the specified format with the
* specified dimensions (or the existing dimensions if height/width are not
* provided.
*
* @param string The path to the source image. Typically this is the tmp file name returned by $this->ValidateUpload();
* @param string The full path to where the image should be saved, including image name.
* @param int An integer value indicating the maximum allowed height of the image (in pixels).
* @param int An integer value indicating the maximum allowed width of the image (in pixels).
* @param array Options additional options for saving the image.
* - Crop: Image proportions will always remain constrained. The Crop parameter is a boolean value indicating if the image should be cropped when one dimension (height or width) goes beyond the constrained proportions.
* - OutputType: The format in which the output image should be saved. Options are: jpg, png, and gif. Default is jpg.
* - ImageQuality: An integer value representing the qualityof the saved image. Ranging from 0 (worst quality, smaller file) to 100 (best quality, biggest file).
* - SourceX, SourceY: If you want to create a thumbnail that is a crop of the image these are the coordinates of the thumbnail.
* - SourceHeight. SourceWidth: If you want to create a thumbnail that is a crop of the image these are it's dimensions.
*/

   public static function SaveImageAs($Source, $Target, $Height = '', $Width = '', $Options = array()) {
      $Crop = FALSE; $OutputType = ''; $ImageQuality = C('Garden.UploadImage.Quality', 75);

beware: don't change the imagequality to 100 if you are using 2.1

you can also look at userbanner plugin as well.

it is not for the faint-hearted. and you might get lucky if someone wants to code something for you. but you can experiment as well.

"You" could also look into the library/core/class.uploadimage.php at the saveimageas for ideas.

then if you want to modify the item you drag when you click edit thumbnail so it is a rectangle instead of a square you would need to modify the js here...

vanilla/js/library/jcrop ....

best to override and/or write a plugin with the changes.

Thorium · September 2015

They would be uploading images in 1:2 format. We're having countries flags as avatars so the dimensions will not change between users.

I tried changing the thumbsizes to 40 and 80 but it didn't do anything - Where should I go from here?

peregrine · September 2015

This is the Best I can do to help you. Otherwise someone else will have to help you or you will have to help yourself.

get everyone to resize their images with an image editor to 40px height and 80 px width prior to uploading.

then the following will fix thumbnails and/or userbanners

You could use the userbanner plugin.

with these config statements.

$Configuration['Plugins']['UserBanner']['MaxHeight'] = 40;
$Configuration['Plugins']['UserBanner']['MaxWidth'] = 80;

or if you use the pic you have to change the profile controller or write something that overrides the picture method. You would need to figure that out yourself.

I only know how to do it changing $thumbsize in the profilecontroller. And changing the core is frowned upon. Do what you need to do and be forewarned, if you change the core, the next upgrade will overwrite your changes.

 // Save the uploaded image in thumbnail size
            $ThumbSize = Gdn::Config('Garden.Thumbnail.Size', 40);
            $UploadImage->SaveImageAs(
               $TmpImage,
               "userpics/$Subdir/n$Basename",
               40,
               80,
               array('Crop' => TRUE, 'SaveGif' => C('Garden.Thumbnail.SaveGif'))
            );

and then change the css to 40 and 80 for all profile photo stuff.

in your css (you may need to add important.

you double Profile Photo Large

.ProfilePhotoLarge {
    height: 80px;
    width: 160px;
}


.ProfilePhotoMedium {
    height: 40px;
    width: 80px;
}


.ProfilePhoto {
    height: 40px;
    width: 80px;
}

peregrine · September 2015

sample screenshots of userbanner

and user profile picture and thumbnails with above changes.

and

Changing the aspect ratio of profile images / thumbnails?

Comments