Totally Zenned
- Join Date:
- Sep 2008
- Location:
- DownUnder, overlooking South Pole.
- Posts:
- 1,020
- Plugin Contributions:
- 2
Main_product_image proportional to page width
I want to make my main_product_image proportional to the page width of the user.
My current page setup is set at max-width = 1200px, with left and right column widths = 20%, and the centre column divided equally into two columns, productBox = 49% width and productDetailsBox = 49% width.
The basic div structure is as follows:
<div id="mainProductBox=100%"> <div id="productBox=49%"> <div id="imageBox=90%"> <main_product_image> </div id="imageBox"> </div id="productBox"> <div id="productDetailsBox=49%"> <product details> </div id="productDetailsBox"> </div id="mainProductBox">What I want is for main_product_image to always fit within the width of imageBox.
Part of the problem is that the dimensions of main_product_image are prescribed in Admin > Configurration > Images, as in Product Info - Image Width and Product Info - Image Height, but where setting fixed px dimensions for the medium image invariably causes the image to extend beyond productBox=49% and thus overlap productDetailsBox=49% when viewed on screens of smaller width.
I have also tried setting Product Info - Image Width and Product Info - Image Height to 100%, which results only in a small image being shown, and to null or blank, which results in the medium image being shown but without any proportioning. Other variations I have tried have resulted in a blank white centre column.
Furthermore, in tpl_product_info_display.php, the width and height dimensions of main_product_image are called from tpl_modules_main_product_image.php,
echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
where to make main_product_image proportional may also require replacement code for zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT).
In html websites, I have successfully achieved proportional dimensioning by the following:
<div class="c1"> <div class="c2"> <div class="c3"> <img class="c4"/> </div class="c3"> </div class="c2"> </div class="c1">where
div.c1 {width: 100%; height: auto;}
div.c2 {width: 49%; float: left; text-align: center;}
div.c3 {width: 90%; margin: 0 auto;}
img.c4 {width: 100%; border: 0px solid;}
However I fail to see how to incorporate <img class="c4"/> into the existing code.
Help greatly appreciated. Thanks in advance