====== Displaying Additional Product Views of the Same Height ======

===== Why This Article =====

When the height of the //General size// image used for [[:productcart:products_adding_new#additional_product_views|Additional Product Views]] is different, there is an interface issue on the product details page. That is: the section of the page that contains the thumbnails "jumps" to accommodate the taller or shorter images above it. On FireFox, this also creates flickering on the thumbnail views. 

The problem only applies to the //General// size. Whether the //Detail// view is of a different height has no effect on the product details page.

===== A Solution =====

A solution is to make sure that the //General size// images are of the same height. 

A manual way to do so is to copy and paste images of different heights onto the same white image that works as a background, and re-save the image. That way all images are basically "re-framed" within the background image, thus sharing the same height and width.

You can easily **automate this task** in many graphics programs using the handy batch processing tools included in many of them. At Early Impact we use Adobe Fireworks® for a lot of our image editing, so that's what we will use in the example below.

==== Creating a new Batch Processing Routine in Fireworks ====

Here is a way to do the above with **Adobe Fireworks®**. We have created a batch processing routine that makes sure that an image occupies a 250 by 250 white space, regardless of the initial size of the image.

  * {{:how_to:resize_to_max_250_high.zip|Download the batch processing routine}} (Resize_to_max_250_high.jsf - Zipped)
  * See instructions below to create your own \\ These instructions were compiled using Fireworks 8. We are including detailed instructions on how we created this batch processing routine so that you can follow the same steps in order to create something similar, in case the one we created does not work for you.

First, we will create a new, custom //Command// that we will need when batch processing the images. A command is simply a series of steps that are saved so that they can be repeated with one click (or through a batch processing routine).

  - Open any image that is smaller than 250 x 250 pixels (the first step of resizing the image will be done automatically by the batch processing tool). 
  - Make sure that the //Frames & History// panel and that the //Align// panel are open. Click on the //History// tab of the //Frames & History// panel to make it visible (otherwise select //Window > History//).
  - Now take the following steps:
   - Select //Modify > Canvas Size//, enter 250 in both the W and H input fields, leave the //Anchor// in the center, and click OK.
   - Click on your image to select it. Then, on the //Align// panel, click on //To Canvas// if it is not already selected (this ensure that your next two steps refer to the canvas). Then click on both //Align Horizontal Center// and //Align Vertical Center//. The //History// panel will not record anything when you click on To Canvas, but it will record two Command Script actions when you click on the two alignment buttons.
   - Select //Modify > Canvas Color//, click on //White//, and click OK.
   - Select the 4 steps recorded in the History window:
    - Crop Document
    - Command Script
    - Command Script
    - Canvas Color
  - On the same window, click on the //Save steps as a Command// icon (the small save icon), and save the new command with a descriptive name (e.g. "Resize Canvas to 250 White and Align"). 

{{:how_to:fireworks_batch_process.gif|How the Fireworks work area should look as you are following these instructions}}

If you click on the Commands menu, your custom command should now be listed at the bottom of the menu items.

To test whether this command works, open any image, resize it to 250 pixels in height, crop the document, and then apply the command. Fireworks should automatically center it into a 250 by 250 white canvas.

Now that we have created the new command that we needed to create a common background for the images, let's create the batch processing routine that will allow us to fix our problem.

  - Select //Batch Process// from the File menu.
  - Go into the directory where your images are saved and click on //Add All//.
  - Click on //Next//
  - Select //Scale//, click on //Add//, select //Scale to Fit Area// in the Scale settings section of the window, enter 250 in both input fields, and check the option //Only scale documents currently larger than target size//.
  - Click on the + sign next to //Commands// to show all //Commands//. Select the one you created above (e.g. "Resize Canvas to 250 White") and click on //Add//.
  - Select //Export//, click on //Add//, and select your preferred export setting (e.g. JPEG - Better Quality).
  - Reorder them so that you have (see image below):
    - Scale
    - Your custom command (e.g. "Resize Canvas to 250 White and Align")
    - Export \\ {{:how_to:fireworks_batch_process_250.gif|A screen shot of the batch processing routine in Fireworks}}
  - Click on //Next//
  - Select a custom folder as your //Batch Output// destination (e.g. a subfolder of the folder in which your images are)
  - Save your script so that you can use it (or edit it) later.
  - Click on //Batch// to batch process all the images.

==== Applying the new Batch Processing Routine ====

To fix the problem mentioned at the beginning of this document:

  - Apply this batch command to all //General// size images used as //Additional Views//: 
    - place the files in a folder 
    - launch Fireworks
    - double-click on the *.jsf file you downloaded
    - //Files to Process//: click on //Custom//, then navigate to the folder mentioned above, and select all the files to process
  - The files will be saved to a "New resized images" subfolder of the folder you selected
  - FTP all the batch processed images to the //pc/catalog// folder, replacing the existing ones.

The results should be the following:

  - All images larger than 250 pixels will be resized proportionally to occupy an area that is maximum 250 by 250 pixels.
  - Images that don't need resizing (in either one dimension or the other) will not be resized.
  - Images that occupy an area that is smaller than 250 by 250 pixels will be centered onto a white canvas that is 250 by 250, and which becomes part of the exported image.

===== Related Articles =====

  * [[:productcart:products_adding_new#additional_product_views|About Additional Product Views]]
  * [[:how_to:import_additional_product_views|How to Import Additional Product Views]] \\ ProductCart does not allow you to import additional product images through the Import Wizard, but there is a workaround.