1

Topic: Avatar automatic resize when upload

Hi! Dunno if this has been discussed before, but didn't find anything about it when I searched.

My question is simple, is there any way to make the avatar to resize itself when you upload.
It doesnt need to actually resize, only change the appearence.

Example:
I upload a image thats 200x150, and its displayed as the margins you set, like 80x80. But the image itself are still 200x150.
As in the html code:

"title.gif" is 200x150
<img src="title.gif"  width="80" height="80">

Or even better if the aspect ratio is keeped. The height value is a variable. So the width is fixed to say 80px, and the height becomes what aspect ratio the image has.

Example:
Upload "title.gif" thats 200x150
Resize to 80x#
Displays as 80x60 (the same aspect ratio but with 80 in width)


Anybody understands what I'm saying? tongue Sorry for bad english or stupid examples, it's just for being clear.
Anyway, can this be done? (via extension or modification or anything)
This will simplify the ability to upload avatars and wont force ppl to resize their images in photoshop or whatev, not every1 knows how to do it properly. Ofc you can set the size restriction.

2 (edited by Kushi 2011-11-26 21:40)

Re: Avatar automatic resize when upload

Well, there is a way.

You should off the limits ( set big ones ) in administration panel ( Settings -> Features -> Avatar max width/height ) and then add this to your's style CSS, preferably at the bottom.

.useravatar img{
    width: 80px;
    height: auto;
}

( set width according to your's will )
Warning! It does not resize images. Which means they would weight a lot if somebody uploaded some big ones. And I advise against using it. Another issue - if somebody had smaller avatar, it would show it bigger, pixelized.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

3 (edited by Bri4n 2011-11-27 02:04)

Re: Avatar automatic resize when upload

Kushi wrote:

You should off the limits ( set big ones ) in administration panel ( Settings -> Features -> Avatar max width/height ) and then add this to your's style CSS, preferably at the bottom.

.useravatar img{
    width: 80px;
    height: auto;
}

EDIT: Worked like a charm! Thank you very much! The image byte size can still be set at the forum-settings, thus removing the chance of getting really big images.

+1 Karma
Like your Hydrogen template aswell, using it, loving it! smile

4 (edited by Kushi 2011-11-27 12:31)

Re: Avatar automatic resize when upload

Here is a little extension
http://min.us/lnnHYlKb6ZVl1
it would avoid resizing smaller avatars to bigger ones.
You can customize it in lines 28 and 29

        $avatar_max_width = 80;
        $avatar_max_height = 80;

No CSS changes needed - You can delete previous code. But still it wouldn't resize physically images ( it can be done but I'm not skilled enough ).

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

5 (edited by Bri4n 2011-11-27 12:12)

Re: Avatar automatic resize when upload

Oh, I will try it!
You set max value both for height and width? Does that mean it will always take the bigger value to the limit, and the other to its current aspect ratio, if you know what I mean?

EDIT: Working fine! Removed code, installed extension, tested to upload smaller image then max and it didnt scale up, tested with bigger and it scaled down, SWEET! smile

Question: when a users go to the "upload avatar" section in profile, theres a info text saying things like:

    Uploading a new avatar will replace your existing avatar.
    The allowed image file types are gif, jpeg and png.
    The maximum image size allowed is 500x500 pixels and 50,000 bytes (49 KB).

I want to add a text to that infobox saying like "Images will autoresize if bigger then 80x80", I've found the forum/lang/English/profile.php where the text is, but to add a line requires a new php-tag aswell. I'm not exactly the php-pro so don't really know how to do it hmm

6 (edited by Kushi 2011-11-27 12:48)

Re: Avatar automatic resize when upload

Oh! Mea culpa - it was checking width firstly, and making some mistakes due to that. Here is version which works just like you said.

edit

And here it is,
http://min.us/lGq1Z5CZKwVvN
it displays info e.g.

