• Resolved jimtron

    (@jimtron)


    This plugin is great, except for one thing that’s bugging me. There’s no way that I can find to display images, without any cropping, and with the same height.

    I have a bunch of images all sized to 500px height, with varying widths, because the aspect ratios are different. I don’t want the images cropped at all (I realize that smart crop would maintain a consistent height, but at the cost of cropping the images).

    If I uncheck smart crop, and set the slideshow to 500px height, the widths stay the same but heights vary.

    Any way to keep the height the same for all pics without cropping them?

    Update: It looks like coinslider will do this, but not the other three. I would go with coinslider but would prefer to use a simple transition, like a simple slide or fade, which coinslider doesn’t seem to have.

    http://wordpress.org/extend/plugins/ml-slider/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi jimtron,

    It wouldn’t be possible to keep the same heights without cropping them as the image would get distorted.

    If the slideshow is 900px x 500px, then:

    A 600px x 500px image would be stretched horizontally up to 900px wide (same height)
    A 1000px x 500px image would be squeezed down to 900px wide (same height)

    Regards
    Tom

    I’m actually looking for this as well. I don’t mind if the images get cropped, as long as the height remains the same. If the image is 900px wide and 500px tall and someone increases their browser window to, let’s say 1200px, the image can stretch to 1200px wide as long as it remains 500px tall (cropping off parts of the top/bottom in doing so instead of stretching).

    Given that the WP Media Manager uses both GD Lib and ImageMagick could you not use them to simply resize the image and add a colored background based on a user selection in the admin controls? I don’t think it would be hard to setup at all. In fact I am going to take a look at hacking your plugin to do just that… the only problem is if you ever do an update I will lose my hack – unless you can point me towards any hooks you use that I can tap into from the functions.php file.

    Hi thorakmedichi,

    That’s the plan.. one day 🙂

    It is indeed simple in theory, but I’m not sure in practice. I think you’d need to extend the core WPImageEditor classes and add a ‘pad’ function first of all, for both ImageMagick and GD.

    Then modify the ImageEditor class in Meta Slider. There’s no where to hook in there really, but maybe you could hook into the core ImageEditor “crop” function instead. If you need any hooks put into Meta Slider let me know and I’ll add them in, that ImageEditor class could do with some tidying up anyway!

    Regards,
    Tom.

    Hey Tom,

    Just an update in case you are interested. I got this working for GD. I am sure it would be quite simple for ImageMagick as well by applying the same theory.

    Just so you know what I did to get it to work on my site. It is far from polished per se but its a good starting point at least for you 🙂

    Keep in mind what I have added to my functions.php file and as the include file could be incorporated into your own plugin instead. I was just trying to stay out of it as much as possible in case you publish any other updates.

    File adjustments:

    my functions.php

    function rs_add_scale_to_image_editor( $editors ) {
    	if( ! class_exists( 'WP_Image_Editor_Scale' ) )
    		include( 'inc/image-editor-scale.php' );
    
    	array_unshift( $editors, 'WP_Image_Editor_Scale' );
    	return $editors;
    }
    add_filter( 'wp_image_editors', 'rs_add_scale_to_image_editor' );

    new file saved in my theme/inc/ folder image-editor-scale.php

    class WP_Image_Editor_Scale extends WP_Image_Editor_GD {
    
    	public function hex2rgb($hex) {
    			   $hex = str_replace("#", "", $hex);
    
    			   if(strlen($hex) == 3) {
    				  $r = hexdec(substr($hex,0,1).substr($hex,0,1));
    				  $g = hexdec(substr($hex,1,1).substr($hex,1,1));
    				  $b = hexdec(substr($hex,2,1).substr($hex,2,1));
    			   } else {
    				  $r = hexdec(substr($hex,0,2));
    				  $g = hexdec(substr($hex,2,2));
    				  $b = hexdec(substr($hex,4,2));
    			   }
    			   $rgb = array($r, $g, $b);
    			   //return implode(",", $rgb); // returns the rgb values separated by commas
    			   return $rgb; // returns an array with the rgb values
    	}
    
    	public function scale ( $max_w, $max_h, $color ) {
    
    			// Get the current image size
    			$size	= $this->size;
    			$src_w 	= $size['width'];
    			$src_h 	= $size['height'];
    
    			/* Lets do some math that is needed for scaling and placing the resized image
    			 *****************************************************************************/
    
    			// Set our defaults for either max height or max width
    			$new_w		= $max_w;
    			$new_h 		= $max_h;
    			// Set our defaults for where to place the resized image in the new image
    			$align_w	= 0;
    			$align_h 	= 0;
    
    			// Determine if the image is landscape or portrait
    			if( $src_w > $src_h ){
    				$ratio = $src_h / $src_w;
    				$new_h = (int)round($new_w * $ratio); // Proportionatly Scale height of image to fit MAX frame
    				$align_h = ($max_h - $new_h) / 2; // Center resized image in new image
    
    				// Double check that the new dimensions dont break the containers height restrictions
    				if ( $new_h > $max_h ){
    					$new_h = $max_h; // Set the height of the image to the max height of the container
    					$new_w = (int)round($new_h / $ratio); // Determine new width to make image fit max height
    					$align_h = 0; // Its full height so align to top
    					$align_w = ($max_w - $new_w) / 2; // Center across the width
    				}
    
    			}else{
    				$ratio = $src_w / $src_h;
    				$new_w = (int)round($new_h * $ratio); // Proportionatly Scale width of image to fit MAX frame
    				$align_w = ($max_w - $new_w) / 2; // Center resized image in new image
    			}
    
    			/*****************************************************************************/
    
    			// Create a new image based on the max dimensions provided
    			$scaled_image = wp_imagecreatetruecolor( $max_w, $max_h );
    
    			if ( function_exists( 'imageantialias' ) )
    				imageantialias( $scaled_image, true );
    
    			// Convert the users hex value to RGB
    			$rgb = $this->hex2rgb ( $color ); 
    
    			// Color the image background
    			$color = imagecolorallocatealpha ( $scaled_image , $rgb[0] , $rgb[1] , $rgb[2] , 0 );
    			imagefilledrectangle( $scaled_image, 0, 0, $max_w, $max_h, $color);
    
    			// Copy the old image, scale it to fit proportionatly into the new image with no cropping
    			$old_image = imagecreatefromjpeg($this->file);
    			imagecopyresampled  ( $scaled_image, $old_image, $align_w, $align_h, 0, 0, $new_w, $new_h, $src_w, $src_h);
    
    			// Update WP and finish
    			if ( is_resource( $scaled_image ) ) {
    				imagedestroy( $this->image );
    				$this->image = $scaled_image;
    				$this->update_size();
    				return true;
    			}
    
    			return new WP_Error( 'image_scale_error', __('Image crop failed.'), $this->file );
    	}
    }

    Edits to your files:

    metaslider.imagehelper.class.php

    added private $color; to opening declarations
    added $this->color = $color; to your __construct
    commented out the following lines in your ‘resize_image’ function

    /*
    		$dims = image_resize_dimensions($orig_size['width'], $orig_size['height'], $dest_size['width'], $dest_size['height'], true);
            if ($dims) {
                list($dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h) = $dims;
                $image->crop($src_x, $src_y, $src_w, $src_h, $dst_w, $dst_h);
            }
    		*/

    added $image->scale( $this->container_width, $this->container_height, $this->color ); in place of the commented lines

    By just adding the above lines the image will always have a black background. If you want users to enter a custom value without editing code then the follow has to be added / changed in your plugin itself.

    ml-slider.php
    added this to your ‘render_admin_page’ function after height and width

    'color' => array('priority' => 25, 'type' => 'text', 'size' => 6, 'value' => $this->slider->get_setting('color') == 'false' ? 'FFFFFF' : $this->slider->get_setting('color'), 'label' => __("BG Color", "metaslider"), 'class' => 'coin flex responsive nivo', 'helptext' => __("Slideshow background color", "metaslider"), 'after' => __("", "metaslider") ),

    metaslide.image.class.php
    adjusted all the ‘new MetaSliderImageHelper()’ calls to include ‘color’ option (either $settings['color'] or $this->settings['color']

    I hope that helps you or anyone else looking into this idea.

    Cheers
    Ryan

    Hey Ryan,

    Wow. That’s awesome! Looks great. I’d be interested to see the result if you have a link to a site?

    Something like this will definitely go into Meta Slider at some point. I’ll need to find a few hours spare to test this all out, and I think I’ll need to implement it for ImageMagick too before it goes in. Lots of stuff to think about but this is (more than) a good start.

    I wonder if there’s anything I could do in the mean time to allow this to become a separate plugin/purely edits to functions.php. The edit to ml-slider.php (render_admin_page) can be done through a filter.. But I think ImageHelper would need quite a big refactor, for starters maybe I could pass through the whole $settings array. I’ll certainly take a look (it might take a while for me to find some free time) and update here.

    Regards,
    Tom.

    The site I am using this for is still under development so its all being run on a local server at the moment – so no link to share unfortunately. I will of course share it once the site goes live in about 3 weeks 🙂

    I still want to implement ImageMagick for it as well. So lets see who gets there first hahaha.

    I thought about doing this as a plugin addition to yours but I got lazy and just ‘hard-wired’ it in to the site. I wasn’t quite sure how all your code went together because I only had a day to mess around with it. It just means I cant update Meta Slider now haha. Oh well. Just dont do any major changes on me before you implement it yourself.

    ImageHelper would be the hardest one to implement with an add on plugin. I just couldn’t think of anyway to manipulate it without writing to your core file… unless of course you add an if (! function ){} wrapper – then I could maybe do an over-ride in functions.php. Again, haven’t spent to much time on it because I didn’t want to get too buried into figuring out your entire code setup.

    If you feel the need to break out of this forum for further discussions please feel free to email me directly at ryan@sketchpad-media.com . I would be willing to try and assist with things when / as I find time.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘no crop, same height’ is closed to new replies.