Product image too big on product details page

[ipo]

I had this problem with VM 2.0, so I've upgraded to 2.0.1b and that problem was solved, but now I've gained a new problem. Product images on product details page are too big. Thumbnails are fine, just the main picture is not resized. Joomla 1.7.4. Here's picture:




I've checked with Firebug and picture is in it's div main-image which is the right size, but the image is just ignoring it. I can set the widht and heght to main-image div, but than picture becomes weird, squeezed because it's not resized, but rather squeezed into container. I've already tried deleting product images and thumbnails and reupload product pictures, even with new filename with not success.

[rlspencer]

I am having the same problem.. I posted the following:
http://forum.virtuemart.net/index.php?topic=97434.0

My website is herbaceousacres.com.. to see what I mean..  The images bleed over into the add to cart field.  It happened when I upgraded to 2.0.1. and 2.0.1c did not fix it.

[sydneyartschool]

I have same problem.

Luckily it is on my test site

dev.sydneyartschool.com.au

[ShowLiFE]

Hello
Testing VM 2.0.1C on Joomla 2.5.1 and I currently work fine.
Almost all the pictures have a size of 600 × 600 px, my problem is occurring at a larger size image, so I noticed that the picture ignores the main css.
The problem is that:
components / com_virtuemart / views / productdetails / tmp / default.php
line 138
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',false,"class='modal'",true); ?>
in the stable version, but:
<?php echo $this->product->images[0]->displayMediaFull('class="product-image"',false,"class='modal'",true); ?>
I solved the problem so I'm in:
components / com_virtuemart / assets / css / vmsite-ltr.css
at line 154
.main-image img.product-image,.featured-view .spacer img,.latest-view .spacer img,.topten-view .spacer img{max-width:100%;height:auto;width:auto;}
product-image replaced by medium-image
try to change the max-width images (100%), but you will find what best suits you.
I got to 200 px and the beautiful results.
Best regards ShowLiFE

[sydneyartschool]

Thanks ShowLife,

your fix seems to work ok.  Hope they fix this in the next release.

[sydneyartschool]

Actually no - not working still on my live site

[rlspencer]

Neither is it working on my site as well.  I reverted back to the previous code on the css.  Hopefully an update will come soon.

[brentonking]

Looks like a new class has been added on that image there "medium-image"
In 2.0.0 the image class was "product-image"

You may need to add this to your main site template.css:

img.medium-image {width:auto; height:auto; max-width:100%;}

See how that goes.

[ShowLiFE]

Hello
Yesterday I installed VM 2.0.1d and the case is still the same, because it probably leads to confusion:

product-image to medium-image.
 
For VM template using the template from VM, but if you are using a template which has integrated template for VM then this template should be modified, rather than product-image on the medium-image.

It also depends on the size of the image, because image size 1800 × 1200 px will probably stretch across the entire page, as I write I instead of max-width: 100% of my max-width: 200px and my image is no larger than 200 px

try to change the value of max-width to determine whether something is changing or not.
I hope that worked well for you as for me.

As a comparison, I attach a link to two articles.

1. Image size 600 × 600 px   http://www.termaltrade.si/trgovina/osvetlitev/moving-headi/expression-5000.html

2. Image size 950 x 850 px http://www.termaltrade.si/trgovina/osvetlitev/led-tehnika/led-30-rdec.html

Best regards ShowLiFE

[benweb]

Thanks to Brentonking:

Added the line

img.medium-image {width:auto; height:auto; max-width:100%;}

to the end of my site template (joomspirit full screen 4) and solved the image problem...

Thanks again
Brad Benson

[Gruz]

Here is the ready file set for VM 2.0.2 http://forum.virtuemart.net/index.php?topic=97365.msg325332#msg325332

The text below is outdated, but can help with understanding what is going on.
In VM 2.0.2 images section is separated in the default_images.php file.

It's improper to resize images with CSS. Then the larger image is downloaded (over bandwidth use, you download a huge image) and is scaled by browser (you loose image quality if you look at it).

Here is my fix, which corrects the image size and adds prev-next buttons to all images. The main image now popups.

VM 2.0.1.e
J2.5.1