Images will be resized automaticly, if they're bigger than 80x120 pixels.

which can be edited in line 64

                $forum_page['frm_info']['avatar_size'] .= '<li><span>Images will be resized automaticly, if they\'re bigger than '.$avatar_max_width.'x'.$avatar_max_height.' pixels.</span></li>';

Sorry, that i didn't make lang file, but I'm just learning.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

7 (edited by Bri4n 2011-11-27 16:22)

Re: Avatar automatic resize when upload

EDIT: Hmm... dont really work so good. The info is working but the avatars are scaling wierd. First of all the width stretches to more then the max value, and the height is maintained. But the aspect ratio isnt keeped.

I set the limits in manifest.xml to max width = 150 and max height = 200,

and the output on forum was;
example1: 500x304 became 200x200
example2: 246x249 became 193x200


EDIT2: Tested to uninstall the extension, to see the output, and it stretches image by itself. The forum settings are 500x500. I uploaded a 500x304, and the output became 255x255 so the aspect ratio changed and the limit was 255 :S

8 (edited by Kushi 2011-11-27 18:44)

Re: Avatar automatic resize when upload

Aw I see error too hmm. I'll try to fix it.

edit

Well You should check this one
http://punbb.informer.com/forums/topic/ … -resizing/
I have no idea how to transform it into extension

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

9

Re: Avatar automatic resize when upload

Thanks for info, I tried it, but the code was a little different in profile.php on PunBB1.4 compared to 1.3, but tried anyway, didnt make it work like it was supposed to hmm

10 (edited by Kushi 2011-11-27 21:00)

Re: Avatar automatic resize when upload

Profile.php
Find

