Layout changes [SOLVED]

[maxi1973]

Hello, is it possible to change the layout as attached in the picture below as to see an unique medium image of the product?
At the moment i see two images of a single product, a small one in the left corner that open the lightbox and a medium image on the center that is the correct image.
I need to show only che central image with (if possible) the lightbox functions. I've watched in components/com_virtuemart/views/prodictdetails/tmpl/default.php and default_images.php but i can't find where i can change informations about the small image on the left corner.
Thanks a lot to anyone can help me. Max

[attachment cleanup by admin]

[SamF]

This is for "main" image (the first one in the set), which is displayed on the right:

Code (\components\com_virtuemart\views\productdetails\tmpl\default_images.php about line 25) Select Expand


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

This is for additional images (one additional image is a thumbnail of main image), and they are displayed below the main image, aligned to the left:

Code (\components\com_virtuemart\views\productdetails\tmpl\default_images.php about line 35) Select Expand


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


If you want to see only the main image with modal behavior, change the first piece of the code with the following:

Code Select Expand


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

and just drop the second piece of the code.

[maxi1973]

Ok, thanks Samf for your Help. Now i have another question: is it possible to increase the additional images sizes? where i can modify that? thanks a lot. Max

[SamF]

is it possible to increase the additional images sizes?

Shape the .additional-images class here:

Code (components/com_virtuemart/assets/css/vmsite-ltr.css about line 14) Select Expand


.additional-images img {
  height: auto;
  margin-right: 8px;
  width: 55px;
}

Or within your Joomla template .css to override VM css.

Regards,

Sam)

[maxi1973]

Thanks Sam, i've done as you suggest, but the resized images seems like a little image magnified, so it's not nice to see, as you can see here:
http://www.ediliziamg.it/index.php/catalogo/caminetti/pompei-nuovo-marsicamin-detail

Clicking on the image it open the lightbox with a big image with right proportions. i have to reupload the images ?
seems as it use the thumbnail 90x90 and not the medium size image... if i reduce a big image to 300x300 it will be shown as good image, but if i resize a 90x90 to 300x300 it will be shown a bad image. Excuse for my english.

[SamF]

i have to reupload the images ?

Actually, only thumbnails.

Looks like you use full scale pictures 800x600, and want to make a preview ("thumbnail") on the product page of 300x225. The thumbnail image file should be this size (or, may be, a little smaller; try 200x200, and see, if it will not blur too much).

You should not re-upload full scale pictures, I think.

[maxi1973]

Ok, but i need to know if there is a way to automatically resize, during upload the medium-size image. otherwise it will show with uploaded sizes in browse page
example: if i upload an image 1200x 900 pixels, the medium image will mantain the proportions, but the thumbnails, il clicked will show a resized image (right version).
I need to know if is possible to set anywhere the dimensions of medium images as it possible for thumbnails.
here you can see an example of what i'm talking about:
http://www.ediliziamg.it/index.php/catalogo/caminetti/pompei-nuovo-marsicamin-detail.

Thanks in advance to anyone can help me.

[maxi1973]

Thanks Sam, If can be helpful for someone, i've solved in this way, maybe can be helpful for other users:
1) in /components/com_virtuemart/views/productdetails/tmpl/default_images.php
change at about line 25:

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>
to:

Code Select Expand

<div class="main-image">
<?php echo str_replace('<a', '<a class="modal"', $this->product->images[0]->displayMediaFull('class="product-image"',true,"class='modal'",true)); ?>
    </div>

then to make possible to appear additional images only if they are more then 1, change at approx line 32:

Code Select Expand

// if(!empty($this->product->images) && count($this->product->images)>1) {
if (!empty($this->product->images)) {

to:

Code Select Expand

if(!empty($this->product->images) && count($this->product->images)>1) {
//if (!empty($this->product->images)) {

[lipes]

To add a popup in main image i did this in default_images.php:

Code Select Expand

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

I dont want the repeated image in thumbnail so i did this:

Code Select Expand

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

But the worst part is that i want to display (in future) additional thumbs of the products... but not want to display the same thumb picture = to main image, and i dont know how to solve this problem?! 
Is something like we got in the VM1...
only display in thumb the additional images...

[James03]

To add a popup in main image i did this in default_images.php:

Code Select Expand

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

I dont want the repeated image in thumbnail so i did this:

Code Select Expand

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

But the worst part is that i want to display (in future) additional thumbs of the products... but not want to display the same thumb picture = to main image, and i dont know how to solve this problem?! 
Is something like we got in the VM1...
only display in thumb the additional images...

If you want to show additional images only if you have more then one there is  a really simple way:

replace 0 with 1 as below

Code Select Expand

    <div class="additional-images">
<?php
   List all Images
   if (count($this->product->images) > 1) {
      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>

[foo-wing.li]

Ok can someone help me with opening a PDF addtional image file in a new window instead of the same widow.
http://starkbuild.com/markets/police-body-armour/police-vest-trv-info.html

I just can't find the javascript or PHP that handles the file type so I can add _blank for additional image links that are not class="modal".
At the moment if the file type is not a JPG, JPEG, GIF, PNG or WBMP the class="modal" is removed from the <a href=""></a> but I want it to add target="_blank".

So instead of <a href="" class="modal"></a> I need it to be <a href="" target="_blank"></a>

I just need to know what code handles this and removes the class"modal" for PDF additional images?

Thanks