News:

Looking for documentation? Take a look on our wiki

Main Menu

Change image size in template for product details

Started by StompJames, September 21, 2017, 16:24:15 PM

Previous topic - Next topic

StompJames

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

jenkinhill

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
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

StompJames

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



StompJames


jenkinhill

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. 
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