Joomla! 3.7.2
VirtueMart 3.2.3
Hi,
I have a new template and the images are square, how do I change the width so they are my chosen size?
I can see that the images have a specified width set in the element like below:
<div class="additional-images" u="slides" style="left: 96px;top: 0px;width: 624px;height: 468px;border: 1px solid;z-index: 0;position: absolute;"><div style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div>
I can also see that they are loaded like so:
<?php
echo $this->loadTemplate('images_additional');
?>
The end result is square images and style tags in the element but how can I change the width?
Sorry if I have repeated this post, it seemed to error as I posted and I can't see if it went through.
Regards,
James P
Joomla! 3.7.2
VirtueMart 3.2.3
Without a URL nobody can see what you are talking about. Have you asked the template developer? http://forum.virtuemart.net/index.php?topic=108212.0
Sorry, the URL won't help as the site is in development and locked. My boss won't appreciate me publicising the site yet either. I have also contacted the developer but as of yet had no reply, I though this forum would be a place to get more general answers and to learn how VM works.
I can however provide screenshots, code snippets and anything else for people who would like to help.
The main thing is that the images have a specified width of 468 and I would like to change it.
Here is some code:
<div class="vm-product-media-container" id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 712px; height: 470px; overflow: hidden;">
<div class="additional-images" u="slides" style="left: 96px; top: 0px;
width: 468px; height: 468px;
border: 1px solid;">
<div class="easyzoom easyzoom--overlay">
<a class="fancybox-thumb" title="Click to enlarge" data-fancybox-type="image" data-fancybox-group="product" data-fancybox="fancybox" href="/images/stories/virtuemart/product/BBKUSHBLACK0202 1.jpg"><img src="/images/stories/virtuemart/product/BBKUSHBLACK0202 1.jpg" alt="" u="image" /></a><img src="/images/stories/virtuemart/product/resized/BBKUSHBLACK0202 1_624x468.jpg" alt="BBKUSHBLACK0202 1" u="thumb" /> </div>
</div>
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 86px; height: 470px; left:0px; bottom: 0px;">
<div u="slides" style="cursor: move;">
<div u="prototype" class="p" style="position: absolute; width: 86px; height: 86px; top: 0; left: 0;">
<div class=w>
<div u="thumbnailtemplate" style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div>
</div>
<div class=c></div>
</div>
</div>
<span u="arrowleft" class="jssora11l"></span>
<span u="arrowright" class="jssora11r"></span>
</div>
</div>
</div>
</div>
This shows the 468 x 468 image size.
I have also attached a screenshot to show what I mean by a square image.
Regards,
James P
Joomla! 3.7.2
VirtueMart 3.2.3
Sorry I forgot to attach the image!
Regards,
James
The code you posted is not default VirtueMart code, and the image posted shows that you are using a commercial template. We cannot provide assistance in such cases as stated in http://forum.virtuemart.net/index.php?topic=108212.0
If there was a URL then somebody may generously look at the page with Firebug (as you could do) and suggest a fix, but it looks like the developer for some reason has used in-line styles, so you should look at editing the template overrides for product details.