// Now check the width/height
                        if (empty($width) || empty($height) || $width > $forum_config['o_avatars_width'] || $height > $forum_config['o_avatars_height'])
                        {
                            @unlink($forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                            $errors[] = sprintf($lang_profile['Too wide or high'], $forum_config['o_avatars_width'], $forum_config['o_avatars_height']);
                        }
                        else if ($type == 1 && $uploaded_file['type'] != 'image/gif')    // Prevent dodgy uploads
                        {
                            @unlink($forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                            $errors[] = $lang_profile['Bad type'];
                        }

Replace by

// Now check the width/height
            list($width, $height, $type,) = getimagesize($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');
            if (empty($width) || empty($height) || $width > $forum_config['o_avatars_width'] || $height > $forum_config['o_avatars_height'])
            {

                // Attempt to resize if GD is installed with support for the uploaded image type, as well as JPG for the output
                $check_type = str_replace(array(1, 2, 3), array('IMG_GIF', 'IMG_JPG', 'IMG_PNG'), $type);
                if (extension_loaded('gd') && imagetypes() & constant($check_type) && imagetypes() & IMG_JPG)
                {

                    // Load the image for processing
                    if ($type == 1) $src_img = @imagecreatefromgif($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                    elseif ($type == 2) $src_img = @imagecreatefromjpeg($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                    elseif ($type == 3) $src_img = @imagecreatefrompng($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');

                    if ($src_img)
                    {

                        // Figure out new image dimensions based on the maximum width
                        $new_w = $forum_config['o_avatars_width'];
                        $ratio = $height * $new_w;
                        $new_h = $ratio / $width;

                        // Do the new dimensions, based on the maximum width, fit the maximum height? If not, recalculate
                        if ($new_h > $forum_config['o_avatars_height'])
                        {
                            $new_h = $forum_config['o_avatars_height'];
                            $ratio = $width * $new_h;
                            $new_w = $ratio / $height;
                        }

                        // Resize the image
                        $new_img = imagecreatetruecolor($new_w, $new_h);
                        imagecopyresampled($new_img, $src_img, 0, 0, 0, 0, $new_w, $new_h, $width, $height);

                        // Delete the old image and write the newly resized one
                        @unlink($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                        imagejpeg($new_img,$base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp',85);

                        // Set the extension to JPG, since that's what the resized image is now
                        $extensions[0] = '.jpg';
                    }

                    // Something went wrong while attempting to load the image for processing
                    else
                    {
                        @unlink($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                        message('An unexpected error occured while attempting to resize the image.');
                    }
                }

                // No GD installed or image type not supported; can't resize
                else
                {
                    @unlink($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                    message($lang_profile['Too wide or high'].' '.$forum_config['o_avatars_width'].'x'.$forum_config['o_avatars_height'].' '.$lang_profile['pixels'].'.');
                }
            }
            else if ($type == 1 && $uploaded_file['type'] != 'image/gif')    // Prevent dodgy uploads
            {
                @unlink($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp');
                message($lang_profile['Bad type']);
            }

            // Make sure the file isn't too big
            if (filesize($base_url.'/'.$forum_config['o_avatars_dir'].'/'.$id.'.tmp') > $forum_config['o_avatars_size'])
                message($lang_profile['Too large'].' '.$forum_config['o_avatars_size'].' '.$lang_profile['bytes'].'.');

Find

// Make sure the file isn't too big
                    if ($uploaded_file['size'] > $forum_config['o_avatars_size'])
                        $errors[] = sprintf($lang_profile['Too large'], forum_number_format($forum_config['o_avatars_size']));

Delete it

include/functions.php
Find

$avatar_markup = '<img src="'.$base_url.'/'.$path.'" width="'.$avatar_width.'" height="'.$avatar_height.'" alt="'.$alt_attr.'" />';

Replace by

$avatar_markup = '<img src="'.$base_url.'/'.$path.'" alt="'.$alt_attr.'" />';

If you get

The server was unable to save the uploaded file.

error, chmod /img/avatars/ folder.

Now you set maxsize ( avatars would be resized to it ) in Settings -> Features

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

11 (edited by Bri4n 2011-11-27 21:52)

Re: Avatar automatic resize when upload

Aight! Will get right to it! ..and thanks for putting up with me :>

EDIT: well, didnt work, im not saying your code is the problem though, I think something could be wrong with my installation or somethin. Bcuz I have this index "problem", it started with the extension "last_topic_title_on_forum_index", nothing showed up on index-page, and then the extension "pun_admin_clear_cache", no link appeared in footer, and even when I checked the box for "Show moderator list on index", which is a standard forum function, nothing showed up on index... so something must be wrong with my installation, should do a reinstall I think.

EDIT2: At the moment I'm using the very first method you gave me, works just fine!
in the style css document:

.useravatar img{
    width: 150px;
    height: auto;
}

combined with a modification of your extension, only updating the infobox, in manifest.xml:

        <hook id="pf_change_details_avatar_pre_header_load"><![CDATA[
                $forum_page['frm_info']['avatar_size'] .= '<li><span>Images will be resized automatically, if they\'re wider than 150 pixels.</span></li>';

        ]]>
        </hook>

Works great at the moment smile

12

Re: Avatar automatic resize when upload

Goodness, I will attempt it!

You set max esteem both for stature and width? Does that mean it will dependably take the greater incentive as far as possible, and the other to its present angle proportion, if you catch my drift?

Alter: Working fine! Expelled code, introduced augmentation, tried to transfer littler picture then max and it didnt scale up, tried with greater and it downsized, SWEET! grin

Question: when a clients go to the "transfer symbol" area in profile, theres an information content saying things like:

Transferring another symbol will supplant your current symbol.

The permitted picture document types are gif, jpeg and png.

The greatest picture estimate permitted is 500x500 pixels and 50,000 bytes (49 KB).

I need to add a content to that infobox saying like "Pictures will autoresize in the event that greater, 80x80", I've discovered the gathering/lang/English/profile.php where the content is, however to include a line requires another php-tag aswell. I'm not actually the php-genius so don't generally realize how to do it gee