Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

Popup images too large.


Recommended Posts

I've done some searching on the forum and while it seems I'm not the only person having this problem, I haven't yet read a solution that works for me.


The images that my client is uploading to his store are very large, hence the popup images you get when you "click to enlarge" are too big for the browser/screen. Having him resize each image before uploading is out of the question, and I can't see how the small, medium, large contributions will hlep since they also require resizing and uploading more than one image for each item. If I were going to have him do that, I'd just have him resize the first one and let the thumbs and so forth resize on the fly.


What I really need is for the popup images to be able to be resized from the Admin panel or even from actual coding that can't be changed once I do it, but in such a way that my client can simply upload an image of any size and osC will resize the popup to a reasonable size without him having to do anything further.


Is this possible?


I noted that in this post: http://www.oscommerce.com/forums/index.php?showtopic=162018&hl=


LCC UK says


You should use a picture editor to reduce the size of your original image to the size you want your pop-up image to be.  When you save the newly sized image and then upload it to your site, you will see that osCommerce has automaticall resized it to whatever you have set the "Display Image Width" at and if you have set the "Display Image height" as well, you will see a distortion in the image, which is why you should only set one or the other.


At the moment the images on osCommerce are uniform, in that they all have to be the same width or height (unless someone knows how to do it differently?).  You are able to dictate the width and height by determining the image size you are happy with and set the table below accordingly.  I along with many others on this forum have found that the best results come when you only set the width or height and not both.  From an ppearance point of view, it is better to set the width of your thumbnail or "Display Image Width" to the size you are happy with, in my case I chose 120 pixels wide and left the height blank.


The results can be viewed by copying and pasting this link:




Although the above is a little long winded, it really is a quick and simple process, which it has to be for me to understand it!!


Go go to configuration/images in your admin panel.


Title Value Action 

Small Image Width 100 

Small Image Height   

Heading Image Width   

Heading Image Height   

Subcategory Image Width   

Subcategory Image Height   

Calculate Image Size true 

Image Required true 

Display Image Width 120 

Display Image Height   

Popup Image Width   

Popup Image Height


Now, I don't have those last four items in my admin/configuration/images section. Mine reads:


Title Value Action

Small Image Width

Small Image Height

Heading Image Width

Heading Image Height

Subcategory Image Width

Subcategory Image Height

Calculate Image Size

Image Required


Have I done something wrong or is this the result of a contribution I haven't yet found?


Thanks to everyone for any help!

Link to comment
Share on other sites

Okay, in the spirit of God helping those who help themselves, I've tracked down where the changes need to be made (I think).


This is my popup_image.php file:


 $Id: popup_image.php,v 1.18 2003/06/05 23:26:23 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License



 $products_query = tep_db_query("select pd.products_name, p.products_image from " . TABLE_PRODUCTS . " p left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['pID'] . "' and pd.language_id = '" . (int)$languages_id . "'");
 $products = tep_db_fetch_array($products_query);
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo $products['products_name']; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<script language="javascript"><!--
var i=0;
function resize() {
 if (navigator.appName == 'Netscape') i=40;
 if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);
<body onload="resize();">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?>
<?php require('includes/application_bottom.php'); ?>


I don't know what to do, but I'm willing to monkey around with it and learn if anyone will even give me a push in the right direction. :-)

Link to comment
Share on other sites

And this is the code from includes/functions/html_output.php that seems to be relevant:


// The HTML image wrapper function
 function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
   if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
     return false;

Link to comment
Share on other sites

OK, I don't really condone scaling huge images as it wastes time downloading. I don't really condone hard coding stuff either. BUT


In popupimage.php change

echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']);



echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name'],'300');


where 300 is the width of the image in pixels. (obviously you can make this whatever you want)


It's best to set just the width as setting both width and height distorts your images!!

Light, in the absence of eyes, illuminates nothing.

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...