First I have understood the ratio 1:1 Problem in magento!
But if you upload pictures with another ratio but same size (wpx, hpx) in magento product catalog, the magento resized base, small and thumbnail images should match. Thinking of front, side and back view. So it’s no magento problem.
But the problem here is different:
(Code copied out of generated searchresult page -- it’s nearly the same in grid/list view or in JM Products, JM ProductsSlider)
Code:
<a title="Testartikel" href="http://xxx/testartikel.html"> <img width="220" height="220" class="additional_img" alt="Testartikel" src="http://xxx/media/catalog/product/r/p/rp9059b_luciab_c__29394.1395096624.1280.1280.jpg"> <img width="220" height="220" class="regular_img" alt="Testartikel" src="http://xxx/media/catalog/product/cache/1/small_image/220x220/9df78eab33525d08d6e5fb8d27136e95/r/p/rp9059b_luciab_a__31049.1395096624.1280.1280.jpg"></a>
The generated code takes the "hover" -- additional_img out of the raw uploaded image folder, sends it to the browser, where it will be resized to 220×220. The regular_img is taken out of magento’s pre resized image folder -- so no distortion!
The solution could be, that the code should check whether the "hover" marked image is already present as small image (220×220) in magento’s cache and uses that as additional_img or it pushes magento’s imaging system to create it (like clicking small image in product catalog) and use the new magento created (resized) image. Once again, prerequisite is nearly same size and ratio of uploaded images!
Sample screenshots;
regular_img -> http://prntscr.com/4a2abz
additional_img distorted -> http://prntscr.com/4a2a39
additional_img correct -> http://prntscr.com/4a2bfp
(Please don’t comment the screenshot’s, I know it’s a good example of distortion!)
2 answers
Hi
Where do these classes ‘additional_img’ and ‘regular_img’ come from?
Could you post your site’s URL of page where problem can be seen here so that I can have a look?
Oh it’s in the frontend template for JM Summer:
/app/design/frontend/default/jm_summer/template/catalog/product/list.phtml
And here is the solution. We have to add code to $hoverimage about line 91 (list view) and 217 (grid view):
Code:
if($hoverimage){
// product image Url
$hoverimage = $hoverimage->getUrl();
// create folder for resized images, maybe we need other sizes for tablet or mobile or change in basetheme
$folderName = "./media/jmbasetheme/hover/resized/". $productlistimagewidth. "x". $productlistimageheight;
if(!file_exists($folderName))
mkdir ($folderName, 0777, true);
// changing image Url into direct path
$dirImg = Mage::getBaseDir().str_replace("/",DS,strstr($hoverimage,'/media'));
// get image name
$imageName = substr(strrchr($hoverimage,"/"),1);
// resized image path ($folderName/IMAGE_NAME)
$imageResized = Mage::getBaseDir('media').DS."jmbasetheme".DS."hover".DS."resized".DS.$productlistimagewidth. "x". $productlistimageheight.DS.$imageName;
// if resized image doesn't exist, create it and save the resized image to the resized directory
if (!file_exists($imageResized)&&file_exists($dirImg)) :
$imageObj = new Varien_Image($dirImg);
$imageObj->constrainOnly(FALSE);
$imageObj->keepAspectRatio(TRUE);
$imageObj->keepFrame(TRUE);
$imageObj->keepTransparency(TRUE);
$imageObj->backgroundColor(array(255,255,255));
$imageObj->resize($productlistimagewidth,$productlistimageheight);
$imageObj->save($imageResized);
endif;
// get resized image Url
$hoverimage = Mage::getBaseUrl('media')."jmbasetheme/hover/resized/".$productlistimagewidth. "x". $productlistimageheight. "/".$imageName;
}
And if you want to learn more, try this link.
This question is now closed
