I haven’t been actively online the past few weeks but have been pretty busy offline, and will blog about the past few weeks soon. For now I’m keeping this entry focused on showcasing the multiple product images feature that is finalized and ready to be fine-tuned.
The idea behind the implementation is to define image groups with their relevant sizes and to resize all images in each image group. The primary image group is an “Originals” group that holds the base image to resize from (ie, the largest image size).
The initial implementation was to form an image to image group relationship to only resize images in relevant groups to save on disk space on the server. This relationship was later removed to have images resized in all groups as disk space is cheap, and it’s cool to show a bunch of images ready for viewing when needed.
There are so far 5 image groups defined as default:
Originals
Thumbnails (default)
Product Information Page
Large
Mini
The Thumbnails group is defined as the default group which is shown throughout the catalog. The Product Information Page group is slighly larger than the Thumbnails group and is used on the product information page only. The Large group is larger than the Product Information Page group and is used for the popup window to show the single product image in more detail, or to view additional images of the product. The Mini group was added in last to be used in the You’ve Recently Visited module, and is smaller than the Thumbnails group size.
It’s up to the template on how the images are shown on the product information page. Traditionally it has only shown one image to click on for a larger view, and is now easily possible to show additional images on the product information page relating to a group, with or without the need for a popup-click-to-enlarge feature.
For the default template one image is still being shown on the product information page, and has its popup window dynamically sized depending if additional images exist or not. If the product only has one image defined, the popup window is sized specifically to the Large image. If multiple images exists, the popup window is sized accordingly to fit in a 2 column Thumbnail view and a larger view of the selected product image.
The administration part is really fun to work with, but will need to have user interface issues addressed as the edit product page is a form that needs to be submited to save any changes, where the actions on product images occur instantly with AJAX (uploading, deleting, and drag-and-drop sorting).
An additional issue exists of an iframe being used to handle the file uploads, due to forms not being able to be nested. Due to the tabs on the page, FireFox sometimes does not show the iframe (file upload form) until the tab is clicked on again, and Safari also has some issues with not uploading the file occasionally.
Otherwise it is working great and is really fun to play with
Here is a movie showcasing the multiple product images feature:
osc30a3_product_images.mov
Yes, if you’re not following the RSS Timeline feed on the development site, this work is in /trunk/