Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Aligning a Cropped Image


Go to End


9 Posts   5621 Views

Avatar
vincent_vega

Community Member, 14 Posts

31 March 2011 at 3:15pm

This might have been covered already but i can't find it, so sorry in advance if it has.

Basically i want a cropped image to display from top left instead of the centre

heres the code i'm using, it works fine (top left) if the original image is no more than 467px high, any higher, it starts to centre it

<a href="$Link">$Photo.CroppedImage(305,200)</a>

Cheers

Avatar
vincent_vega

Community Member, 14 Posts

4 April 2011 at 2:11pm

Any ideas out there?

Avatar
Carbon Crayon

Community Member, 598 Posts

4 April 2011 at 10:40pm

Hi Vincent_Vega,

I had a quick look in the GD class and there is a function crop($top, $left, $width, $height) which looks like it might be what you are looking for.

have a look at this tutorial that shows you how to take full advantage of all the functions in the GD class by decorating Image with your own functions:

http://www.ssbits.com/tutorials/2010/rotating-and-greyscaling-images-using-gd-and-decorators/

Let me know how you get on :)

Aram

www.SSbits.com - Your one stop SilverStripe learning resource.

Avatar
vincent_vega

Community Member, 14 Posts

5 April 2011 at 5:39pm

Cheers Aram for your response,

I'm actually creating a Portfolio based on your tutorial "DataObjects as Pages - Part 1", I knew there would be an easy solution out there, so i'll give it a crack :)

thanks again mate

Avatar
anotherasterix

Community Member, 2 Posts

27 April 2011 at 4:03am

Great, just had the same problem. My portfolio images got cropped the wrong way... Trying to extend the BetterImage class now with a CropedFromTopImage.

What would we do without Aram and his tutorials and forum posts? Already helped me so much this weekend! Thanks.

Avatar
Carbon Crayon

Community Member, 598 Posts

27 April 2011 at 4:10am

Hehe thanks anotherasterix, always glad to know I have been able to help :)

Aram

www.SSbits.com - Your one stop SilverStripe learning resource.

Avatar
anotherasterix

Community Member, 2 Posts

27 April 2011 at 4:55am

Edited: 27/04/2011 4:57am

if it's of use for anybody, I extended the BetterImage class SSBits Image Tutorial with a CroppedFromTopImage function. Thought I'd share it.

So far it centers the cropped image, if you want it to crop from top left adjust the function generateCroppedFromTopImage() (from line 65) according to the comment.

Just a quick hack, I guess it could be done more nicely. Always open to suggestions.

Jonas

Edit: Server fails, when I try to attach the file, so here are the two functions I changed/added:

    public function getFormattedImage($format, $arg1 = null, $arg2 = null) {
        if($this->ID && $this->Filename && Director::fileExists($this->Filename)) {
            $size = getimagesize(Director::baseFolder() . '/' . $this->getField('Filename'));
            $preserveOriginal = false;
            switch(strtolower($format)){
                case 'croppedimage':
                    $preserveOriginal = ($arg1 == $size[0] && $arg2 == $size[1]);
                    break;
                case 'croppedfromtopimage':
                    $preserveOriginal = ($arg1 == $size[0] && $arg2 == $size[1]);
                    break;
            }
             
            if($preserveOriginal){
                return $this;
            } else {
                return parent::getFormattedImage($format, $arg1, $arg2);
            }
        }
    }
    
    /**
	 * Generate a resized copy of this image with the given width & height. Cropped from top-center
	 * Use in templates with $CroppedFromTopImage.
	 */
	function generateCroppedFromTopImage($gd, $width, $height) {
		if(is_numeric($gd) || !$gd){
			USER_ERROR("Image::generateFormattedImage - generateCroppedFromTopImage is being called by legacy code or gd is not set.",E_USER_WARNING);
		}else{
			
			if($gd->getWidth / $gd->getHeight >= $width/$height){
				$gd = $gd->resizeByHeight($height);
				$left = ($gd->getWidth - $width)/2; //center cropped image.
				// if you want to cut from top left or right make $left = 0 or $gd->getWidth - $width respectively
			}else{
				$gd = $gd->resizeByWidth($width);	
				$left = 0;
			}
			return $gd->crop(0, $left, $width, $height);
		}
	}

Avatar
Schaper Software

Community Member, 3 Posts

27 January 2012 at 2:38am

Just implemented anotherasterix's solution.
There are some little PHP bugs inside the function generateCroppedFromTopImage:

Instead of

$gd->getWidth  and $gd->getHeight

it has to be

$gd->getWidth() and $gd->getHeight()

Now everything works fine, Thank you very much;)

Hendrik

Go to Top