Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Bigger image for product info


peeta

Recommended Posts

Currently all the images display at the thumbnail size set in the admin small image height and width. I would like to have the image displayed bigger when viewed in product_info (instead of clicking for larger image popup) but have no way of setting that. I looked through the contributions but did not find anything of sorts. If there is one please inform. If not then this is a suggestion.

Link to comment
Share on other sites

I just figured out how to do this. You have to edit the database and add another image size. If you use PhPMyAdmin - go to the configuration table. You're going to add two rows, with the following variables:

 

FIRST ROW:

 

configuration_id - 557

configuration_title - Product Image Width

configuration_key - PRODUCT_IMAGE_WIDTH

configuration_value - 200 (CHANGE THIS NUMBER DEPENDING ON THE WIDTH YOU WANT)

configuration_description - width of product image

configuration_group_id - 4

sort_order - 5

last_modified -

date_added -

use_function - NULL

set_function - NULL

 

SECOND ROW:

 

configuration_id - 558

configuration_title - Product Image Height

configuration_key - PRODUCT_IMAGE_HEIGHT

configuration_value - 200 (CHANGE THIS NUMBER DEPENDING ON THE WIDTH YOU WANT)

configuration_description - height of product image

configuration_group_id - 4

sort_order - 6

last_modified -

date_added -

use_function - NULL

set_function - NULL

 

Then, in the file product_info.php, find the reference to SMALL_IMAGE_WIDTH and SMALL_IMAGE_HEIGHT and change them to PRODUCT_IMAGE_WIDTH and PRODUCT_IMAGE_HEIGHT. It should look like this when you've edited it correctly:

 

 

<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']), PRODUCT_IMAGE_WIDTH,PRODUCT_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'], PRODUCT_IMAGE_WIDTH, PRODUCT_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

 

You should be able to change the size of PRODUCT_IMAGE_WIDTH & HEIGHT in the admin section now, too.

Link to comment
Share on other sites

An easier way is to simply set the size directly in the product_info.php page, that's what I have done.

 

You can also set the size to be a percentage of the small_image_height or width.

 

--Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

Lisk, Thank you. This works except the resulting image is distorted. Any way to increase the size of the thumbnail without distorting? I have the Big Image contrib installed, so the small product image is a thumbnail and the pop up is a large image. I have over 2k products, and would not enjoy uploading all new images.

Thanks

Tom

Link to comment
Share on other sites

Lisk.... your method works perfectly. Thanks for the assistance.

 

dragon5 you, using Lisk's method, you need to set the width to 0 and the height to whatever and it will display proportionately.

Link to comment
Share on other sites

Lisk, you should post this as a contribution. Now I don't have to make viewers click the small image to view it's bigger size and now I don't have to set the thumbnails so big that the page breaks. Now I'm trying to figure how to display by percentage since some images become pixelated because the display size is bigger than the actual size.

 

Thanks again.

http://www.judahsgold.com/index.php

Link to comment
Share on other sites

Peeta, Thank you but setting width to 0 still results in a very pixelated image.

 

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

 

With this: (and no database changes/additions)

 

<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name']);

 

?>

Gives a full size image on the product_info pg. The code is apparently calling your full size image as opposed to the thumbnail. My only problem now, is the resulting image is TOO BIG and I can't figure out how to reduce.

Tom

Link to comment
Share on other sites

If you use HTML to set the size of the image (which all of the above methods are doing) then your customer is still downloading the image at its full size. This can make your pages load slowly if your images are very large. I would suggest looking into a thumbnail contribution that can take these large images and create smaller ones in the proper ratio. I like this one:

http://www.oscommerce.com/community/contri...earch,thumbnail

 

I use this on my sites and several clients' sites, it works well. Pictures are kept in the proper ratios and always fit within the thumbnail sizes supplied in admin.

 

This thread is being moved to the General Support forum.

Chris Dunning

osCommerce, Contributions Moderator Team

 

Please do not send me PM! I do not read or answer these often. Use the email button instead!

 

I do NOT support contributions other than my own. Emails asking for support on other people's contributions will be ignored. Ask in the forum or contact the contribution author directly.

Link to comment
Share on other sites

Hi Guys,

 

I have added the extra rows in the config table in the dbase and as someone mentioned before the image still distorts.

 

Did anyone actually find a fix for this?

 

I am using the Auto thumbnailer with GD library if that makes any difference lol

 

I would really like to get away from this click to enlarge business.

 

