Photo Thumbnails Resize Algorithm Needs Revisiting

This has now been brought to my attention twice.  When using profile photos for the thumbnails, the current algorithm for resizing the photo results in a thumb that may chop off the top of the head.  I am guessing the current algorithm is based on earlier Dolphin that may only used the smaller thumbs as with the avatar of 32x32 and 64x64.  I worked through the algorithm manually, working through the code and drawing grids to get an understanding; or at least a vague understanding, of how the algorithm determined the offset to use in resizing.  I reworked the code for one site and tested it on more than a dozen images of both portrait (height larger than width) and landscapes (height smaller than width) and was able to get a result that worked well for both.  The current algorithm does attempt to adjust based on portrait and landscape images.  To sum up, the current algorithm for creating the thumbnails needs to be revisited because it is causing issues on sites that wish to have larger thumbnails of members.

Just had to adjust this for another site.  The file for those that need to adjust the resize to keep from chopping off the top of heads is /inc/classes/BxDolImageResize.php

The algorithm is the same, it is cropped from the center of the image, so if it is portrait photo then it will cut top and and the bottom of the image. 

Before it was used for small 32x32 and 64x64 images, now it is used to crop square images for bigger sizes. 

Cropping from the centre is not a good idea, Believe me when I say this; I did a lot of work on this.  I had a couple of sites with larger thumbs and it cut off the top of people's heads in the resulting thumbs which was not good.  It would be better to resize without any cropping.

You can disable square resizing very easy in Dolphin 7.2.x, file modules/boonex/photos/classes/BxPhotosConfig.php:

        $this->aFilesConfig = array (
            'icon' => array('postfix' => '_ri.jpg', 'size_def' => 32, 'square' => true),
            'thumb' => array('postfix' => '_rt.jpg', 'size_def' => 64, 'square' => true),
            'browse' => array('postfix' => '_t.jpg', 'size_def' => 240, 'square' => true),
            'browse2x' => array('postfix' => '_t_2x.jpg', 'size_def' => 480, 'square' => true),
            'file' => array('postfix' => '_m.jpg', 'size_def' => 600),
            'original' => array('postfix' => '.{ext}'),
        );

just remove 'square' => true part from 'browse' and 'browse2x'

        $this->aFilesConfig = array (
            'icon' => array('postfix' => '_ri.jpg', 'size_def' => 32, 'square' => true),
            'thumb' => array('postfix' => '_rt.jpg', 'size_def' => 64, 'square' => true),
            'browse' => array('postfix' => '_t.jpg', 'size_def' => 240, 'square' => true),
            'browse2x' => array('postfix' => '_t_2x.jpg', 'size_def' => 480, 'square' => true),
            'file' => array('postfix' => '_m.jpg', 'size_def' => 600),
            'original' => array('postfix' => '.{ext}'),
        );

That is fine buy why not fix this in the 7.2 release?.  Cropping is not good when it cuts off the tops of people's heads and really, this is not an issue of creating square thumbs but of creating thumbs that don't chop off the top of people's heads..

I like the square thumbs, and don't care if heads are chopped off.  It's just for a  preview, and if parts of the image are missing, no one will care. People are used to this sort of thing all over the internet. They are accustomed to the necessity of clicking on a thumb to view the entire picture.

It depends on the type of site one is building.  I had two clients that complained about the top of the heads being chopped off in the images.  The algorithm is flawed in how the thumbs are generated.  To crop from the centre out does not make sense; I changed the algorithm so that thumbs generated from both portrait and landscape images came out square without chopping off the top of the heads.  If I can do it I know damn well that Alex can.

Go back and read what issue this post was dealing with, it had nothing at all to do with square thumbs.

Your solution could be suitable for outline but not rest of thumbnails. Alignment issue will appear

Oh you want the thumb to be generated from upper side of any picture. 

 That would depend on where the 'head' is located in the original image.  I don't care how you crop an image, sooner or later heads will get chopped off from some one direction or the other.  The only way to ensure that doesn't happen, is to go back to the old way of not cropping at all.

it will be better to add dimensions to all photos,  the html render it faster

You don't even know what my solution was.  In this case, it was in the browse members section that was of concern and the amount of chopping off the tops of heads gets worst as the size of the thumbs are increased due to the way the algorithm calculates the offset to crop the images.

I need to go revisit what change I made.  The cropping is to make the thumb square (or rectangular if one wanted).  If someone uploads a photo where they are in landscape mode (I am talking images of the members) then you want to crop that image as well.  I tested on landscape poses in which the member's head was on the left and on the right and found something that worked well in both cases.  Most often you could get by with losing parts of the image at the bottom than at the top (unless the member posed standing on their head).  As I said, I would have to revisit the code changes as this was back in January, 2014.

You should have a look at this:

http://facedetection.jaysalvat.com/

@GG - you mentioned you had 2 persons complain about the cropping - but that is 2 out of how many. I have gotten used to getting complaints from 1 or 2 or 3 people, but if everyone else is NOT complaining, then those few will just have to suffer. Just like managing anything - some will not be happy, and you can not please everyone.

