How to change product multi Images on View Page to make it original size display?

Every product on my store have multi images, And you can see the Screenshot as follow:

How to change product multi Images on View Page to make it original size display or an modify size display? All the images display before the product description.Please help me.

4 answers

congtq 0.00 $tone August 19, 2010

To show original image instead of thumb image, you can do following:
1. Copy app\design\frontend\base\defaulttemplate\catalog\ product\view\media.phtml file to app\design\frontend\default\jm_leadtemplate\catal og\product\view folder
2. Modify this code in app\design\frontend\default\jm_leadtemplate\catal og\product\view\media.phtml file


<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />

become to


<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />

All the images display before the product description

May be you will have to edit some templates phtml file. Pls read this thread…l=1#post183762 to know the path of templates

congtq 0.00 $tone August 31, 2010

To display the product image as you want, you will have to separate view.phtml to 2 parts: a part shows Base Image and other part shows Thumbnail Image. Then you should put them in place will display.

Part one:


    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
        $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <div id="track">
        <div id="handle"></div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
<script type="text/javascript">
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
<?php else: ?>
<p class="product-image">
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
<?php endif; ?>

Part two:


<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h2><?php echo $this->__('More Views') ?></h2>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
    <?php endforeach; ?>
<?php endif; ?>

Now do following 3 steps:
1. copy app\design\frontend\base\defaulttemplate\catalog\ product\view.phtml file to app\design\frontend\default\jm_leadtemplate\catal og\product folder
2. cut part one to app\design\frontend\default\jm_leadtemplate\catal og\product\view.phtml in place will display Base Image
3. in app\design\frontend\default\jm_leadtemplate\catal og\product\view.phtml, delete this code

PHP Code:

<?php echo $this->getChildHtml('media'?>

and copy this code to place will display Thumbnail Image

PHP Code:

<div style="clear:both;"><?php echo $this->getChildHtml('media'?></div>


This question is now closed

Written By