So the problem was after VM update from 2.0.0



The problem is here:
         <?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',false,"class='modal'",true); ?>
The quickest way is to replace the displayMediaFull with displayMediaThumb, but it's a poor solution. I have a better one.

So copy
components/com_virtuemart/views/productdetails/tmpl/default.php
to
templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.php

Find code in line about 138

Code: [Select]

<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',false,"class='modal'",true); ?>
</div>
<?php } // Product Main Image END ?>

<?php // Showing The Additional Images
// if(!empty($this->product->images) && count($this->product->images)>1) {
if(!empty($this->product->images) ) { ?>
<div class="additional-images">
<?php // List all Images
if(count($this->product->images) >0){
foreach ($this->product->images as $image) {
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true).'</div>'; //'class="modal"'
and replace this with code

Code: [Select]

<?php /*##mygruz20120209121837 {
It was:
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"',false,"class='modal'",true); ?>
It became:*/
//Enable FancyBox plugin
$front = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($front.'js/fancybox/jquery.fancybox-1.3.4.css');
$document->addScript($front.'js/fancybox/jquery.fancybox-1.3.4.pack.js');
$js = 'jQuery(document).ready(function($) { $("a.gallery").fancybox(); });';
$document->addScriptDeclaration($js);
//output thumbnail
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true);
//unset first image not to be show amont additional ones
unset ($this->product->images[0]);
/*##mygruz20120209121837 } */?>
</div>
<?php } // Product Main Image END ?>

<?php // Showing The Additional Images
// if(!empty($this->product->images) && count($this->product->images)>1) {
if(!empty($this->product->images) ) { ?>
<div class="additional-images">
<?php // List all Images
if(count($this->product->images) >0){
foreach ($this->product->images as $image) {
/*##mygruz20120209120919 {
It was:
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true).'</div>'; //'class="modal"'
It became:*/
echo '<div class="floatleft">'.$image->displayMediaThumb('class="product-image"',true,'class="gallery" rel="'.$this->product->virtuemart_product_id.'"',true,true).'</div>'; //'class="modal"'
/*##mygruz20120209120919 } */
This will add FancyBox popup to the main image, show it's thumbnail instaed of full size and add next-prev buttons to list the images.







The fixed file is attached, must be unzipped and placed here: templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.php
But be carefull! VM is updated often now, so newer version may have some template fixes, which will bit not reflected in the file. So it's better to reapply the code to the latest components/com_virtuemart/views/productdetails/tmpl/default.php after the VM update. I mean till VM is activelty developed.


[attachment cleanup by admin]

[Milbo]

Thank you very much for this nice tutorial

Please be aware that we did that on purpose. We or better said I want to awake a recognition of the actual image size.

Frefel had the idea, that we should add a resize option also for the normal images, not only thumbs. When we added this, then we can add the fix in the css.

[Gruz]

I've not caught that phrase "awake a recognition of the actual image size".

Anyway, resizing of full images must be optional. I have a requirment no to resize the big image, even if both scroll apperars. It's needed to give a user opporunitry to see full image in details. Please consider it when developing this part.

Thanks.

[jjk]

I've not caught that phrase "awake a recognition of the actual image size"

An attempt to teach people not to upload 3000px images all the time when they actually need a 300px image the product details view. Quite a lot of users always rely on image resizing without thinking about it's side effects.

For my VM2 shop I always upload the sizes I actually want to use - meaning no resizing activity at all.

[100gods]

Hello Gruz,

1.
" The fixed file is attached, must be unzipped and placed here: templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.php"
Leads to following error (when "product details" is clicked).
Fatal error: Call to undefined method VirtueMartViewProductdetails::linkIcon() in C:\XAMPP\xampp\htdocs\YYYYYYYY\templates\zt_opis17\html\com_virtuemart\productdetails\default.php on line 92

2.
There is a small difference in what I wish to achieve.
When user clicks on "product thumbnail" , image should be magnified (as it is doing so right now) - with "Next" and "Previous" buttons appearing.
When user clicks on "product details" , the same page should appear as is default in VM 2.0.0

Please advise. Thanks.

--
Using Joomla 1.7 and VM 2.0.0