VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: jays123123 on April 10, 2018, 19:58:21 PM

Title: Additional images (multiple thumbnails) do not always show up.
Post by: jays123123 on April 10, 2018, 19:58:21 PM
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
Title: Re: Additional images (multiple thumbnails) do not always show up.
Post by: jays123123 on April 10, 2018, 20:09:03 PM
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>
Title: Re: Additional images (multiple thumbnails) do not always show up.
Post by: jays123123 on April 11, 2018, 18:15:59 PM
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.
Title: Re: Additional images (multiple thumbnails) do not always show up.
Post by: jenkinhill on April 11, 2018, 18:29:50 PM
Quote from: jays123123 on April 10, 2018, 19:58:21 PM

                <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