Advanced Guide Article Update - Auto Sized Product Images

[NormanRouxel]

This is an update (03-12-07) to the Actinic Advanced Guide article Automatically Rescale Your Images to a Certain Size with some improvements:

Releases the restriction on the product images being in the Site folder.
Keeps the rescaled images in a separate folder "Thumbnails".
A new Variable holds the desired image width.
Adds an alt tag to the resized image.

Automatically Rescale Your Product Images to a Certain Size

This is a handy PHP expression that will dynamically rescale your product images and display them in their new size. This resizing happens on the desktop PC, and the new files will be uploaded to the store with the other image files. The names of the new image files will all start with 't_'.

In order for it to work, your current images must be in *.jpg format.



INSTALLATION

In your Site folder, create a sub-folder called "Thumbnails".


Go to Design / Library / Variables / Product.
Right-click Product and choose New Variable.
Set the new variable as follows:

Name:			ProductImageScaledWidth
Description:		Automatically resized product image.
Prompt:			Product Image Scaled Width
Group:			Product
Place Of Setting	Site, Section, Product	
Allow <Use Parent>...	Checked
Tab Name:		Layout
Type:			Number
Allow Empty Value:	Unchecked
Whole Numbers Only:	Checked
Searchable:		Unchecked
Modifiable In Dup:	Unchecked
Upload:			Unchecked
Initial Value		Use Parent
Top Level Value		100

Go to Design / Library / Layouts / Product Image.
Right-click "Standard Product Image" and select Copy.
Rename that copy variable to be "Thumbnail Product Image".
Open layout "Thumbnail Product Image".
Replace the entire contents of that layout with the following:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
   <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
      <a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
   </actinic:block>
   <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
      <a href="<actinic:variable name="ExtendedInfoPageName" />">
   </actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
	<actinic:block php="true" >
		// START Create a thumbnail image t_ProductImageFileName
		$sOriginalImageName = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
		$nScaledWidth = <actinic:variable name="ProductImageScaledWidth" encoding="perl" selectable="false" />;
		$sThumbImageName = 'Thumbnails/t_' . basename($sOriginalImageName);
		$image = @imagecreatefromjpeg($sOriginalImageName); /* Attempt to open */
		if (!$image) 
			{ /* See if it failed */
			echo "<br><font color=red>Thumbnail creation error opening: $sOriginalImageName </font>";
			}
		else
			{
			// Get new dimensions
			$width = imagesx($image);
			$height = imagesy($image);
			$t_width = $nScaledWidth;
			$t_height = round($height * ($t_width / $width));
			// Resample
			$thumbimage = imagecreatetruecolor($t_width, $t_height);
			imagecopyresampled($thumbimage, $image, 0, 0, 0, 0, $t_width, $t_height, $width, $height);
			if ( ! imagejpeg($thumbimage, $sThumbImageName) ) 
				{
				echo "<font color=red>Thumbnail image creation failed: $sThumbImageName </font><br>";
				}
			else
				{
				echo "<img src=\"$sThumbImageName\" width=\"$t_width\" height=\"$t_height\" border=\"0\"";
				echo " alt=\"<actinic:variable name="ProductName" encoding="strip"/>\" />";
				}	
			}
 	// END Create a thumbnail image t_ProductImageFileName
 	</actinic:block>  

</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
   <img src="<actinic:variable name="DefaultProductImage" />"
      border="0"
      alt="<actinic:variable name="ProductName" />" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
   </a>
</actinic:block>

OPERATION

To select this layout, go to Settings / Site Options / Layout
and set Product Image Layout to "Thumbnail Product Image".

To alter the image width, go to Settings / Site Options / Layout
and set Product Image Scaled Width as required.



NOTES

You can now use the following line to include the rescaled product images
in the best seller / new products / related items / also bought lists:

<img src="Thumbnails/t_<actinic:variable name="ProductImageFileName" />" />

[meden]

Lovely job Norman, small point about for (newbies like me) who try to implement this is that 'variable' needs to be replaced by 'layout' in the second section of your post referring to the library...confused me a bit.
Mick

[NormanRouxel]

Mick,

Thanks for pointing that out. I've corrected my above post.

[OriginalTouch]

Go to Design / Library / Variables / Product Image.
Right-click "Standard Product Image" and select Copy.
Rename that copy variable to be "Thumbnail Product Image".
Open layout "Thumbnail Product Image".
Replace the entire contents of that layout with the following:

I know you said it had been amended but it's still showing so should it not be:

Design/Library/Layouts/Product Image

[NormanRouxel]

Ahah! That typo. Fixed that now.

[OriginalTouch]

Used this and it works great - also used the thumbnails for related section thumbnail links.

Good job - means not having to resize images and save duplicates on the website!

Do you know if there is a way of resizing section images in a similar automatic way rather than having to make different sized images of everything? ie if the image does not represent a product?

[NormanRouxel]

Adapt the above. Use only the PHP block from the code above and use SectionImageFileName instead of ProductImageFileName.

