Generating Thumbnail with constrain proportions

[Fabien M]

Hi,

My images are not squared, is there a way to generate a thumbnail using only one dimension (Height) so it automatically constrain the other in proportion?

Cheers

[NateL]

Bump.

I need to know about this too. Images are squashed and stretched. Look terrible

[rocky]

No, it's not possible. The best you can do is go to Preferences > Images and change the image size to a non-square size that matches the proportions of your images. It would look weird to have different-proportioned images on your site anyway.

[toifel]

No, it's not possible. The best you can do is go to Preferences > Images and change the image size to a non-square size that matches the proportions of your images. It would look weird to have different-proportioned images on your site anyway.

 

Are you serious?!

Sure this would look wired... but every decent developer would know how to fix that, simply adding fixed dimensions and overflow: hidden to the image wrapping element.

The client I'm actually developing for has images in different sizes, so I really have to tell him to manually edit all images to fit the website image proportions?! If image scaling was really supposed to work like that, this is just plain stupid and without any usability in mind.

 

Gonna hack this myself now... the more I get into prestashop the more frustration I'm actually experiencing... probably my first and last project using presta

[toifel]

Finally found some time to get this done... so this is what the _regenerateNewImages function should probably look like. at least this seems to work for me (function located in AdminImages.php):

 

 

// Regenerate images
private function _regenerateNewImages($dir, $type, $productsImages = false)
{
	if (!is_dir($dir))
		return false;
	$errors = false;
	$toRegen = scandir($dir);
	if (!$productsImages)
	{
		foreach ($toRegen AS $image)
			if (preg_match('/^[0-9]*\.jpg$/', $image))
				foreach ($type AS $k => $imageType)
				{
					// Customizable writing dir
					$newDir = $dir;
					if ($imageType['name'] == 'thumb_scene')
						$newDir .= 'thumbs/';						
					if (!file_exists($newDir))
						continue;						
					if (!file_exists($newDir.substr($image, 0, -4).'-'.stripslashes($imageType['name']).'.jpg'))
						if (!imageResize($dir.$image, $newDir.substr($image, 0, -4).'-'.stripslashes($imageType['name']).'.jpg', (int)($imageType['width']), (int)($imageType['height'])))
							$errors = true;
					if (time() - $this->start_time > $this->max_execution_time - 4) // stop 4 seconds before the tiemout, just enough time to process the end of the page on a slow server
						return 'timeout';
				}
	}
	else
	{
		$productsImages = Image::getAllImages();
		foreach ($productsImages AS $k => $image)
		{
			$imageObj = new Image($image['id_image']);
			if (file_exists($dir.$imageObj->getExistingImgPath().'.jpg')) {
				$mysock = getimagesize($dir.$imageObj->getExistingImgPath().'.jpg');

				// Better Image-Resizing to keep proportions
				//
				// (fix different image-sizes by applying a warpper-div with fixed dimensions and
				// overflow: hidden)
				foreach ($type AS $k => $imageType)
				{
					$ratio = min((int)($imageType['width']) / (int)($mysock[0]), (int)($imageType['height']) / (int)($mysock[1]));
					$xSize = round($ratio * (int)($mysock[0]));
					$ySize = round($ratio * (int)($mysock[1]));

					if($xSize < (int)($imageType['width'])) {
						$fixRatio = (int)($imageType['width']) / $xSize;

						$xSize = round($fixRatio * $xSize);
						$ySize = round($fixRatio * $ySize);
					}

					if($ySize < (int)($imageType['height'])) {
						$fixRatio = (int)($imageType['height']) / $ySize;

						$xSize = round($fixRatio * $xSize);
						$ySize = round($fixRatio * $ySize);
					}

					if (!file_exists($dir.$imageObj->getExistingImgPath().'-'.stripslashes($imageType['name']).'.jpg'))
						if (!imageResize($dir.$imageObj->getExistingImgPath().'.jpg', $dir.$imageObj->getExistingImgPath().'-'.stripslashes($imageType['name']).'.jpg', $xSize, $ySize))
							$errors = true;
					if (time() - $this->start_time > $this->max_execution_time - 4) // stop 4 seconds before the tiemout, just enough time to process the end of the page on a slow server
						return 'timeout';
				}
			}
		}

		die();

	}
	return $errors;
}

 

Maybe this helps someone in the future.

[toifel]

...if someone considers using this, please remove the die(); near the end of the function

[ricky11]

can you share an example of this working?

in this case what are the dimensions that you put in to prestashops back office, do you just put width and leave the height blank?