Thanks

 

Mark

Lifes a bitch, then you marry one, then you die!

Link to comment
Share on other sites

An easier way is to simply set the size directly in the product_info.php page, that's what I have done.

 

You can also set the size to be a percentage of the small_image_height or width.

 

--Peter

 

 

Where abouts in the code are the size settings please?

Link to comment
Share on other sites

An easier way is to simply set the size directly in the product_info.php page, that's what I have done.

 

You can also set the size to be a percentage of the small_image_height or width.

 

--Peter

 

 

Would anyone with a bit of code knowledge be able to ansewr this for me please?

 

Any help is greatly appreciated. Thank you.

Link to comment
Share on other sites

I just figured out how to do this. You have to edit the database and add another image size. If you use PhPMyAdmin - go to the configuration table. You're going to add two rows, with the following variables:

 

FIRST ROW:

 

configuration_id - 557

configuration_title - Product Image Width

configuration_key - PRODUCT_IMAGE_WIDTH

configuration_value - 200 (CHANGE THIS NUMBER DEPENDING ON THE WIDTH YOU WANT)

configuration_description - width of product image

configuration_group_id - 4

sort_order - 5

last_modified -

date_added -

use_function - NULL

set_function - NULL

 

SECOND ROW:

 

configuration_id - 558

configuration_title - Product Image Height

configuration_key - PRODUCT_IMAGE_HEIGHT

configuration_value - 200 (CHANGE THIS NUMBER DEPENDING ON THE WIDTH YOU WANT)

configuration_description - height of product image

configuration_group_id - 4

sort_order - 6

last_modified -

date_added -

use_function - NULL

set_function - NULL

 

Then, in the file product_info.php, find the reference to SMALL_IMAGE_WIDTH and SMALL_IMAGE_HEIGHT and change them to PRODUCT_IMAGE_WIDTH and PRODUCT_IMAGE_HEIGHT. It should look like this when you've edited it correctly:

<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']), PRODUCT_IMAGE_WIDTH,PRODUCT_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'], PRODUCT_IMAGE_WIDTH, PRODUCT_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

 

You should be able to change the size of PRODUCT_IMAGE_WIDTH & HEIGHT in the admin section now, too.

 

 

I would like to do this but I don't know how to use myphpadmin. Any suggestions?

Link to comment
Share on other sites

I tried to use the following contri "Automatic Thumbnail update v 1.7" and when I save the page and refresh my browser I get the message" Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ')' in /usr/local/4admin/apache/vhosts/bnm-group.com/httpdocs/oscommerce/catalog/includes/functions/html_output.php on line 285"

 

Doesn't seem like anyone else has gotten this so I am confused. I did it twice. Can you help me out!

 

 

If you use HTML to set the size of the image (which all of the above methods are doing) then your customer is still downloading the image at its full size. This can make your pages load slowly if your images are very large. I would suggest looking into a thumbnail contribution that can take these large images and create smaller ones in the proper ratio. I like this one:

http://www.oscommerce.com/community/contri...earch,thumbnail

 

I use this on my sites and several clients' sites, it works well. Pictures are kept in the proper ratios and always fit within the thumbnail sizes supplied in admin.

 

This thread is being moved to the General Support forum.

Link to comment
Share on other sites

Can you post lines 280-290 from your html_output.php?

Chris Dunning

osCommerce, Contributions Moderator Team

 

Please do not send me PM! I do not read or answer these often. Use the email button instead!

 

I do NOT support contributions other than my own. Emails asking for support on other people's contributions will be ignored. Ask in the forum or contact the contribution author directly.

Link to comment
Share on other sites

Can you post lines 280-290 from your html_output.php?

 

Here it is! I followed the steps from the contribution exactly! I did not mess with this part of the code. When I restored my file, things went back to normal.

 

$field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';

if ($default == $values[$i]['id']) {

$field .= ' SELECTED';

}

 

$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '&qout;', '\'' => ''', '<' => '&ln;', '>' => '&gn;')) . '</option>';

}

$field .= '</select>';

 

if ($required == true) $field .= TEXT_FIELD_REQUIRED;

 

return $field;

}

 

////

// Creates a pull-down list of countries

Link to comment
Share on other sites

I thought I had subscribed to this thread, but apparently not - sorry to be so long getting back to you.

 

The problem is this line:

$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '&qout;', '\'' => ''', '<' => '&ln;', '>' => '&gn;')) . '</option>';

 

