Additional images (multiple thumbnails) do not always show up.

[jays123123]

Problem with additional images (multiple thumbnails). They only show up after one refresh. (Refreshing with ctrl + f5, clear cache and refresh, makes my images go away). I have to visit the page and refresh to be able to see the images.

The code when I inspect the page is almost the same except for the height=0px instead of the height of the images which causes the thumbnail image does not show up. You can see by the image's name, there should be a resize taking place, but the height of the <a> is still getting set to 0.

Here's the code snippet:

<div class="additional-images">
            <div class="floatleft"> </div> // There are about 15 empy divs
                <div class="floatleft">
            <a title="" rel="vm-additional-images" href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"><img src="/images/stories/virtuemart/product/resized/xxxxxxxxxxxxxxxx.jpg" alt="xxxxxxxxxxxxxxxxxx.jpg" style="height: 0px;"></a>  </div>
            <div class="clear"></div>
</div>


Joomla: 3.8.5
VM: 3.2.0
PHP: 5.6

Similar issues:
http://forum.virtuemart.net/index.php?topic=106696.0
http://forum.virtuemart.net/index.php?topic=108068.0

[jays123123]

The corresponding code in com_virtuemart\views\productdetails\tmpl\default_images_additional.php

<div class="additional-images">
   <?php
   $start_image = VmConfig::get('add_img_main', 1) ? 0 : 1;
   for ($i = $start_image; $i < count($this->product->images); $i++) {
      $image = $this->product->images[$i];
      ?>
      <div class="floatleft">
         <?php
         if(VmConfig::get('add_img_main', 1)) {
            echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,$image->file_description);
            echo '<a rel="vm-additional-images" href="'. $image->file_url .'"  class="product-image image-'. $i .'" style="display:none;" title="'. $image->file_meta .'" ></a>';
         } else {
            echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description);
         }
         ?>
      </div>
   <?php
   }
   ?>
   <div class="clear"></div>
</div>

[jays123123]

Solution is to change

.additional-images img{margin-right:8px;max-width:50px;max-height:50px;height:50px;};

In the file www\templates\[your templaye]\css\vm-ltr-site.css

This just gives it a fixed height. The image width will be scaled automatically.

[jenkinhill]

                <div class="floatleft">
            <a title="" rel="vm-additional-images" href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"><img src="/images/stories/virtuemart/product/resized/xxxxxxxxxxxxxxxx.jpg" alt="xxxxxxxxxxxxxxxxxx.jpg" style="height: 0px;"></a>  </div>

When using the default VirtueMart templates there is no in-line style added for additional images. The css solution you provide is suitable only for whatever template you are using.

Current VM version is 3.2.14