Add crop option to auto thumbnails (2.93) 
Reminder: Always back up your database and files if you make any system changes.
Note: While we cannot assist with modifications as part of our free support services, many customizations make it into our future releases, so we recommend checking the change log. If you need help adding a modification to a web site, we have paid customization services available.
The 2.9 release allows a store administrator to create thumbnails automatically for each item image if you keep the 'Thumbnail Image' field empty while adding a product image when adding/editing items. This image is a scaled down version of the original, which uses the Max Image Height/Width specified in the 'Catalog Setup' area. (Note: if no Max Image Height/Width values are entered, the system uses a default 100px x 100px size.)
This means that the thumbnails will not be the same consistent size throughout the site, because they are based on the size of the original.
e.g.) Max Image Height = 200 & Max Image Width = 200
A 400px W x 600px H image is uploaded.
The auto thumbnail will be 133px W x 200px H
A 600px W x 400px H image is uploaded.
The auto thumbnail will be 200px W x 133px H
If you add this modifications, the store administrators can choose to resize and crop the image to create the thumbnail:
A 400px W x 600px H image is uploaded.
The auto thumbnail will be cropped to 200px W x 200px H
A 600px W x 400px H image is uploaded.
The auto thumbnail will be cropped to 200px W x 200px H
Use the following modification:
-
Open the imgload.php file in the /includes/ folder of the /storeadmin/ folder.
-
Change the auto thumbnail function code:
// AUTO CREATE THUMBNAIL function auto_thumbnail($img_name, $usebkgdcol='FFFFFF', $img_sharpen='y') { global $thumbdir, $imagedir, $iheight, $iwidth; $thumb_name = ''; // IWIDTHS EXIST if (!empty($thumbdir) AND $iheight > 0 AND $iwidth > 0) { // IMAGE VARIABLES $img_file = trim($img_name); $img_low_ext = get_extension($img_file); $base_img = basename($img_file, $img_low_ext); // ADD THUMB IF NEEDED if ($thumbdir == $imagedir) $base_img .= '_sbthumb'; $src_image = '../../' . $img_file; $tmpimghw = @getimagesize($src_image); if ($tmpimghw !== false) { // HEIGHT AND WIDTH $largewidth = $tmpimghw[0]; $largeheight = $tmpimghw[1]; // CREATE IMAGE if ($img_low_ext == '.gif') $thumbimg = imagecreatefromgif($src_image); elseif ($img_low_ext == '.png') $thumbimg = imagecreatefrompng($src_image); elseif ($img_low_ext == '.jpg' or $img_low_ext == '.jpeg') $thumbimg = imagecreatefromjpeg($src_image); else $thumbimg = ''; if (!empty($thumbimg)) { // CREATE THUMBNAIL NAME $thumb_name = $thumbdir . '/' . $base_img . $img_low_ext; // LARGE IMAGE IS SMALLER THAN THUMB if ($largewidth <= $iwidth AND $largeheight <= $iheight) list($thumbwidth, $thumbheight) = array($largewidth, $largeheight); // START CALCULATIONS else { list($wratio, $hratio) = array($largewidth / $iwidth, $largeheight / $iheight); if ($hratio > $wratio) list($thumbwidth, $thumbheight) = array(round(($iheight * $largewidth)/$largeheight), $iheight); else list($thumbwidth, $thumbheight) = array($iwidth, round(($iwidth * $largeheight)/$largewidth)); } // CREATE NEW SIZE IMAGE BOX $resizeimg = imagecreatetruecolor($thumbwidth, $thumbheight); // ADD BACKGROUND $fillcolor = imagecolorallocate($resizeimg, hexdec(substr($usebkgdcol, 0, 2)), hexdec(substr($usebkgdcol, 2, 2)), hexdec(substr($usebkgdcol, 4, 2))); imagefill($resizeimg, 0, 0, $fillcolor); // RESIZE/MERGE imagecopyresampled($resizeimg, $thumbimg, 0, 0, 0, 0, $thumbwidth, $thumbheight, $largewidth, $largeheight); // SHARPEN IMAGE if ($img_sharpen == 'y') { $matrix = array( array(-1.2, -1, -1.2), array(-1, 20, -1), array(-1.2, -1, -1.2)); $divs = array_sum(array_map('array_sum', $matrix)); imageconvolution($resizeimg, $matrix, $divs, 0); } // DISPLAY THE FILE if ($img_low_ext == '.gif') imagegif($resizeimg, '../../' . $thumb_name); elseif ($img_low_ext == '.png') imagepng($resizeimg, '../../' . $thumb_name); elseif ($img_low_ext == '.jpg' or $img_low_ext == '.jpeg') imagejpeg($resizeimg, '../../' . $thumb_name); else $thumb_name = ''; // DESTROY RESOURCE @imagedestroy($thumbimg); @imagedestroy($resizeimg); } } } return $thumb_name; }to:
// AUTO CREATE THUMBNAIL function auto_thumbnail($img_name, $usebkgdcol='FFFFFF', $img_sharpen='y') { global $thumbdir, $imagedir, $iheight, $iwidth; $img_crop = (isset($_POST['crop']) AND $_POST['crop'] == 'y') ? 'y' : 'n'; $thumb_name = ''; // IWIDTHS EXIST if (!empty($thumbdir) AND $iheight > 0 AND $iwidth > 0) { // IMAGE VARIABLES $img_file = trim($img_name); $img_low_ext = get_extension($img_file); $base_img = basename($img_file, $img_low_ext); // ADD THUMB IF NEEDED if ($thumbdir == $imagedir) $base_img .= '_sbthumb'; $src_image = '../../' . $img_file; $tmpimghw = @getimagesize($src_image); if ($tmpimghw !== false) { // HEIGHT AND WIDTH $largewidth = $tmpimghw[0]; $largeheight = $tmpimghw[1]; // CREATE IMAGE if ($img_low_ext == '.gif') $thumbimg = imagecreatefromgif($src_image); elseif ($img_low_ext == '.png') $thumbimg = imagecreatefrompng($src_image); elseif ($img_low_ext == '.jpg' or $img_low_ext == '.jpeg') $thumbimg = imagecreatefromjpeg($src_image); else $thumbimg = ''; if (!empty($thumbimg)) { // CREATE THUMBNAIL NAME $thumb_name = $thumbdir . '/' . $base_img . $img_low_ext; // LARGE IMAGE IS SMALLER THAN THUMB if ($largewidth <= $iwidth AND $largeheight <= $iheight) list($thumbwidth, $thumbheight, $newwidth, $newheight) = array($largewidth, $largeheight, $largewidth, $largeheight); // START CALCULATIONS else { list($wratio, $hratio) = array($largewidth / $iwidth, $largeheight / $iheight); list($xstart, $ystart) = array(0, 0); if (($hratio > $wratio AND $img_crop == 'n') OR ($hratio < $wratio AND $img_crop == 'y')) { list($thumbwidth, $thumbheight) = array(round(($iheight * $largewidth)/$largeheight), $iheight); if ($img_crop == 'y') $xstart = abs((floor($thumbwidth - $iwidth))/2); } elseif (($hratio < $wratio AND $img_crop == 'n') OR ($hratio > $wratio AND $img_crop == 'y')) { list($thumbwidth, $thumbheight) = array($iwidth, round(($iwidth * $largeheight)/$largewidth)); if ($img_crop == 'y') $ystart = abs((floor($thumbheight - $iheight))/2); } else list($thumbwidth, $thumbheight) = array($iwidth, $iwidth); // NEW HEIGHT/WIDTH $newwidth = ($img_crop == 'y') ? $iwidth : $thumbwidth; $newheight = ($img_crop == 'y') ? $iheight : $thumbheight; } // CREATE NEW SIZE IMAGE BOX $resizeimg = imagecreatetruecolor($newwidth, $newheight); // ADD BACKGROUND $fillcolor = imagecolorallocate($resizeimg, hexdec(substr($usebkgdcol, 0, 2)), hexdec(substr($usebkgdcol, 2, 2)), hexdec(substr($usebkgdcol, 4, 2))); imagefill($resizeimg, 0, 0, $fillcolor); // RESIZE/MERGE imagecopyresampled($resizeimg, $thumbimg, 0, 0, $xstart, $ystart, $thumbwidth, $thumbheight, $largewidth, $largeheight); // SHARPEN IMAGE if ($img_sharpen == 'y') { $matrix = array( array(-1.2, -1, -1.2), array(-1, 20, -1), array(-1.2, -1, -1.2)); $divs = array_sum(array_map('array_sum', $matrix)); imageconvolution($resizeimg, $matrix, $divs, 0); } // DISPLAY THE FILE if ($img_low_ext == '.gif') imagegif($resizeimg, '../../' . $thumb_name); elseif ($img_low_ext == '.png') imagepng($resizeimg, '../../' . $thumb_name); elseif ($img_low_ext == '.jpg' or $img_low_ext == '.jpeg') imagejpeg($resizeimg, '../../' . $thumb_name); else $thumb_name = ''; // DESTROY RESOURCE @imagedestroy($thumbimg); @imagedestroy($resizeimg); } } } return $thumb_name; } -
Change the code:
echo "</select></p></div>";
to:
echo "</select>";
echo ($is_item_img == 'y' ? "<br /><input name=\"crop\" value=\"y\" type=\"checkbox\" /> crop image" : "");
echo "</p></div>";Note: if you want to choose the crop by default, add:
checked=\"checked\"
just after:
type=\"checkbox\"
-
Optional: Make the image load pop up a little taller, now that the 'crop image' check box has been added.
-
Open the items.php file in the /storeadmin/ folder.
-
Change the line:
$clickhref = "href=\"javascript: void(0)\" onClick=\"popWin('LargeImageURL$e', 'includes/imgload.php?formsname=EditForm&fieldsname=lgimage$epref&o1=$lgimgbase$lg&mo=y', 450, 400)\" title=\"Click to upload large image and thumbnail\"";to:
$clickhref = "href=\"javascript: void(0)\" onClick=\"popWin('LargeImageURL$e', 'includes/imgload.php?formsname=EditForm&fieldsname=lgimage$epref&mo=y', 475, 400)\" title=\"Click to upload large image and thumbnail\"";
-
-
When the store administrator uploads an item image, she or he should click 'crop' to resize and crop the image into one that is the exact height and width represented in the Max Img Height/Width values in the Catalog Setup.
Note: this modification will only affect new thumbnails. If the store administrator wants to crop existing images, they must select the image and make sure the thumbnail is blank, then click the 'crop' checkbox to re-create the thumbnail and crop it.
