Help with Product Images.

[wicknilson]

Hey guys. Nick here. I'm pretty green when it comes to web design but have been using Joomla for a while and am gradually getting better at CSS and being able to adjust templates and components to suit the design I'm after. Ive been working on this site for my sister but am having some trouble with the product description page.  I'm not sure if I'm encountering an image size problem or if it's something in the template thats doing it. I was just hoping someone with more experience could take a look and point me in the right direction to finding an answer.

here is the page i am stuck on. I don't know why Virtuemart places two images and why the top one isn't click able to show the lightbox.

http://www.zoulvisia.com/index.php/pre-done/cover-design-one-detail

Thanks very much.


Nick.

[jenkinhill]

That is Joomla 2 you are using. You have posted in the VirtueMart 1.1 section.

Moving to the right area.

[solwininfotech]

Hi,

You need to change in css file

http://www.zoulvisia.com/components/com_virtuemart/assets/css/vmsite-ltr.css

on line number  10

here you need to change like this....

.productdetails-view .product-description, .product-fields {
    margin: 0 15px;
}

after this add this

.productdetails-view .product-description, .product-fields {
    margin: 128px 0 15px;
}

or

.product-description {
    margin: 128px 0 15px;
}




I think it will work..

[Arni]

Hi
I don't have the problem with the text covering the lower image but in my opinion the real problem is that it's showing TWO images. The bigger one is the detail and the smaller (lower) is the thumbnail that's supposed to be the only one showing and in the space where the bigger one is for the moment. I have the same problem and have no idea where or how to fix it.

[adrianpaun]

If you dont whant to show additional images (in your case only the first picture, you could add more images to one product ...).

You should go to edit the template from vm in /components/com_virtuemart/views/productdetails/default_images.php

remove this code from that file:

Code Select Expand

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

    }

}

?>

        <div class="clear"></div>

    </div>

<?php

} // Showing The Additional Images END ?>

This should remove your small image.

If you want to have a lightbox effect for the mail image you should edit the same file and search for this line:

Code Select Expand

    <div class="main-image">

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

    </div>

Replace it with this new one:

Code Select Expand

    <div class="main-image">

<?php echo $this->product->images[0]->displayMediaThumb('class="productimage" border="0"', true, "class='modal'", true); ?>

    </div>

That should do the trick

[Arni]

Hmmm, no, that didn't do it. That made the big image that are showing in the top, the image that I think is the detail image, show by itself. That is good in a way but not the result I was after, if that image is to big it means that the rating, the amount and add to cart button etc is placed on top of it which is no good. The image I need, is the small image that wicknilson is showing in his example, instead of the big one. The small should then be linked to the detail image show that in a lightbox like in earlier versions of VM.

I must say that for me it makes NO sense in having two identical images showing, one small and one full size, at the same time. This seems to be the default since I got the exact same result with a clean install and the "demo" products and I just don't understand the reason for it.

That code in adrianpauns above post could help IF I could limit the size of the image showing in both height and width, is that possible maybe?

[solwininfotech]

Hi
I don't have the problem with the text covering the lower image but in my opinion the real problem is that it's showing TWO images. The bigger one is the detail and the smaller (lower) is the thumbnail that's supposed to be the only one showing and in the space where the bigger one is for the moment. I have the same problem and have no idea where or how to fix it.

That is the virtuemart default look.
If you add additional image to that than is will display with that thumb image.

[Arni]

Hi
I don't have the problem with the text covering the lower image but in my opinion the real problem is that it's showing TWO images. The bigger one is the detail and the smaller (lower) is the thumbnail that's supposed to be the only one showing and in the space where the bigger one is for the moment. I have the same problem and have no idea where or how to fix it.

That makes absolutely no sense, showing both like that. And I just can't see that all products in a shop have more than one image to avoid it.
/Shaking my head

That is the virtuemart default look.
If you add additional image to that than is will display with that thumb image.

[rupesh]

here is the page i am stuck on. I don't know why Virtuemart places two images and why the top one isn't click able to show the lightbox.

http://www.zoulvisia.com/index.php/pre-done/cover-design-one-detail

Thanks very much.


Nick.

i'm also using same template
see http://tcsworld.biz
and all lightbox are working on product page!

[adrianpaun]

i think i've answer to all of your question ... just move the rating, quantity and other stuff to the right ... i've show you haw to revome the additional images, where is the other problem ? I don't think it's OK to remove the big image (main product image) and let only the additional images (the small one), because in the future if you add 2 images to one product ... it will be a big mess in your virtual shop.

[Arni]

i think i've answer to all of your question ... just move the rating, quantity and other stuff to the right ... i've show you haw to revome the additional images, where is the other problem ? I don't think it's OK to remove the big image (main product image) and let only the additional images (the small one), because in the future if you add 2 images to one product ... it will be a big mess in your virtual shop.

Ok, fair enough. I can do that but what happens if I remove the additional images and THEN add more images to any product? Will they also show as a big image like the first one, or will everything change then?

Also, is there a way to limit the size of the displayed image so that it doesn't go behind anything to the right of it. Of course I can resize all images that are going to add to the shop in the future but what about the ones already there? I have quite a few and it would help to be able to do it via the script that brings the image to the page.

[Robert V.]

Found the solution...

Problem with the other solutions was it also removed the rest of the css......
Now try this:

In ..\components\com_virtuemart\views\productdetails\tmpl\default_images.php search for the line below...
The words in bold were changed from true to false. This saved my problem showing the large image and the thumbnail image within product details. -> it now only shows the large image...

Can any developer add this to the extension plug in? this doesn't seem to hard to do. You can then make a button display thumbnail on /off.

------------
Ok look for the code below and change the bold words from true to false...

// 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"', false, 'class="modal"', false, false) . '</div>'; //'class="modal"'
       }
   }
   ?>
        <div class="clear"></div>
    </div>