News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

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

Started by jays123123, April 10, 2018, 19:58:21 PM

Previous topic - Next topic

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

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
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum