SocialEngine correct image resizing

Eugene Sutula — Mon, 21 Jul 2008 16:14:21 +0000

This was the first thing I’ve found in SocialEngine that should be enhanced.
As you may have noticed SocialEngine in most of cases resizes images using html width and height options.
While this is the easiest technique it’s not the best one. If you want to keep the high quality of images uploaded by users you need to find another solution here.

I’ve created a mod that can help you to solve this problem. It uses caching, so it will increase the page loading speed of your website.
Let me demonstrate how you can resize images using phpthumb library.

To install this mod you need to follow the next steps

1. Download the mod from http://webhive.com.ua/products/se_thumb.html
and copy all files from archive to your SocialEngine folder.
2. Set permissions ‘777′ to folders thumbs/cache and thumbs/tmp after upload.

3. Download phpThumb library from
http://phpthumb.sourceforge.net/#download
Take the latest stable version you see there (1.7.8 at the moment of writing this doc)
Unzip it and upload to folder include/phpThumb/ in your SocialEngine directory.

4. Now we will need to edit some files (I advise you to make backup copies of all files you will edit).

Let’s create a function that will output thumbnails of the image instead of original images
include/class_user.php
Go to the end of file and add before last brace (“}”) next code:

function user_thumb($nophoto_image = “”, $w=90, $h=90) {

$user_id = $this->user_info[user_id];
$subdir = $user_id+999-(($user_id-1)%1000);
$userdir = "uploads_user/$subdir/$user_id/";
$user_photo = $userdir.$this->user_info[user_photo];
if(!file_exists($user_photo) | $this->user_info[user_photo] == "") { $user_photo = $nophoto_image; }
$user_photo = './show_thumb.php?src='.$user_photo."&w=".$w."&h=".$h;
return $user_photo;
} // END user_thumb() METHOD

Now we will need to increase the quality of newly uploaded images from 75%(default) to 100%

include/class_upload.php
Search for next code (you will find 4 occurrences):

imagejpeg($file, $photo_dest);

pre>
and change all 4 occurrences of this code to
<pre lang="php">imagejpeg($file, $photo_dest, 100);

Now when our mod is installed we need is to replace the links from big images resized with html with links to our thumbnail generator

templates/home.tpl

Search for next code (line ~152):

user_photo(" border="0" alt="" width="{$misc->photo_size($signups[signups_loop]->user_photo(" />

Change to
lang="html4strict"> class="photo" src="{$signups[signups_loop]->user_thumb(" border="0" alt="" width="{$misc->photo_size($signups[signups_loop]->user_photo(" />

Search for code (line ~178):

user_photo(" border="0" alt="" width="{$misc->photo_size($friends[friends_loop].friend->user_photo(" />

Change to
lang="html4strict"> class="photo" src="{$friends[friends_loop].friend->user_thumb(" border="0" alt="" width="{$misc->photo_size($friends[friends_loop].friend->user_photo(" />

Search for code:

user_photo(" border="0" alt="" width="{$misc->photo_size($logins[login_loop]->user_photo(" />

Change to
lang="html4strict"> class="photo" src="{$logins[login_loop]->user_thumb(" border="0" alt="" width="{$misc->photo_size($logins[login_loop]->user_photo(" />

Now when all images on your home page are beautifully resized, let’s proceed and make all images on profile page look great too

templates/profile.tpl

Search for code(line ~395)

user_info.user_username)}'>user_photo(" border="0" alt="" width="{$misc->photo_size($comments[comment_loop].comment_author->user_photo(" />

Change to
lang="html4strict"> href="{$url->url_create(">user_info.user_username)}'> class="photo" src="{$comments[comment_loop].comment_author->user_photo(" border="0" alt="" width="{$misc->photo_size($comments[comment_loop].comment_author->user_thumb(" />

I will try to cover the rest of the SocialEngine pages in future posts, but if you have understood what we have done you can try to do it yourself.

WebHive Blog » Programming

SocialEngine correct image resizing