Specifically, the three apostrophes in a row. I'm not sure what this code is trying to accomplish but I think you want to change that to:

 

$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '&qout;', '\'' => ''', '<' => '&ln;', '>' => '&gn;')) . '</option>';

 

edit - looks like this is probably the cause. When I put the code in the way I want you to type it, it's being translated in my browser.

 

Replace the section that says ''' (that's three apostrophes in a row) with:

' & # 0 3 9 ; '

 

Take out all of the spaces and put that into your code.

Chris Dunning

osCommerce, Contributions Moderator Team

 

Please do not send me PM! I do not read or answer these often. Use the email button instead!

 

I do NOT support contributions other than my own. Emails asking for support on other people's contributions will be ignored. Ask in the forum or contact the contribution author directly.

Link to comment
Share on other sites

I thought I had subscribed to this thread, but apparently not - sorry to be so long getting back to you.

 

The problem is this line:

$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '&qout;', '\'' => ''', '<' => '&ln;', '>' => '&gn;')) . '</option>';

 

Specifically, the three apostrophes in a row. I'm not sure what this code is trying to accomplish but I think you want to change that to:

 

$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '&qout;', '\'' => ''', '<' => '&ln;', '>' => '&gn;')) . '</option>';

 

edit - looks like this is probably the cause. When I put the code in the way I want you to type it, it's being translated in my browser.

 

Replace the section that says ''' (that's three apostrophes in a row) with:

' & # 0 3 9 ; '

 

Take out all of the spaces and put that into your code.

That bit of magic did the trick! I can't tell you how much I appreciate that!!! Well, yes I can, I appreciate it man!!!! :thumbsup:

Link to comment
Share on other sites

I just figured out how to do this. You have to edit the database and add another image size. If you use PhPMyAdmin - go to the configuration table. You're going to add two rows, with the following variables:

 

FIRST ROW:

 

configuration_id - 557

configuration_title - Product Image Width

configuration_key - PRODUCT_IMAGE_WIDTH

configuration_value - 200 (CHANGE THIS NUMBER DEPENDING ON THE WIDTH YOU WANT)

configuration_description - width of product image

configuration_group_id - 4

sort_order - 5

last_modified -

date_added -

use_function - NULL

set_function - NULL

 

SECOND ROW:

 

configuration_id - 558

configuration_title - Product Image Height

configuration_key - PRODUCT_IMAGE_HEIGHT

configuration_value - 200 (CHANGE THIS NUMBER DEPENDING ON THE WIDTH YOU WANT)

configuration_description - height of product image

configuration_group_id - 4

sort_order - 6

last_modified -

date_added -

use_function - NULL

set_function - NULL

 

 

This is workingt fine as far as the images go, but when I attempt to change sizes via admin, I get the following error: (testing locally before changing working site)

 

Parse error: parse error in c:\easyphp1-8\www\catalog\admin\configuration.php(125) : eval()'d code on line 1

 

I can still go into phpMyAdmin and make the changes on each line, but would prefer to do it in admin. Any suggestions would be appreciated.

Tom

Link to comment
Share on other sites

peterpil19 has a good point

 

Take a look at the following code, which should appear on line 109 of the product_info.php file.

Edit the red-higlighted variable to a number value and this will work fine:

Sample of below code in action

 

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']), 200, 200, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

 

// --Old Script-- 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>'; ?>');

 

Now, I wonder if one of you can help me? I take photos of record covers to post into osCommerce. These files are huge and simply unrealistic for display. How can I reduce the size of the photo on upload?

 

For example: I take a photo with camera, file size is 1GB; I upload file, file is reduced to 600x600 pixels and then saved on the server.

Does this sound like a reasonable operation flow? Has anyone already faced this problem? Would someone like to share their experience and knowledge?

 

Cheers,

;VibeX

Rob

----------

working on a way to make Price Groups, any ideas?

Link to comment
Share on other sites

peterpil19 has a good point

 

 

QUOTE

 

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']), 200, 200, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

 

// --Old Script-- 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>'; ?>');

 

 

Vibex, yes, that would work for most, but I have other issues involved that preclude me from using this method.

 

Tom

Link to comment
Share on other sites

Thanks for pointing out the line in the code VibeX. As all my images are the same size this works fine for me. Unforunately due to detail I have to use a large file size and eat some bandwidth. Enlarging a small image just isn't clear enough for me.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...