change product info image size

[faye]

Hi - How can I change the size of the product image inside the product info page? I noticed I can't change it inside configuration -> image.

 

Also, when I mouseover additional images in my product info page, the images swap out with the original product image. However, the additional images show up distorted. This is because the additional image is fitting itself into the original product image space. How can I change the size of the rollover image effect so that the images show up constrained/proportional?

 

Thanks in advance!

[faye]

can anyone help?

[spax]

You can add to the image size from product_info.php where you see this code

 

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT

 

Append a mathematical operator and value, the image will be that much bigger. 2X bigger, for example:

 

SMALL_IMAGE_WIDTH*2, SMALL_IMAGE_HEIGHT*2

 

Or 20px bigger

 

SMALL_IMAGE_WIDTH+20, SMALL_IMAGE_HEIGHT+20

 

There are 2 instances of that code in product_info.php so you'd need to change both.

 

As far as I know, rollover images need to be the same size. You'll have to make them the same size or find another way.

[faye]

thanks. my problem is that my rollover images aren't the same size as each other and as the original.

[germ]

The "stock" osC code that displays the product image goes something like this:

 

<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

This code extracts the actual image size from the image file on the server, then let's you apply a scale factor if you want:

 

<?php
//
// Index 0 and 1 contains respectively the width and the height of the image. 
//

 $width_text = SMALL_IMAGE_WIDTH;
 $height_text = SMALL_IMAGE_HEIGHT;
 if ( $image_size = @getimagesize( DIR_WS_IMAGES . $product_info['products_image'] ) ) {
$scale = 1.0; // change the scale to suit
$width_text = intval( $image_size[0] * $scale );
$height_text = intval( $image_size[1] * $scale );
 }

//
//
?>
<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), $width_text, $height_text, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], $width_text, $height_text, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

What I don't know is how this affects your rollover image code.

:blush:

 

To anyone trying to copy/paste from this post:

 

The forum puts a space between java and script that you have to remove.

[faye]

Currently my product_info.php says the following.

 

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), '', '', ' id="org_image" style="margin:0px 0px 0px 0px;"') . ''; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, ' style="margin:0px 0px 0px 0px;"') . ''; ?>

</noscript>

 

It's different than what you had. Will I have a problem using the code you entered in your second box?

 

Thanks

[germ]

<?php
//
// Index 0 and 1 contains respectively the width and the height of the image. 
//

 $width_text = SMALL_IMAGE_WIDTH;
 $height_text = SMALL_IMAGE_HEIGHT;
 if ( $image_size = @getimagesize( DIR_WS_IMAGES . $product_info['products_image'] ) ) {
$scale = 1.0; // change the scale to suit
$width_text = intval( $image_size[0] * $scale );
$height_text = intval( $image_size[1] * $scale );
 }

//
//
?>
<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), '', '', ' id="org_image" style="margin:0px 0px 0px 0px;"') . ''; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], $width_text, $height_text, ' style="margin:0px 0px 0px 0px;"') . ''; ?>
</noscript>

You can try that.

 

BACKUP THE FILE BEFORE MAKING ANY CHANGES.

 

The note at the bottom of my last post about the space between java and script applies here, too.

 

I'm off to bed so if you have any problems I'll look at this thread tomorrow.

[faye]

so using that code in the box did not hurt the product info page. but changing the scale did nothing to the height and width. =\

 

// Index 0 and 1 contains respectively the width and the height of the image.

//

 

$width_text = SMALL_IMAGE_WIDTH;

$height_text = SMALL_IMAGE_HEIGHT;

if ( $image_size = @getimagesize( DIR_WS_IMAGES . $product_info['products_image'] ) ) {

$scale = 1.0; // change the scale to suit <-- I CHANGED THIS NUMBER

$width_text = intval( $image_size[0] * $scale );

$height_text = intval( $image_size[1] * $scale );

}

[faye]

never mind i got it to work. for some reason, the original code did not include the width and height variables so it didn't matter if width and height changed. see code highlighted in red. Thanks a lot for your help in this!

 

script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), '', '', ' id="org_image" style="margin:0px 0px 0px 0px;"') . ''; ?>');

//--></script>

 

now that i have the product image size changed, my next problem is that my rollover images are fitting into the product_info image dimentions.

currently the code in additional images for rollover effect is...

 

<script language="javascript">

function swapImage(iName)

{

document.getElementById('org_image').src = iName;

//document.getElementById('org_image').width = 150;

//document.getElementById('org_image').height = 120;

}

function RestoreImage(iName)

{

document.getElementById('org_image').src = iName;

//document.getElementById('org_image').width = 218;

//document.getElementById('org_image').height = 81;

}

</script>

 

looking at the code, you can see that i commented out the default width and height from this code because all of my rollover images have different dimensions. i don't know the variable to call to get the dimensions of the rollover image, so that when it calls the swapImage function, it uses the width and height of the rollover image, and when it restores, it uses the original image dimentions.

 

thanks in advance for your help

[germ]

Do you think you could post (or PM me) the URL to your store?

:unsure:

 

I really can't answer this question without seeing how the page code is constructed.

 

This is kind of where I thought we'd be when I first replied...

:lol: