Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

More view thumbs vertical layout - how can I do this
 
Stevan1978
Sr. Member
 
Avatar
Total Posts:  78
Joined:  2009-04-22
Etten-leur
 

Hi all,

I’m busy with changing the product layout.

Currently I have a sunshading article with the thumbs horizontal beneath the main image.
I want them on the left side of the main article (just like the attached example)

In the file app/design/frontend/default/theme312/template/catalog/product/view/media.phtml

I found out that if I remove this code:

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <
h2><?php echo $this->__('More Views'?></h2>
    <
ul>
    
<?php if(count($this->getGalleryImages()) == 1){$pretty_photo 'prettyPhoto';}else{$pretty_photo 'prettyPhoto[gallery]';}; foreach ($this->getGalleryImages() as $_image): ?>
        
<li>
            <
a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(500); ?>" data-gal="<?php echo $pretty_photo ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(67); ?>" width="67" height="67" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </
li>
    
<?php endforeach; ?>
    
</ul>
</
div>
<?php endif; ?>

The thumbs are removed. Now I just need a piece of code to change it from horizontal to vertical.

Who can help out?

br,

Steve

Image Attachments
viewmore-thums-vertical.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Stevan1978
Sr. Member
 
Avatar
Total Posts:  78
Joined:  2009-04-22
Etten-leur
 

Ok,

SOLVED!

What I did was change the media.phtml in /app/design/frontend/default/[your-theme]/template/catalog/product/view.

I changed the view with 2 div layers next to eachother and now it works.

Cheers,

Steve

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lyonscg
Sr. Member
 
Avatar
Total Posts:  173
Joined:  2009-11-13
Chicago IL
 

I just want to quickly add that this can be done entirely via CSS with no need to modify the template file if the thumbnails are in the same container as the main image.

Note: The instructions below were written based on the default theme’s 2-column right template file. If you are using a customized theme or a different layout, the approach will be different but the concept should be the same.

You will first need to widen .product-img-box to roughly 340px (using default theme) and make sure it is floating left (I believe the float is there by default)

Next, you will need to reduce the width of .product-shop to 280px and make sure it is floating right

Next, make .more-views float left

and last, make sure each of the more-views li float left and clear left.

Here is the CSS changes summed up and I’ve attached a screen shot of what this looks like when it’s finished.

.product-img-box { float:leftwidth:340px}
.product-shop { float:rightwidth:280px}
.more-views { float:left}
.more-views ul li { clear:leftfloat:left}
Image Attachments
left_more_views.JPG
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top