Also change $sThumbImageName = 'Thumbnails/t_' to $sThumbImageName = 'Thumbnails/s_' (new images are s_<filename>).

You may also want to create a new variable SectionImageScaledWidth and use that instead of ProductImageScaledWidth.

Once done and working, post your changes so others can benefit from your efforts.

[kevster]

Thanks for posting this Norman, Ive got this working for sections so here goes.

Using the thumbnails folder in the site folder so if you havent set up the product image resize you need to create this folder.

Create the variable

Go to Design / Library / Variables / Section.
Right-click Section and choose New Variable.
Set the new variable as follows:

Name:			SectionImageScaledWidth
Description:		Automatically resized section image.
Prompt:			Section Image Scaled Width
Group:			Section
Place Of Setting	Site, Section	
Allow <Use Parent>...	Checked
Tab Name:		Layout
Type:			Number
Allow Empty Value:	Unchecked
Whole Numbers Only:	Checked
Searchable:		Unchecked
Modifiable In Dup:	Unchecked
Upload:			Unchecked
Initial Value		Use Parent
Top Level Value		100

Go to a section page in the content tree then click on the design tab. Click on CSS section link layout (or whichever section layout you are using). Replace the following code:

<img alt="<actinic:variable name="SectionName" />" src="<actinic:variable Name="SectionImageFileName"/>"></a>

with the code below:

	<actinic:block php="true" >
		// START Create a thumbnail image s_SectionImageFileName
		$sOriginalImageName = str_replace('../','', '<actinic:variable name="SectionImageFileName" encoding="perl" selectable="false" />');
		$nScaledWidth = <actinic:variable name="ProductImageScaledWidth" encoding="perl" selectable="false" />;
		$sThumbImageName = 'Thumbnails/s_' . basename($sOriginalImageName);
		$image = @imagecreatefromjpeg($sOriginalImageName); /* Attempt to open */
		if (!$image) 
			{ /* See if it failed */
			echo "<br><font color=red>Thumbnail creation error opening: $sOriginalImageName </font>";
			}
		else
			{
			// Get new dimensions
			$width = imagesx($image);
			$height = imagesy($image);
			$t_width = $nScaledWidth;
			$t_height = round($height * ($t_width / $width));
			// Resample
			$thumbimage = imagecreatetruecolor($t_width, $t_height);
			imagecopyresampled($thumbimage, $image, 0, 0, 0, 0, $t_width, $t_height, $width, $height);
			if ( ! imagejpeg($thumbimage, $sThumbImageName) ) 
				{
				echo "<font color=red>Thumbnail image creation failed: $sThumbImageName </font><br>";
				}
			else
				{
				echo "<img src=\"$sThumbImageName\" width=\"$t_width\" height=\"$t_height\" border=\"0\"";
				echo " alt=\"<actinic:variable name="ProductName" encoding="strip"/>\" />";
				}	
			}
 	// END Create a thumbnail image s_SectionImageFileName
 	</actinic:block>  

</actinic:block>

All that is different is the reference to section instead of product, the variable setup, the sectionImageFilename instead of ProductImageFileName, the image prefix and the str_replace to strip off the ../ from the section image path.

[OriginalTouch]

Thanks Kev, hadn't had time to do that yet!

[kevster]

No problem - I needed it so worked it out

[OriginalTouch]

Just figured out a 'cheats' way of getting ANY image to use Norman's code - product images, fragment images you name it!

Just go to a product and use the image that you need resized. It doesn't matter if it has nothing to do with the product. Save.

Let the code do its work. Then go back and change the image to the one you need for the product. Save.

Probably too simple for words .. but it works and may be of use to others - saves using loads of different code for different types of images!

[kevster]

that is cheating! reason i did it properly is to make it easy for a client, i did tell him to add it to a prod then copy etc but realised it was a bit lazy of me!

[gazmitch43]

more help needed

Hi i have been trying to do this on my website and i need a bit more help to achive this, it still sounds very complicated for a rookie like me. I have done the first part so it is now showing thumbnail product image under the layout in product details, i set up the thumbnail folder and images have been put into there, not sure how i resize popup images, and i am currently testing a new page setup and the tester images are not been resized to the same size.

its the code positioning that im not sure where to place it.


Code:

<img src="Thumbnails/t_<actinic:variable name="ProductImageFileName" />" />



many thanks

Gary

please feel free to comment on my site, i would like to improve it, but i am not an expert at this.

[NormanRouxel]

it still sounds very complicated for a rookie like me

I wrote that patch.

I'm afraid this isn't a "rookie" patch, especially if you want to extend it to work on other images than the Product one. Quite a bit of experience of how Actinic works and what the patch does may be required.

The time taken to explain how to do this for each possible image variant is more than I have available.

If no-one else can help and you want commissioned assitance, email me.

[OriginalTouch]

You will need to post what you have done and a link to the New Page Layout with popup would be useful to understand your problem. All images can be resized using this patch so if your popup is using the thumbnail image from the thumbnail folder, maybe you have a popup setting that is overriding this?