VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: DarthOlolo on September 14, 2017, 18:34:09 PM

Title: Add class to product image
Post by: DarthOlolo on September 14, 2017, 18:34:09 PM
Good afternoon, faced with the following problem. I can not add a class for the product image in the product card.
As far as I understand, one of the files view \ productdetails \ tmpl \ default_images.php or default_images_additional.pxp is responsible for processing. But unfortunately nothing happens.
Tell me, please, how best to add a class for a product photo?

UPD.: Sorry for the small amount of information ...
Joomla Version - 3.7.4
VM version - 3.2.4
PHP version is 5.6.30 + dfsg-0 + deb8u1
VM Template - standard, which went by default
Link for example - https://test.dartharth.ru/katalog/plavayushchie-vodyanye-lilii/liliya-6

The problem is adding a css class for the product image that is inside the block with the class "vm-product-media-container"
Title: Re: Add class to product image
Post by: jenkinhill on September 14, 2017, 18:35:29 PM
OK  http://forum.virtuemart.net/index.php?topic=128401.0
Title: Re: Add class to product image
Post by: GJC Web Design on September 14, 2017, 23:30:01 PM
why not target it with

.vm-product-media-container > img {

}

its the same thing
Title: Re: Add class to product image
Post by: DarthOlolo on September 15, 2017, 06:54:18 AM
Quote from: GJC Web Design on September 14, 2017, 23:30:01 PM
why not target it with

.vm-product-media-container > img {

}

its the same thing

The fact is that a class is necessary for processing a photo by a plug-in that reacts only to a class of photos.
Title: Re: Add class to product image
Post by: jenkinhill on September 15, 2017, 13:22:33 PM
For default VM templates  using  .main-image > img would be more specific.  Unless you use template overrides which us a different class already.

Title: Re: Add class to product image
Post by: GJC Web Design on September 15, 2017, 14:38:13 PM
use a Js snippet to ad a class?

not tested

<script type="text/javascript">
   jQuery(document).ready(function($){
      $('.main-image > img').addClass('my_img_class');
   });
   jQuery.noConflict();
</script>
Title: Re: Add class to product image
Post by: Spiros Petrakis on September 16, 2017, 11:14:58 AM
Hi,
for the main image open default_images.php and add the class attribute and name in the displayMediaFull function like this :

Before

echo $image->displayMediaFull("",true,"rel='vm-additional-images'");


After

echo $image->displayMediaFull("class='MyClassName'",true,"rel='vm-additional-images'");


the same way you can add a class to additional images.