Advanced Guide Article Update - Auto Sized Product Images

[gazmitch43]

I started from the top of the page, i set up this part first, i now have the thumbnail option in layout etc to choose from, If i select an image from the desk top it will put it into the new thumbnail folder, and product, I am not sure how i then add the image into the popup window.

Does it use the same image?

before it was done with 2 different sized images.

Gary

[OriginalTouch]

You may be over complicating things.

This patch works by taking an image and resizing it and then putting it into the thumbnail folder.

You will see by the 'cheat' I have posted (if you have followed all steps to this point):

Create a product. Choose an image for that product (ensuring that the product image is set in layout to be a thumbnail sized image). That image does not have to be a product image - it should be the image you want resized. Save. This then resizes the image and puts it into the thumbnail folder you have created. You can then change the image back to be the product image you need - you are just using this patch to resize the first image.

Then when needing a resized image, use the thumbnail in the thumbnail folder that has been created. The pure image not the hack.

This code:
<img src="Thumbnails/t_<actinic:variable name="ProductImageFileName" />" /> is a shortcut telling Actinic to go to the thumbnails folder and pick up the Product image of Variable "ProductImageFileName" which has a t_ before it, so that you can insert one piece of code and it picks up the thumbnail image for any product. This variable will obviously not work if the image isn't a ProductImageFile Name - you would need to set up another variable for a section for example.

Where is your popup? If it is in an extended info product tab, then just pick up the pure thumbnail image in the image choice from the thumbnail folder. No need to insert any code as the resizing has already been done.

If you need to resize an image that isn't a product, eg a section, and make that a single variable to be used throughout the site then you would use the code above:
<img src="Thumbnails/t_<actinic:variable name="ProductImageFileName" />" /> changing variable ProductImageFileName for a variable such as src="<actinic:variable Name="SectionImageFileName"/>"

If you understand the basics of how it works, it shouldn't be too difficult.

If this doesn't answer your query, you may like to post your url so we can see the specific problem.

[gazmitch43]

Hi Sam

thanks for you time, i understand the thumbnail resize folder etc, if i then want to have a larger image in the pop up box how does that work? this is a page which is using two images small and large. "well the first one does".


I am doing what you said regarding extending info page for my popups.

gary

[OriginalTouch]

Maybe I'm being dim but I can't figure out exactly what your problem is?

The page you show has a thumbnail on the main page and a larger image on the popup page anyway. Looks good to me.

You will have 2 images for each product. A larger image file and a smaller image thumbnail in the thumbnail folder - you use whichever you need.

[xdoktor]

What a brilliant piece of code!

I'm now in the process of creating my 'Snapshot Template' for use as a starting block for my future actinic stores......

i had created some product layouts before but was spending time in 'fireworks' generating at least three resized images to use in my main 3 layouts...NOT ANYMORE!

I basically have 3 instances of the code adapted to create my required resized images ie - thm_ / sec_ / pop_ etc.

This has worked a dream...Norm Is 'the Don'....
i salute you

Also, is there away of fixing the 'Height of the rendered image?
what i mean is, lets say my main image is not square.....
when the image is created, the height is relative to the original.
As some main images are square and some are rectangles, this can create uneven uniformity when they are displayed in a list.
I want the rendered image height to be fixed to be the same as width...hence creating square images
is there some place in the productimagelayout code i can edit to make it do this??

again excellent work
cheers

Andrew

[wjcampbe]

If you fix both height and width of your images in one pass, you will distort the images.

Normally you would do one pass to fix the desired maximum width, height will be in proportion to the height/width ratio of the original, and a second pass on the output image with height as the criteria to further reduce the images to the maximum height requirement, (width will be further reduced in proportion to the original height ratio).

[jont]

If they are very tall and narrow eg a picture of a pencil you are going to run into issues automating this type of process .... I tend to run several batch processes in Photoshop depending on the aspect ratio's of the original... takes slightly longer but the end result is more satisfactory.

If you are wanting square images these will inevitably require some cropping involved to ensure that the item is recognisable once processed ... alas if you are wanting uniformity of size there is no real substitute for doing it yourself (or using several automated procedures) to ensure the best results.

[xdoktor]

thanks guys

i already do image processing in editors ...was just looking for that 'ultimate' option!!

cuts the workload by half so ALL Good!

[xdoktor]

Hi all

I trying now to adapt the code to work with Section Images.

has anyone been successful with this?

Andre'

[NormanRouxel]

I want the rendered image height to be fixed to be the same as width...hence creating square images

You'd need to do some aspect ratio maths and add appropriate borders to the sides or top/bottom to do this. Not a trivial edit, I'm afraid.

This is the sort of thing that comes as standard with my paid for patches (Multi Product Images, Dynamic Choice Images). However they usually require several hundred lines of PHP do do all that's required of them.

[OriginalTouch]

Hi all

I trying now to adapt the code to work with Section Images.

has anyone been successful with this?

Andre'

Read posts 7 and 8 for the official way.
Read post 11 for the cheats way.

Works great.

[Ginnys Attic]

If they are very tall and narrow eg a picture of a pencil you are going to run into issues automating this type of process .... I tend to run several batch processes in Photoshop depending on the aspect ratio's of the original... takes slightly longer but the end result is more satisfactory.

If you are wanting square images these will inevitably require some cropping involved to ensure that the item is recognisable once processed ... alas if you are wanting uniformity of size there is no real substitute for doing it yourself (or using several automated procedures) to ensure the best results.

rather than run through all the images within photoshop i use a program called Multiple Image Resizer which is available here - http://www.multipleimageresizer.net it allows for cropping, adding borders, resizing to max dimensions fixed dimensions etc etc and even an overlay image/watermark if required so easy to create all the various images required in next to no time and with either a prefix or suffix for the files name if required.

[ki450751]

Challenges installing this script

Hi I have followed your instructions and not Norman's. Have I missed anything in your instructions?

When in the design tab I receive the following error messages (see attached file).

Please advise.

Thanks

Richard

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.

[TraceyHand]

a wild guess would be that you 'forgot' to create a thumbnails folder before starting?

[NormanRouxel]

Richard,

You are trying (it seems) to manage Section images. In that case, as the error message shows, you cannot use Product variables.

It looks like Kevster has made some mistakes and you've copied them, hence the errors.

Create a new variable SectionImageScaledWidth and use instead of ProductImageScaledWidth.

Also use built-in variables SectionName instead of ProductName.