That is one thing I have said about Dolphin in the past - it is a social networking BASE platform with many options for a developer to enable/use. It is by no means perfect for EVERYONE. That's just the way the cookie crumbles sometimes. I deal with it everyday at my regular 9 - 5. A person does not like the way one of our swimsuits fit them. I am sorry that is the case, but the other 250 persons who bought that same suit are happy with it. Do I modify the suit for that one person?

You will end up going crazy worrying about the 1 or 2, I have learned, so I have a minimum number of complaints/feedback before looking to make changes.

No, it is because the algorithm is flawed.  It gets worst when you use larger thumbnails.  The idea is to write code without issues, without errors. to develop Dolphin to be the best platform out there and that means fixing flawed algorithms.

There are hundreds of reasons why a face should be shown. Here are two:

A site featuring celebrities such as singers or bands. People want to see the persons face even in a thumb, not their guitar.

A nudist group site. How wonderful it would be to see dozens of photos of boobs, hairy chests and possibly genitals. That's when a face converts a photo from porn to what it's meant to be.

Programmers often tend to take the easy way out or shove their views down your throat. A "take it or leave it" attitude isn't necessary or helpful, especially if the programmer can make a mediocre script a good one with just a little more effort.

I can't remember where I saw it, but one script allows you to adjust a photo for (say) your album cover pics. A mod developer on the Dolphin site uses a similar approach to adjust rectangular profile cover pics from a square photo.

To press my point home, I'm enclosing a sample of what could be considered embarrassing when an unsuspecting user creates a cover pic from their profile pic.

With this, I rest my case and Geek-Girl, I'm with you all the way on this one.

hi i am not geek but a ameture, wont like head chopped off, if i become member.

see here

http://www.clipular.com/c/5980446295326720.png?k=VWb4jafjnn74BQIGF_-uZko9Srk

There are many sites, who don't even have issues like these.

to me , its a fault and my clients, if any, won't like this

I will do what alex suggested above.. and see what happens

It is possible to make square thumbnail fro, the top if the image instead of center, to do it apply the following modification in inc/classes/BxDolImageResize.php file (~298 line):

->fit($this->w, $this->_isSquareResize ? $this->w : $this->h, null, 'top')

Let me know how it goes - if everyone is happy with this solution we will incorporate it into the upcoming version.

@AlexT, I experimented with your first suggestion and found it to work fine. I also reduced the size of the thumbs to 200 because I think 240 is a bit "In your face." Some sites go as low as 120-150 and I'm even happy with that. It does encourage people to click an look at the big picture.

I'm not sure your current suggestion will answer all our problems. It could have equally bad results with the EVO and Biz2 covers which are obviously popular. My members are already making a mess of their covers - and the site. As such, I've been forced to purchase the Profile cover mod which should resolve this problem and return some sanity to my site.

I teach computers and my guess is that 80-90% of users have no idea how to manipulate photos. As such, the developers of a media intensive site need to consider every way possible to make their site look attractive in the real world. The EVO cover is not helping there.

I have an idea which may help resolve the issue, but I'm about to depart on a trip. If I get time tonight I'll have a play and post it here. Hopefully AlexT, a lot of the code will already be written for you.

Here's my suggestion based on the existing photo Module which need a massive workover. This section will still work in the future even if the remainder of the module is completely re-written.

To my knowledge, it's the first script of its kind to give users an opportunity to crop a photo and ensure all thumbnails contain heads. Ideally it should also have a simple 90 degree rotation feature built in to overcome IPhone sideways images.

As I said, I'm taking off tomorrow and this was rushed, but I'm happy to refine this if you think it has merit. I have just purchased, but not yet installed the PhotoDeluxe module, but from what I can see in the screenshots and on the demo site, it doesn't have these much desired features.

Thank you for your valuable suggestions, we'll consider this for future versions:

https://github.com/boonex/dolphin.pro/issues/238 

I am following this thread and I would like to say it would be great if my thumbnails resized to fit the entire image with NO cropping.  I would like to resize based on width instead of height.  I'm trying to find the file location and code to do this but I am an amateur so I have not found the code yet in the last 3 days.

The thumbnails I know I want to change are the ones that appear in 64x64 boxes on my homepage: www.blacksciencenetwork.com

Small thumbs (64x64 and 32x32) are always square, if you make them non-square it is going to be a lot of design problems. 

Just weighing in so my preference is known. I really like @demmy's suggestion to let the user crop on upload.

I also like that the thumbs are cropped from the center. Please don't change that unless you make it an admin setting.

Am I getting greedy if I want the group and event thumbnails to be their full shape so that logos are not cut off, but keep the profile circle thumbnail undistorted?  I changed the BXPhotosConfig.php 'browse' and 'browse2x' as instructed above and the group thumbnails look great, but now the Profile circle thumbnails are distorted.  Any code combinations that can fix this? 

In both places the images from Photos module are used, so there is no easy way to change it in one place but not in another.

Where can I change the size of the thumbs ? 240x240 is way too big, I'd like them on max. 180 or even less.

Not sure if it has moved; did you try looking in BxPhotosConfig.php?

I changed the size in the BxPhotosConfig but doesn't change anything.

See attached files.

I changed the size in twig.css to make the column smaller, but I can't manage to change the size of the photo block.