VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: ipo on February 01, 2012, 23:25:54 PM

Title: Product image too big on product details page
Post by: ipo on February 01, 2012, 23:25:54 PM
I had this (http://forum.virtuemart.net/index.php?topic=95340.0) 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:

(http://shrani.si/t/1p/pL/1Vl1SA0p/untitled.jpg) (http://shrani.si/?1p/pL/1Vl1SA0p/untitled.png)


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.
Title: Re: Product image too big on product details page
Post by: rlspencer on February 03, 2012, 04:30:36 AM
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.
Title: Re: Product image too big on product details page
Post by: sydneyartschool on February 03, 2012, 08:46:50 AM
I have same problem.

Luckily it is on my test site

dev.sydneyartschool.com.au
Title: Re: Product image too big on product details page
Post by: ShowLiFE on February 03, 2012, 12:07:58 PM
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
Title: Re: Product image too big on product details page
Post by: sydneyartschool on February 04, 2012, 00:30:41 AM
Thanks ShowLife,

your fix seems to work ok.  Hope they fix this in the next release.
Title: Re: Product image too big on product details page
Post by: sydneyartschool on February 04, 2012, 02:07:37 AM
Actually no - not working still on my live site
Title: Re: Product image too big on product details page
Post by: rlspencer on February 04, 2012, 02:20:10 AM
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.
Title: Re: Product image too big on product details page
Post by: brentonking on February 04, 2012, 03:36:41 AM
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.
Title: Re: Product image too big on product details page
Post by: ShowLiFE on February 04, 2012, 08:40:44 AM
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
Title: Re: Product image too big on product details page
Post by: benweb on February 09, 2012, 01:51:18 AM
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
Title: Re: Product image too big on product details page
Post by: Gruz on February 09, 2012, 11:41:14 AM
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
(http://view.xscreenshot.com/file_5cbd53b8da21ed43c63898ebe2f37941) (http://view.xscreenshot.com/5cbd53b8da21ed43c63898ebe2f37941)


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
<?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

<?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.

(http://static.xscreenshot.com/2012/02/09/12/screen_442e45b4f6fee56a0dc9b0aff2c83592) (http://view.xscreenshot.com/442e45b4f6fee56a0dc9b0aff2c83592)

(http://static.xscreenshot.com/2012/02/09/12/screen_6fdbebc431fe23de8175a8e057b52d10) (http://view.xscreenshot.com/6fdbebc431fe23de8175a8e057b52d10)



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]
Title: Re: Product image too big on product details page
Post by: Milbo on February 09, 2012, 11:50:12 AM
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.
Title: Re: Product image too big on product details page
Post by: Gruz on February 09, 2012, 11:57:43 AM
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.
Title: Re: Product image too big on product details page
Post by: jjk on February 09, 2012, 13:16:16 PM
Quote from: Gruz on February 09, 2012, 11:57:43 AM
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.
Title: Re: Product image too big on product details page
Post by: 100gods on February 09, 2012, 16:34:34 PM
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

Title: Re: Product image too big on product details page
Post by: Gruz on February 09, 2012, 16:42:36 PM
Quote from: 100gods on February 09, 2012, 16:34:34 PM
Hello Gruz,



http://forum.virtuemart.net/index.php?topic=95691.msg322349#msg322349
Title: Re: Product image too big on product details page
Post by: 100gods on February 09, 2012, 17:39:28 PM
Hello Gruz,

Thanks for bearing with me !! :-(
Unfortunately, I am still stuck. If you could spare a few more minutes ...

When the user clicks on product thumbnail, the effect should be simply like this (please scroll till midway and click on either of the IMAGES) :
http://extensions.joomla.org/extensions/extension-specific/virtuemart-extensions/virtuemart-products-display/14932

The "Next" and "previous" icon appear, giving the user a slideshow option of product images !!

Or alternatively, a software which could do image magnification like this:
http://www.gifto.in/category.php?id_category=13

Thanks.
Title: Re: Product image too big on product details page
Post by: Gruz on February 09, 2012, 18:34:13 PM
Give me access to your web-site so I can fix it. PM the access.
Title: Re: Product image too big on product details page
Post by: rlspencer on February 10, 2012, 03:20:27 AM
I understand that you may want the community to "awake" to loading huge images however the images in my site were 800x600 for detail to the customer.  When will you implement a fix?
Title: Re: Product image too big on product details page
Post by: Gruz on February 10, 2012, 07:46:56 AM
Quote from: rlspencer on February 10, 2012, 03:20:27 AM
I understand that you may want the community to "awake" to loading huge images however the images in my site were 800x600 for detail to the customer.  When will you implement a fix?

Whom do you ask? Milbo?
Title: Re: Product image too big on product details page
Post by: jjk on February 10, 2012, 10:05:26 AM
Quote from: rlspencer on February 10, 2012, 03:20:27 AM
...however the images in my site were 800x600 for detail to the customer

A simple solution for your problem would be if you would upload two product images. The first one i.e. 300 or 400 pixels in width (Primary product image) and your 800 x 600 pixel image for the lightbox only. When you attach images to your products under the 'Product images' tab, your first image (left to right) is the one that is initially being displayed on the product details view.

Then your product details page would display like the screenshot below. The first mini-thumbnail is the primary product image which is being displayed and the second mini-thumbnail is the large image. The lightbox opens when you click on one of the mini-thumbnails.



[attachment cleanup by admin]
Title: Re: Product image too big on product details page
Post by: chadgarber on February 13, 2012, 22:45:13 PM
So what is the consensus for the best solution?
Title: Re: Product image too big on product details page
Post by: chadgarber on February 14, 2012, 18:23:12 PM
So what's the consensus for the best solutions? Anyone? Ferris?

Quote from: ipo on February 01, 2012, 23:25:54 PM
I had this (http://forum.virtuemart.net/index.php?topic=95340.0) 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:

(http://shrani.si/t/1p/pL/1Vl1SA0p/untitled.jpg) (http://shrani.si/?1p/pL/1Vl1SA0p/untitled.png)


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.
Title: Re: Product image too big on product details page
Post by: Gruz on February 14, 2012, 18:33:32 PM
Quote from: chadgarber on February 14, 2012, 18:23:12 PM
So what's the consensus for the best solutions? Anyone? Ferris?


http://forum.virtuemart.net/index.php?topic=97365.msg322269#msg322269
Title: Re: Product image too big on product details page
Post by: jenkinhill on February 15, 2012, 11:24:07 AM
100gods, this works for me with  2.0.1e and later versions on VM, not for VM2.0.0
Title: Re: Product image too big on product details page
Post by: 100gods on February 16, 2012, 14:48:50 PM
Quote from: jenkinhill on February 15, 2012, 11:24:07 AM
100gods, this works for me with  2.0.1e and later versions on VM, not for VM2.0.0

Hello Jenkin,

I have downloaded VM 2.0.1.k http://dev.virtuemart.net/projects/virtuemart/files !!
Can I run this on my production site as well?

Thanks.
Title: Re: Product image too big on product details page
Post by: jenkinhill on February 20, 2012, 23:33:49 PM
The 2.0.1 versions are development versions - for testing by the forum community. The next version to be used on live sites will be 2.0.2

But if there are no bugs affecting your setup, and you are happy with the security........
Title: Re: Product image too big on product details page
Post by: r_ekkie on February 25, 2012, 21:45:55 PM
Can sombody tell me how to set the size of the additional images? its to small now
Title: Re: Product image too big on product details page
Post by: Gruz on February 25, 2012, 22:07:21 PM
Add to your template css:

.additional-images img {
width:auto;
}


Now the images are forced to be 50px width with a css rule.
Title: Re: Product image too big on product details page
Post by: kaleske on February 25, 2012, 23:33:11 PM
Hello Gruz, after doing what you`ve written in your tutorial main image resized to normal size, but now when i press on thumbnail image it do nothing. I`m using jommla 2.5, VM2.0.2. Sorry for my english.
Title: Re: Product image too big on product details page
Post by: Gruz on February 26, 2012, 00:07:17 AM
This is for VM 2.0.2
Extract the attached file to your templates. My code changes are marked with ##my so you can compare it with original VM templates.


[attachment cleanup by admin]
Title: Re: Product image too big on product details page
Post by: kaleske on February 26, 2012, 09:24:24 AM
now everithing are working, thank you for this. But i have more questions.
First it is possible to make pop-up image hide when press outside the poped window.
Second is it possible to make right and left buttons not to auto-hide.
Sorry for my english, because i`m from lithuania and i`m don`t speging english very well. I`m using joomla 2.5 and VM 2.0.2
Title: Re: Product image too big on product details page
Post by: kyteasdale on February 26, 2012, 12:52:58 PM
Quote from: Gruz on February 26, 2012, 00:07:17 AM
This is for VM 2.0.2
Extract the attached file to your templates. My code changes are marked with ##my so you can compare it with original VM templates.

Thanks for the help on this - I'm afraid I'm a complete dunce when it comes to the code aspect - I'm using J!2.5.1 and VM 2.0.2 - so should I just copy the default.php file you provided into templates/YOURTEMPLATE/html/com_virtuemart/productdetails/  ?

Or am I just getting confused - thanks again :)
Title: Re: Product image too big on product details page
Post by: Gruz on February 26, 2012, 19:30:48 PM
Quote from: kaleske on February 26, 2012, 09:24:24 AM
now everithing are working, thank you for this. But i have more questions.
First it is possible to make pop-up image hide when press outside the poped window.
Second is it possible to make right and left buttons not to auto-hide.
Sorry for my english, because i`m from lithuania and i`m don`t speging english very well. I`m using joomla 2.5 and VM 2.0.2

I will work on it one day. The JS script, which handles the popup, is far from being ideal. I will post when I finish.


Quote from: kyteasdale on February 26, 2012, 12:52:58 PM
Quote from: Gruz on February 26, 2012, 00:07:17 AM
This is for VM 2.0.2
Extract the attached file to your template

Title: Re: Product image too big on product details page
Post by: comraseliteunit on March 02, 2012, 18:34:47 PM
hi.. i am using virtuemart 2.0.2 and joomla 2.5.1 on a clean installation.. i have the same problem like most of them, product image too big on product details page.. and i have solved the issue by following the GRUZ solution.. the only problem is, how do i make the image of the product as such:-

http://forum.virtuemart.net/index.php?action=dlattach;topic=97365.0;attach=46725;image (http://forum.virtuemart.net/index.php?action=dlattach;topic=97365.0;attach=46725;image)

i need to make my images as the above image in that link, to make it big and fixed in that position.. i dont want to adjust the thumbnail size because i am using that size for my other product related stuff.. please give me solution, what file to edit.. thank you so much!
Title: Re: Product image too big on product details page
Post by: Gruz on March 02, 2012, 20:21:37 PM
I've not got the task.
Title: Re: Product image too big on product details page
Post by: comraseliteunit on March 03, 2012, 03:06:15 AM
i mean, how do i make the size of picture normal.. check the attachment..



[attachment cleanup by admin]
Title: Re: Product image too big on product details page
Post by: Gruz on March 03, 2012, 08:11:56 AM
By now upload the full size image adjusted to the size you need and don't change displayMediaFull to displayMediaThumb

(http://static.xscreenshot.com/2012/03/03/08/screen_6bfda8546d159d1ce794df79e61ff403) (http://view.xscreenshot.com/6bfda8546d159d1ce794df79e61ff403)

Currently VM doesn't have a way to create thumbnails of a custom size. I have ideas how to do this, but no time to implement.
Title: Re: Product image too big on product details page
Post by: incavoid on March 05, 2012, 23:08:34 PM
I have a problem ... i haven't this code in my file O.o why ???

<?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"'
Title: Re: Product image too big on product details page
Post by: Gruz on March 05, 2012, 23:11:40 PM
I do apologize, magnetic storm doesn't allow to use telepathy today.

Could you please share what VM versions you use and what file you are looking at?

Have a look here also: http://forum.virtuemart.net/index.php?topic=97365.msg325332#msg325332
Title: Re: Product image too big on product details page
Post by: incavoid on March 05, 2012, 23:18:51 PM
sorry!!!  ::)

i use virtuemart 2.0.2  on joomla 1.5.25

i see this file ---> components/com_virtuemart/views/productdetails/tmpl/default.php

ty and again sorry

Quote from: Gruz on March 05, 2012, 23:11:40 PM
I do apologize, magnetic storm doesn't allow to use telepathy today.

Could you please share what VM versions you use and what file you are looking at?

Have a look here also: http://forum.virtuemart.net/index.php?topic=97365.msg325332#msg325332
Title: Re: Product image too big on product details page
Post by: Gruz on March 05, 2012, 23:22:21 PM
In VM 2.0.2 images section is separated in the default_images.php file.
Title: Re: Product image too big on product details page
Post by: incavoid on March 05, 2012, 23:24:55 PM
i downloaded the package www_template_images ... now is all ok very nice work !!

GG ty again for support

Quote from: Gruz on March 05, 2012, 23:22:21 PM
In VM 2.0.2 images section is separated in the default_images.php file.
Title: Re: Product image too big on product details page
Post by: YooHappy on March 07, 2012, 08:20:01 AM
Quote from: Gruz on February 26, 2012, 00:07:17 AM
This is for VM 2.0.2
Extract the attached file to your templates. My code changes are marked with ##my so you can compare it with original VM templates.


I want to thank you very much. I have spend many hours to search the problem. I saw this post, and I just uploaded the package on my template : it's work!!
Thank you again.
Title: Re: Product image too big on product details page
Post by: haidamaka on April 07, 2012, 14:53:27 PM
Hi! Nice Solution. But how to fix to show the product title but not the file name under image in lightbox?
Title: Re: Product image too big on product details page
Post by: Snarkelton on April 10, 2012, 23:22:30 PM
Quote from: haidamaka on April 07, 2012, 14:53:27 PM
Hi! Nice Solution. But how to fix to show the product title but not the file name under image in lightbox?

I have the same question.

Also, is there a way to set the (scaled) preview image size?

Nice fix, Gruz!
Title: Re: Product image too big on product details page
Post by: Gruz on April 10, 2012, 23:31:44 PM
As soon as I finish my current urgent work I would give a look to the questions. Alas, I cannot pay attention to it right now. Please, wait several days.
Title: Re: Product image too big on product details page
Post by: Snarkelton on April 20, 2012, 01:09:57 AM
Every time I read this, it makes me angry:
"Please be aware that we did that on purpose. We or better said I want to awake a recognition of the actual image size."

The net result here is a horribly dysfunctional content manager. Ok, I'm AWAKE. What is your solution? ----there is none. You provide no solution for scaling images. You provide no solution for adjusting viewable area. You provide no control of thumbnail size. You provide no solution for viewing the full-size image (as in lightbox). Either upload an image that "fits" or else have a page that looks terrible.

From someone that has struggled to get a reasonably descent shop online using VM for several months, I would like to propose a sensible solution for future revisions of VM:

>Images are uploaded in large format by the user, say 800 (or whatever) px wide
>VM creates scaled images as necessary for 1. small thumbnails, 2. preview images, and 3. full size images for detailed viewing via lightbox popup.
>The user can specify the max width and max height parameters for all three above
>The user can easily access and replace 1, 2, or 3 above if he/she finds the scaled images to be of poor quality.
>The small thumbnails are only shown when there is more than one image (why have the image and little thumbnail together with nothing else?? ---even more nonsensical is to have two small thumbnails of the same image as the preview image!!!?!?)
>The main image changes as per clicks to the small thumbnails, and lightbox enables when the user clicks the preview image. Lightbox should include navigation, exit, and auto-close when clicking outside

Please refer to the massively successful amazon.com for a truly elegant and proven implementation.

With each revision of VM, it seems to favor developers and not common users---starkly in opposition to the philosophy of CMS. The net result will be users, like me, searching for alternatives and abandoning VM as a useful, broadly applicable solution.
Title: Re: Product image too big on product details page
Post by: Gruz on April 20, 2012, 01:23:22 AM
I think nowadays that a very easy solution is to use the biggest available photo in the VM backend and the use some plugin like bk-multithumb or one of these ones http://extensions.joomla.org/extensions/photos-a-images/images/articles-images to show resized photoes, popups and reall full size.
I have an idea to find the most applicable plugin and to propose an easy solution to the community.
This would be a joomla plugin - install and use.
Title: Re: Product image too big on product details page
Post by: Snarkelton on April 20, 2012, 02:05:35 AM
I'm not opposed to using one of these. In fact, I like the control of being able to script my own html for the layout of the page.

The challenge is then how to remove the "no image" preview and thumbnail. I assumed is was in default.php, but I'm not certain what to remove. And will I then have the "add to cart" section floating out in space?


Any help is greatly appreciated.

-Adam
Title: Re: Product image too big on product details page
Post by: Gruz on April 20, 2012, 02:12:21 AM
I have not understantd what you need.
Maybe you need to alter templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default_images.php instead of templates/YOURTEMPLATE/html/com_virtuemart/productdetails/default.php   which you mention.

To hide the no-image at all you may parse the HTML what is going to be echoed in the file and do not echo it if the image is 'no image'.  But I'm not sure what you need.

I cannot make experiments now, can only tell ideas. I'm busy now.
Title: Re: Product image too big on product details page
Post by: Snarkelton on April 20, 2012, 02:43:24 AM
Thank you, Gruz. I will experiment and try to figure it out.

I tried installing plugins several times on several versions on VM, but Joomla plugins do not propagate into VM articles (descriptions). It would be very nice if they did, but this is yet another flaw of VM.
Title: Re: Product image too big on product details page
Post by: Gruz on April 20, 2012, 02:50:58 AM
Some of them work anywhere as they just parse HTML looking for images just before the full HTML page is sent to browser. You need to check the settings.

Besides, there is a VM backend option either to run plugins in VM, but I'm not sure if this will work in this case.

Besides you my alter you VM template file to output images in a way to be parsed by a plugin. You need to read the documentation. Pay attention to bk-multithumbnail.
Title: Re: Product image too big on product details page
Post by: Tikkiro on April 21, 2012, 17:46:07 PM
I'm just jumping in on this to say that I tried installing the Multithumbnail plugin but Joomla 2.5 kept returning the typical error "JInstaller: > :Install: Cannot find Joomla XML setup file" - sent a msg to the developer who gave the impression this plugin is no longer being maintained/supported, and he didn't think it would work with J2.5 :(
Title: Re: Product image too big on product details page
Post by: Gruz on April 21, 2012, 19:28:29 PM
http://extensions.joomla.org/extensions/photos-a-images/images/articles-images/9346

(http://static.xscreenshot.com/2012/04/21/20/screen_2f8f4f28fad551aca66d85b118b40aec) (http://view.xscreenshot.com/2f8f4f28fad551aca66d85b118b40aec)
(http://static.xscreenshot.com/2012/04/21/20/screen_d2dec06d27a992297eb492ca24abcb51) (http://view.xscreenshot.com/d2dec06d27a992297eb492ca24abcb51)
(http://static.xscreenshot.com/2012/04/21/20/screen_3c0c97aa249a49243f3ab04594aa683e) (http://view.xscreenshot.com/3c0c97aa249a49243f3ab04594aa683e)
(http://static.xscreenshot.com/2012/04/21/20/screen_f3f7a772e8376f4c14f6ec906fb3a16a) (http://view.xscreenshot.com/f3f7a772e8376f4c14f6ec906fb3a16a)

http://joomla.rjews.net/downloads/category/15-multithumb-for-joomla-16
Title: Re: Product image too big on product details page
Post by: The Gabber on July 18, 2012, 13:23:00 PM
Hi!
I faced with this problem too. I use VM2.0.8c. I checked code of default.php and it's too different to implement earlier patch.
So I tried to use multithumb - I installed and enabled plugin. Put in class field "medium-image" class on both - article and blog tabs. And turned on Enable Joomla Plugin. But it didn't help!
What did I wrong? Or if there's another fresh solution for this problem?
Title: Re: Product image too big on product details page
Post by: Peter1967 on July 26, 2012, 17:41:53 PM
Hallo,

i have the 8e version and the same problem, i test the BK multithumb  are no change full size by detail. By edit the default_images.php then i have very small image.

Have some one a better solution (we scale down, and by on click full size in popup or so)

This is very bad my old OSC (2003) make this better.

Best regards
Peter
Title: Re: Product image too big on product details page
Post by: ShowLiFE on July 27, 2012, 12:02:47 PM
Hello
the problem is. css templates.
Go to: components / com_virtuemart / assets / css / vmsite-ltr.css
and if you change what you have in line 156:
. main-image img.product-image and product-image change medium-image (because it is a medium-image in. php file from which it receives data (default_images.php))
then I got change max-width: 100% written in max-width: 200px (the size of the answer my suggestions), so that all images can not be larger than 200px

if not using default template VM then go to:
components / com_virtuemart / views / productdetails / tmpl / default_images.php
and in 26 line medium-image change with product-image.
Now this is a mess.
Best regards Chico
Title: Re: Product image too big on product details page
Post by: Peter1967 on July 27, 2012, 16:48:51 PM
Hallo,

i found this, and place in my templat css. Are you can not look the full size, only if i use second image then came a popup or on the fly zoom.

Have someone a solution for singel image by klick zoom or popup?

Big Thank´s for the css code.

Best regards
Peter

/* VM 2.08 Product main-image resize */
div.main-image img {
max-width:250px;
max-height:250px;
width:auto;
height:auto;
}


Title: Re: Product image too big on product details page
Post by: ShowLiFE on July 27, 2012, 20:01:25 PM
Hello
Here are two examples:
1. Image size: 947 × 854px  http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-30-rdec.html (http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-30-rdec.html)
2. Image size 466 x 427px  http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-60-vodoodporen-hladna-bela.html (http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-60-vodoodporen-hladna-bela.html)
The difference is visible when you view a larger image, otherwise both look the same size.
Best regards Chico
Title: Re: Product image too big on product details page
Post by: malibu2792 on August 05, 2012, 19:55:49 PM
Quoteif not using default template VM then go to:
components / com_virtuemart / views / productdetails / tmpl / default_images.php
and in 26 line medium-image change with product-image.
Now this is a mess.
Best regards Chico

This worked for me. Thanks.
Title: Re: Product image too big on product details page
Post by: john2012 on August 11, 2012, 22:34:36 PM
Quote from: ShowLiFE on July 27, 2012, 20:01:25 PM
Hello
Here are two examples:
1. Image size: 947 × 854px  http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-30-rdec.html (http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-30-rdec.html)
2. Image size 466 x 427px  http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-60-vodoodporen-hladna-bela.html (http://termaltrade.si/trgovina/osvetlitev/led-tehnika/led-trak-60-vodoodporen-hladna-bela.html)
The difference is visible when you view a larger image, otherwise both look the same size.
Best regards Chico
hello

With 2 images by product is work for me.

but With 1 image by product
no display of image resized

Have an idea why? thanks

(sorry for my bad english)