Magento Forum

   
Page 1 of 2
1.1.6 main product image position on page error
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

I’ve just gone up to 1.1.6 and I’ve got a frustrating ‘feature’ (/bug) - my main product image on all product pages is now displaying about 800 pixels (that’s a guess) south of where it should be. I’ve dumped my cache in both dashboard and browser - nothing doing.
I had uploaded the image ratio resize add on, but i’ve since removed that to see if that was the problem. It wasn’t.

It’s rather odd? Anyone had same and have a fix?

you’ll see it on here until I manage to fix it (product pages rememeber):
www.reduceyourenergyuse.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

*bump*

Anyone else seen this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
yaani
Member
 
Total Posts:  56
Joined:  2008-08-13
 

I just upgraded to 1.1.6 also & am having a very similar problem.

On the product pages it will flash a really large product photo for just a second (I have a fiber optic connection) then the image disappears & reappears way further down the page, it covers the related products, or product description depending on how long the product description is.

http://www.teamrocketfactory.com/modsnroses/magento/electronics/cellphones/blackberry-8100-pearl.html

When I go to your site I see the same thing in my browser which is FireFox 3.0.1

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

Yep - Firefox 3 here too. Same problem in Safari 3.1.2

I don’t even know where to begin looking.

 
Magento Community Magento Community
Magento Community
Magento Community
 
yaani
Member
 
Total Posts:  56
Joined:  2008-08-13
 

THD,

I also posted in another thread because my grid view is displaying products in a vertical line instead of 3 in a row in addition to the main product pic being shifted too far down the product page. Someone responded with a solution, but I think I already have the code in my boxes.css file. I am still comparing his posted code to my code.
http://www.magentocommerce.com/boards/viewthread/18394/

 
Magento Community Magento Community
Magento Community
Magento Community
 
yaani
Member
 
Total Posts:  56
Joined:  2008-08-13
 

THD,

I renamed the boxes.css file to boxes_old.css then re uploaded the boxes.css file from the full version of 1.1.6.

My site now displays both the photo on the main product page correctly & the grid view correctly.

Try that! :D

 
Magento Community Magento Community
Magento Community
Magento Community
 
Darren E
Member
 
Avatar
Total Posts:  54
Joined:  2008-05-23
The Woodlands, Texas
 

You are missing this in your boxes.css file. Version 1.1.6 needs to have this code in it below to make the image zoom work properly.

