Viewed   86 times

I have a quick question that I'm not quite sure to set up. I've seen examples elsewhere but nothing specifically like my situation. I would like to resize images using PHP so they're readable and not just wonkily stretched like if you use HTML. If they're not 250 pixels wide, or 160 pixels tall, how can I resize the picture so it's proportionate but fits within that space?

Thanks!

 Answers

3

Ok, so below is an Image object that I use in my store. It maintains scale - requires GD

<?php
class Store_Model_Image extends My_Model_Abstract 
{
    const PATH  = STORE_MODEL_IMAGE_PATH;
    const URL   = "/store-assets/product-images/";

    public function get_image_url($width, $height)
    {
        $old_file = self::PATH . $this->get_filename();
        $basename = pathinfo($old_file, PATHINFO_FILENAME);

        $new_name = sprintf("%s_%sx%s.jpg", $basename, $width, $height);
        if(file_exists(self::PATH . $new_name))
        {
            return self::URL . $new_name;
        }
        else
        {
            list($width_orig, $height_orig, $image_type) = @getimagesize($old_file);
            $img = FALSE;

            // Get the image and create a thumbnail     
            switch($image_type)
            {
                case 1:
                    $img = @imagecreatefromgif($old_file);
                    break;
                case 2:
                    $img = @imagecreatefromjpeg($old_file);
                    break;
                case 3: 
                    $img = @imagecreatefrompng($old_file);
                    break;
            }

            if(!$img)
            {
                throw new Zend_Exception("ERROR: Could not create image handle from path.");
            }

            // Build the thumbnail
            if($width_orig > $height_orig)
            {
                $width_ratio = $width / $width_orig;
                $new_width   = $width;
                $new_height  = $height_orig * $width_ratio;
            }
            else
            {
                $height_ratio = $height / $height_orig;
                $new_width    = $width_orig * $height_ratio;
                $new_height   = $height;
            }

            $new_img = @imagecreatetruecolor($new_width, $new_height);

            // Fill the image black
            if(!@imagefilledrectangle($new_img, 0, 0, $new_width, $new_height, 0))
            {           
                throw new Zend_Exception("ERROR: Could not fill new image");
            }

            if(!@imagecopyresampled($new_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width_orig, $height_orig))
            {
                throw new Zend_Exception("ERROR: Could not resize old image onto new bg.");
            }

            // Use a output buffering to load the image into a variable
            ob_start();
            imagejpeg($new_img, NULL, 100);
            $image_contents = ob_get_contents();
            ob_end_clean();

            // lastly (for the example) we are writing the string to a file
            $fh = fopen(self::PATH . $new_name, "a+");
            fwrite($fh, $image_contents);
            fclose($fh);

            return self::URL . $new_name;
        }
    }
}

I resize the image at request time, so the first time the page loads an image will be resized to the required size for the template. (this means I don't have to crash a shared host trying to regenerate image thumbnails everytime my design changes)

So in the template you pass your image object, and when you need a image thumb,

<img src="<?php echo $image->get_image_url(100, 100); ?>" />

you now have a 100x100 thumb, which is saved to the Server for reuse at a later date

Sunday, August 14, 2022
5

I tend to use a framework of one description or another, which cover's the file upload part. However, do have a recommendation for the cropping bit:

Imagine - https://github.com/avalanche123/Imagine

And if you want to make the uploader a tiny bit better than just an input type=file, try:

https://github.com/valums/file-uploader

Saturday, December 24, 2022
5

Have you tried Imagine? It meets all your requirements.

I had used it once (however for a very simple image manipulation) and it turend out to be a pretty useful and easy-to-use library.

Thursday, October 20, 2022
5

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto9 for IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

for example :

img {
    max-width: 100%;
    height: auto;
    width: auto9; /* ie8 */
}

and then any images you add simply using the img tag will be flexible

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

Monday, December 26, 2022
2

Override must be accessed via RequestOptions in the most recent version of Glide 4.x. You can add RequestOptions through apply()

Glide
    .with(context)
    .load(path)
    .apply(new RequestOptions().override(600, 200))
    .into(imageViewResizeCenterCrop);
Sunday, August 14, 2022
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :