|
I wanted to enhance the image display of a very nice gallery plugin called 'Flash Gallery Flip' (free).
The only problem was that it took category values, and flipped images from all products in a given category. I wanted per product image flipping.
I really liked the way this module worked, so I adjusted / added to the code base to enable product level flipping.
For my needs I only needed to enhance the 'flip' method, but other methods can be enhanced. Just ask.
Ok, so here goes:
First, install the original module using Magento Connect, or as I prefer, from the command line (run from the base magento install folder):
sudo ./pear install magento-community/AuIt_FLASH_GALLERY_FLIP
Configure the module as per instructions on the author's web page.
Once you are happy that the original module works, continue below:
My goal was to get the images to flip on the list view, so I adjusted my local design file located in the template folder for the current theme (you should be able to do this the xml way, as per the authors install instructions):
.../template/catalog/product/list.phtml
find the image file placement line
<img src="/<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(151); ?>"
width="151" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"
title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
and put in the new code to load the image flip. It is practically the same as the original code given by the author, I just replaced 'category' with 'product' and pass on the given product id, and the block is called 'flipproduct' in place of just 'flip'
<?php echo $this->getLayout()->createBlock('auit_gallery2/flash_flipproduct')
->modelParam('randomise','0')
->modelParam('timer','10')
->modelData('model','product_view')
->modelData('product',$_product->getEntityId())
->modelData('max_products','15')
->modelData('picture_width','151')
->modelData('picture_height','151')
->flashAttribute('frame_style','width:152px;height:151px;
text-align:center;margin:10px 0px;padding:10px 0px;')
->flashAttribute('width','151')
->flashAttribute('height','151')
->toHTML();?>
For styling I had to wrap the thing in a div with class set to "product-image
You can very easily adjust the grid view the same way, it is located in teh same file.
The next step is to create new folders in the modules installed folder located in ./app/code/community/Auit (all commands start at the base folder of the magento install, and run as my webserver user)
cd ./app/code/community/AuIt/Gallery2/Model
mkdir Product
cd Product
Next you need to download two new files, and place them inside that new folder: Abstract.php and View.php. (renamed to .txt so they can download - rename them)
wget http://www.dedmeet.com/files/image_flip/Abstract.php.txt ./
wget http://www.dedmeet.com/files/image_flip/View.php.txt ./
mv ./Abstract.php.txt ./Abstract.php
mv ./View.php.txt ./View.php
Next you need to get the Flipproduct.php file, and place it in the Block folder. Again starting from the top level magento install folder
cd app/code/community/AuIt/Gallery2/Block/Flash/
wget http://www.dedmeet.com/files/image_flip/Flipproduct.php.txt ./
mv ./Flipproduct.php.txt ./Flipproduct.php
That should be it.
Clear your cache via the magento admin panel.
Notes:
1. The first image will be the default image for the product
2. If you use different url's for base, media, js and css, (adminpanel->configuration->web) then it will not work. This is an issue in the original code, which I have not yet had time to look at (security issue with flash laoding from a different domain and attempting to find images on another)
Download my list.phtml file as an example: list.phtml (right-click and select 'Save link as...) (Remember this file is for magento 1.3, and a custom theme, so do not just drop in place on another version of magento. It will break things)
Enjoy.
|