/* Product Images */
.product-img-box { float:leftwidth:267px}
.product-img-box .product-image-zoom { position:relativeoverflow:hiddenwidth:265pxheight:265pxz-index:9}
.product-img-box .product-image-zoom img { position:absoluteleft:0top:0cursor:move}
.image-zoom { position:relativez-index:9height:18pxmargin:0 auto 13px autobackground:url(../images/slider_bg.gifno-repeat 5050%; padding:0 28px 0 28pxcursor:pointer}
.image-zoom #track { position:relative; height:18px; }
.image-zoom #handle { position:absolute; left:0; top:-1px; width:9px; height:22px;background:url(../images/magnifier_handle.gif) 0 0 no-repeat; }
.image-zoom .btn-zoom-out { position:absoluteleft:2pxtop:1px}
.image-zoom .btn-zoom-in { position:absoluteright:2pxtop:1px}
.product-img-box .more-views h4 { border-bottom:1px solid #ccc; margin-bottom:.8em; font-size:.95em; text-transform:uppercase; }
.product-img-box .more-views ul { margin-left:-9px}
.product-img-box .more-views li { float:leftmargin:0 0 9px 9px}
.product-img-box .more-views li a { float:leftwidth:56pxheight:56pxborder:2px solid #ddd; overflow:hidden; }
.product-img-box .more-views li a img { margin:-32px 0 0 -32px}

.product-info-box { margin-top:10pxborder:1px solid #c4c6c8; margin-top:0; }
.product-info-box .product-name { margin-bottom:.3emcolor:#0a263c; font-size:1.2em; }
.product-info-box .price-box { margin:10px 0}
.product-info-box .availability { margin:10px 0padding:0font-size:0.92em}

.add-to-cart-box { float:right}
.add-to-cart-box .qty-box { float:left}
.add-to-cart-box .qty-box label { float:left}
.add-to-cart-box .qty-box .qty { float:leftmargin:0 5px}
.add-to-cart-box .form-button { float:left}

.add-to-box { text-align:right}
.add-to-box li { display:inline}

.add-to-holder { margin:10px 0}
.add-to-holder .add-to-cart-box { float:left}
.add-to-holder .add-or { float:leftpadding:0 7pxfont-weight:boldcolor:#666; }
.add-to-holder .add-to-box { float:leftline-height:1.25emtext-align:left}
.add-to-holder .add-to-box li { display:block}
.add-to-holder .add-to-box li .pipe { display:none}

.product-info-box .ratings { margin-bottom:1em}
.product-essential, .product-collateral { padding:25px}
.product-essential { padding:25pxbackground:url(../images/product_essential_bg.gifno-repeat 100#fff; }
.product-essential .product-shop { width:330px}
.product-essential .product-shop .ratings { margin-bottom:10px}

.product-pricing { margin:10px 0padding:10pxbackground-color:#f4f7f7; border:1px solid #dadddd; }
.product-pricing li { line-height:1.4background:url(../images/bg_tierico1.gifno-repeat 0 3pxpadding:2px 0 2px 10pxcolor:#424242; }
.product-pricing .benefit { font-style:italicfont-weight:boldcolor:#2f2f2f; }
.product-pricing .price { font-weight:boldcolor:#2f2f2f; }

.product-options { margin:20px 0 0padding:10px 15px 20pxbackground-color:#f6f6f6; border:1px solid #e4e4e4; }
.product-options dt { padding:10px 0 0font-weight:normal}
.product-options dt label { color:#2f2f2f; }
.product-options dt .qty-holder { float:rightmargin-right:15px}
.product-options dt .qty-holder label { vertical-align:middle}
.product-options dt .qty-disabled { background:noneborder:0padding:3pxcolor:#2f2f2f; }
.product-options dd { padding:5px 10px 15pxmargin:0 0 5pxborder-bottom:1px solid #e4e4e4; }
.product-options dl.last dd.last { border-bottom:0padding-bottom:5pxmargin-bottom:0}
.product-options dd input.input-text { width:98%; }
.product-options dd textarea { width:98%; height:8em}
.product-options dd select { width:99%; }
.product-options dd .multiselect option { border-bottom:1px dotted #d9e5ee; padding:2px 4px; }
.product-options ul.options-list { margin-right:5px}
.product-options ul.options-list li { line-height:1.5padding:2px 0}
.product-options ul.options-list input.radio { float:leftmargin-top:3px}
.product-options ul.options-list input.checkbox { float:leftmargin-top:3px}
.product-options ul.options-list .label { display:blockmargin-left:18px}
.product-options ul.options-list label { font-weight:normal}
.product-options ul.validation-failed { padding:0 7px}
.product-options p.required { margin-bottom:0padding:15px 0 0}

.product-options-bottom { background-color:#fffada; padding:15px 20px; border:1px solid #e4e4e4; border-top:0; }
.product-options-bottom .product-pricing { margin:0padding:0 0 10pxborder:0background:0}
.product-options-bottom .product-pricing li { background:0padding:2px 0color:#e26703; }
.product-options-bottom .product-pricing .price,
.
product-options-bottom .product-pricing .benefit { color:#e26703; }
.product-options-bottom .price-box { float:leftmargin:0padding:0}
.product-options-bottom .price-label { float:leftpadding-right:5px}
.product-options-bottom .price-tax { float:left}
.product-shop .product-options-bottom .price-box { float:none}
.product-shop .product-options-bottom .price-label { float:nonepadding-right:0}
.product-shop .product-options-bottom .price-tax { float:none}
.product-shop .product-options-bottom .add-to-cart-box { clear:bothfloat:leftpadding-top:12px}

/* Product Options */
dl.item-options dt { font-weight:boldfont-style:italic}
dl
.item-options dd { padding-left:10px}

.truncated { cursor:help}
.truncated a.dots { cursor:helptext-decoration:none !important}
.truncated a.details { cursor:helptext-decoration:none !importantdisplay:inline-blockborder-bottom:1px #1e7ec8 dotted; }
.truncated .truncated_full_value { position:relativez-index:999}
.truncated .truncated_full_value dl { position:absolutetop:-99999emz-index:999width:250pxpadding:8pxborder:1px solid #ccc; border-bottom-color:#bbb; border-right-color:#bbb; background-color:#f6f6f6; }
.truncated .truncated_full_value dl dt { margin-top:0}
.truncated .show dl { top:-20pxleft:50%; }
.col-left .truncated .show dl { left:35pxtop:10px}
.col-right .truncated .show dl  { left:-240pxtop:10px}

/* Product Collateral */

This should fix your issue - or at least the zoomed image issue.

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

Thanks yaani and Darren E - tried both uploading the raw boxes.css from the full 1.1.6 zip, and adjusted my currently broken boxes.css with the code you helpfully supplied Darren. Both adjusted all sorts of layout things on my product pages, although the code as supplied did place the product image correctly.

I think it’s because I’m using the Modern Theme. Do you guys think that’s the case?

 
Magento Community Magento Community
Magento Community
Magento Community
 
yaani
Member
 
Total Posts:  56
Joined:  2008-08-13
 

THD,

Yes, I bet that is where the differences in the boxes.css files are coming from.

I am customized my store by changing values in the default theme files. When I replaced the 1.1.6 default theme files with my default theme files from 1.1.4 the differences were apparent. I then replaced my changed default boxes.css file (1.1.4) with the boxes.css file supplied with the version 1.1.6 I then had to apply my changes again to the new 1.1.6 boxes.css file, the other 1.1.4 default theme files seem to be compatible with 1.1.6, as far as I can tell. Maybe after further testing I will find others. Makes me wonder if I should just use all the new 1.1.6 default theme files & just apply all my styling changes to them. I am trying to document my changes better so next time I upgrade it will make it easier for me if I have to reapply my changes to the new files (rather than replace the new files with my old version files).

 
Magento Community Magento Community
Magento Community
Magento Community
 
evisboy
Member
 
Avatar
Total Posts:  65
Joined:  2008-09-24
Washington, DC
 

I fixed it by changing the class to main-product-img in the following in app/design/frontend/default/default/template/catalog/view/media.html (you would do this in whatever theme you have applied:

FROM
<p class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>” alt="<?php echo $this->htmlEscape($_product->getName()) ?>” /></p>

TO
<p class="main-product-img"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>” alt="<?php echo $this->htmlEscape($_product->getName()) ?>” /></p>

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

I can’t find ‘app/design/frontend/default/default/template/catalog/view/’ - that folder doesn’t exist in my 1.1.6 ? How odd?

 
Magento Community Magento Community
Magento Community
Magento Community
 
evisboy
Member
 
Avatar
Total Posts:  65
Joined:  2008-09-24
Washington, DC
 

My mistake. The file you need to modify is found here (I posted sloppily):  app/design/frontend/default/default/template/catalog/product/view/media.phtml

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

I’m ok with product zooming - don’t really want to get rid of it: More like I want to get rid of the image placement being too far down on the y axis.

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

I seem to have closed that conversation down! I didn’t mean to. I can’t see in the css where to fiddle to get the images displaying properly on the product pages.

Anyone got it fixed up yet?

 
Magento Community Magento Community
Magento Community
Magento Community
 
evisboy
Member
 
Avatar
Total Posts:  65
Joined:  2008-09-24
Washington, DC
 

I had the exact problem and replaced the class; fixed it right up. I didn’t lose the image zoom feature either. Let me know if it works for you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

TOTAL fix. Genius. Product image zoom and product image display error for anyone who’s interested.

Ta.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
Page 1 of 2