0
Note 1: In the instructions below, I have made the assumption that your store's root folder is catalog. IE. Your store is accessed by typing www.yourstore.com/catalog into a browser.
Note 2: Be sure to read the installation instructions *all* the way and if you do not understand what is being said here, do not try to install it and instead come to the forum section for help.
Step #1 - Analyzing requirements
This contribution requires:
* osCommerce 2.2-MS2
* the GD image library, which now comes packaged with most PHP builds
Note: you can verify that you have both requirements in your admin panel (Tools -> Server Info). Check if you have the GD-library installed by looking for a "gd" subsection.
Step #2 - Backup files
Make a backup of the files that are going to be changed:
* Your store's OSC database (Very important!)
* catalog/includes/functions/html_output.php
* catalog/admin/includes/functions/general.php
If applying the IE PNG bug work-around, then also backup:
* catalog/popup_image.php
* catalog/includes/header.php
Step #3 - Update your store database
Run the imagemagic.sql file contained in the zip archive with PHPMyAdmin or your favourite MYSQL browser client.
Note: Please make sure that a fully working backup of your database exists before doing this step. This is very important
Step #4 - Add files
Copy the files contained in the zip archive to their respective directories on your server - Easy eh?
Step #5 - In:
catalog/admin/includes/functions/general.php
* Just before the ?> at the very end of this file add the following:
function tep_cfg_readonly($value){
$single[]= array('id' => $value,
'text' => $value);
return tep_draw_pull_down_menu('configuration_value', $single, $value);
}
function tep_cfg_pull_down_installed_fonts($font_name) {
if ($root=@opendir(DIR_FS_DOCUMENT_ROOT.'includes/imagemagic/fonts')){
while ($file=readdir($root)){
if($file=="." || $file==".." || is_dir($dir."/".$file)) continue;
$files[]= array('id' => $file,
'text' => $file);
}
}
return tep_draw_pull_down_menu('configuration_value', $files, $font_name);
}
function tep_cfg_pull_down_installed_watermarks($watermark_name) {
if ($root=@opendir(DIR_FS_DOCUMENT_ROOT.'includes/imagemagic/watermarks')){
while ($file=readdir($root)){
if($file=="." || $file==".." || is_dir($dir."/".$file)) continue;
$files[]= array('id' => $file,
'text' => $file);
}
}
return tep_draw_pull_down_menu('configuration_value', $files, $watermark_name);
}
function tep_cfg_pull_down_watermark_alignment($watermark_alignment) {
$align[]= array('id' => 'Tiled',
'text' => 'Tiled');
$align[]= array('id' => 'Top',
'text' => 'Top');
$align[]= array('id' => 'Top Left',
'text' => 'Top Left');
$align[]= array('id' => 'Top Right',
'text' => 'Top Right');
$align[]= array('id' => 'Center',
'text' => 'Center');
$align[]= array('id' => 'Bottom',
'text' => 'Bottom');
$align[]= array('id' => 'Bottom Left',
'text' => 'Bottom Left');
$align[]= array('id' => 'Bottom Right',
'text' => 'Bottom Right');
return tep_draw_pull_down_menu('configuration_value', $align, $watermark_alignment);
}
Step #6 - In :
/catalog/includes/functions/html_output.php
replace the entire tep_image() function with:
// BOF Image Magic
function tep_image($src, $alt = '', $width = '', $height = '', $params = '') {
global $product_info;
//Allow for a new intermediate sized thumbnail size to be set
//without any changes having to be made to the product_info page itself.
//(see the lengths I go to to make your life easier :-)
if (strstr($_SERVER['PHP_SELF'],"product_info.php")) {
if (isset($product_info['products_image'])
&& $src == DIR_WS_IMAGES . $product_info['products_image']
&& $product_info[products_id]==$_GET['products_id']) { //final check just to make sure that we don't interfere with other contribs
$width = PRODUCT_INFO_IMAGE_WIDTH == 0?'':PRODUCT_INFO_IMAGE_WIDTH;
$height = PRODUCT_INFO_IMAGE_HEIGHT == 0?'':PRODUCT_INFO_IMAGE_HEIGHT;
$product_info_image=true;
$page="prod_info";
}
}
//Detect whether this is a pop-up image
if (strstr($_SERVER['PHP_SELF'],"popup_image.php")) $page="popup";
//do we apply the IE PNG alpha transparency fix?
if (strstr(strtolower($src),".png") && CFG_PNG_BUG=="True") $fix_png = true;
//send the image for processing unless told otherwise
$image = '<img src="' . $src . '"'; //set up the image tag just in case we don't want to process
if (CFG_MASTER_SWITCH=="On") $calculate = true;
else $calculate=false;
// Don't calculate if the image is set to a "%" width
if (strstr($width,'%') == true || strstr($height,'%') == true) $calculate = false;
// Dont calculate if a pixel image is being passed (hope you dont have pixels for sale)
if (strstr($image, 'pixel')) $calculate = false;
$image_size = @getimagesize($src);
// Decide whether or not we want to process this image
if (($width == '' && $height == '' && $page != 'popup' ) || ($width == $image_size[0] && $height == $image_size[0] && $page != 'popup')) {
if (CFG_PROCESS_GRAPHICS=="False") $calculate = false; //looks like this is a store graphic rather than product image
}
// Is this image good to go?
if (CONFIG_CALCULATE_IMAGE_SIZE && $calculate) {
if ($image_size) {
$ratio = $image_size[1] / $image_size[0];
// Set the width and height to the proper ratio
if (!$width && $height) {
$ratio = $height / $image_size[1];
$width = intval($image_size[0] * $ratio);
} elseif ($width && !$height) {
$ratio = $width / $image_size[0];
$height = intval($image_size[1] * $ratio);
} elseif (!$width && !$height && !$over_ride) {
$width = $image_size[0];
$height = $image_size[1];
}
//Encrypt the image filename if switched on
if (CFG_ENCRYPT_FILENAMES == "True" && CFG_ENCRYPTION_KEY !="") {
$result = '';
$key=CFG_ENCRYPTION_KEY;
for($i=0; $i<strlen($src); $i++) {
$char = substr($src, $i, 1);
$keychar = substr($key, ($i % strlen($key))-1, 1);
$char = chr(ord($char)+ord($keychar));
$result.=$char;
}
$src=urlencode(base64_encode($result));
}
//Return the html
$image = '<img src="imagemagic.php?img='.$src.'&w='.
tep_output_string($width).'&h='.tep_output_string($height).'&page='.$page.'"';
} elseif (IMAGE_REQUIRED == 'false') {
return false;
}
}
//If the size asked for is greater than the image itself, we check the configs to see if this is allowed and if not over-ride
if ($width > $image_size[0] || $height > $image_size[1]) {
if (CFG_ALLOW_LARGER != 'True'){
$width=$image_size[0];
$height=$image_size[1];
$over_ride = true;
}
}
// Add remaining image parameters if they exist
if ($width) {
$image .= ' width="' . tep_output_string($width) . '"';
}
if ($height) {
$image .= ' height="' . tep_output_string($height) . '"';
}
if (tep_not_null($params)) $image .= ' ' . $params;
$image .= ' border="0" alt="' . tep_output_string($alt) . '"';
if (tep_not_null($alt)) {
$image .= ' title="' . tep_output_string($alt) . '"';
}
if ($fix_png && CFG_MASTER_SWITCH=="On") {
$image .= ' onload="fixPNG(this)"';
}
$image .= '>';
return $image;
}
//EOF Image Magic
Step #7 - Admin settings
Note: Before you change the settings, write down the current values so you can restore them in case of an error!
Go to the admin-section of your store (Configuration -> Images) and set:
* images width and height values to a value greater than zero
* calculate image sizes to true
* the width or height of the new image type - product information images
Now go to the Configuration -> Image Magic and set the options in there as required:
Note: Don't forget that with this contribution comes a new thumbnail size - The size of the image shown on your product information page - The setting for this is grouped with the rest of the image size configuration values in your admin panel in Configuration -> Images - You should go in there and set it, otherwise these images will display with the default width of 100.
** It is very important to note, that if you want your images to always display with the correct aspect ratio (height to width ratio) then you should only ever supply either a maximum height or a maximum width - NEVER both in the Configuration -> Images section of your admin panel. If you already have both set, then go in and change one of them to 0.
That's It! Now go try it out!
Optional Steps
Step #1 - Adding additional Truetype fonts and watermark images If you want to add additional fonts which can be used in your text watermarks, these should be Truetype format and uploaded in binary mode to your server. The correct location to place your own Truetype fonts is:
/catalog/includes/imagemagic/fonts/
You can also install custom graphics files to be added to your thumbnails as watermarks - The should be of type GIF, PNG or JPG and uploaded in binary mode to:
/catalog/includes/imagemagic/watermarks/
Step #2 - Enabling the IE. PNG work-around
If you want to use 24-bit PNG images with alpha channel transparency., unfortunately Internet Explorer contains a well documented bug that messes up the transparency of these type of images. Image Magic contains a work-around fix for this issue, which can be switched on or off from your control panel.
Before switching this feature on, you need to add the following code to two different files:
/catalog/includes/header.php - At the very end of the file ( after the final ?> )
/catalog/popup_image.php - Just before the </head> (not <head> - notice the forward slash)
The snippet of code to add is:
<!--[if gte IE 5.5000]>
<script language="Javascript"> var ie55up = true </script>
<![endif]-->
<script language="Javascript">
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
</script>
