[mhackl]

We need to be able to set a different value for the main image on a products page. As it is now either the main image has to be too small or the thumbs for additional images are too large. Separate the dimensional settings for the main product image and the thumbnails.

How it is now:



How it is should be:

[YouRockDaddy]

Did you ever figure this out? I need the same thing.

[bholland]

I'm rewriting the template right now for my product pages and am doing something similar. I'll post the code for this when I have it done.

[YouRockDaddy]

I'm rewriting the template right now for my product pages and am doing something similar. I'll post the code for this when I have it done.

Thanks, I look forward to it, as do many others here.

[Palmtop]

I'm also interested in it!

Regards

[bholland]

Hi All,

Here is a way to get your main product image in the larger view. I haven't edited the display at all, but figured people could customize to how they wanted it.

common_templates > image.tpl

(replace your code with what's below)

{* $Id: image.tpl 2518 2006-11-09 16:29:31Z zeke $ *}


{*Set default image to icon*}
{assign var="location" value="image_id"}
{assign var="checktype" value="icon"}

{*Check to see if size has been specified*}
	{if $size == "detailed"}
		{assign var="location" value="detailed_id"}
		{assign var="checktype" value="detailed"}
	{/if}


{strip}

{if $settings.General.images_location == "database"}

	{assign var="image_src" value="$image_index?object_type=`$object_type`&image_id=`$images.$location`"}

{else} {* image is stored in file system *}

	{assign var="image_src" value=$images.$checktype.image_path|default:$no_image_path}

{/if}



{if $show_detailed_link && $images.detailed_id}

	{assign var="detailed_href" value="javascript:fn_open_popup_image('$image_index?object_type=detailed&image_id=`$images.detailed_id`&window=popup', `$images.detailed.image_x`, `$images.detailed.image_y` + 30);"}

{/if}



{if !$image_width}

	{if $images.$checktype.image_x}

		{assign var="image_width" value=$images.$checktype.image_x}

	{/if}

	{if $images.$checktype.image_y}

		{assign var="image_height" value=$images.$checktype.image_y}

	{/if}

{else}

	{if $images.$checktype.image_x && $images.$checktype.image_y}

		{math equation="new_x * y / x" new_x=$image_width x=$images.$checktype.image_x y=$images.$checktype.image_y format="%d" assign="image_height"}

	{/if}

{/if}

{if $images.$checktype.image_type != 'application/x-shockwave-flash'}

	{if $detailed_href}

		<a {if $obj_id && !$no_ids}id="detailed_href1_{$obj_id}"{/if} href="{$detailed_href}" {$window_target}>

	{/if}



	{if $obj_id && !$no_ids}

		<img id="img_width_{$obj_id}" src="{$images_dir}/spacer.gif" {if $image_width}width="{$image_width}"{/if} height="1" alt="" border="0" /><br />

	{/if}

	<img {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} src="{$image_src}" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if} alt="{$images.$checktype.alt}" border="0" {if $close_on_click == true}onclick="window.close();"{/if} />

	{if $detailed_href}

		</a>

	{/if}

{else}

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if}>

<param name="movie" value="{$image_src}" />

<param name="quality" value="high" />

<param name="wmode" value="transparent" />

<param name="allowScriptAccess" value="sameDomain" />

{if $flash_vars}

<param name="FlashVars" value="{$flash_vars}">

{/if}

<embed src="{$image_src}" quality="high" wmode="transparent" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if} allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" {if $flash_vars}FlashVars="{$flash_vars}"{/if} />

</object>

{/if}



{if $detailed_href}

<table cellpadding="0" cellspacing="2" border="0" align="center">

<tr>

	<td>

		<a {if $obj_id && !$no_ids}id="detailed_href2_{$obj_id}"{/if} href="{$detailed_href}" {$window_target}><img src="{$images_dir}/view_larger.gif" width="12" height="12" alt="{$lang.view_larger_image}" border="0" /></a></td>

	<td nowrap="nowrap" align="center">

		<a {if $obj_id && !$no_ids}id="detailed_href3_{$obj_id}"{/if} href="{$detailed_href}" {$window_target}>{$lang.view_larger_image}</a></td>

</tr>

</table>{/if}

{if $obj_id && !$no_ids}

<script type="text/javascript" language="javascript 1.2" defer="defer">

	default_image[{$obj_id}] = new Array();

	if (document.getElementById('det_img_{$obj_id}')) {ldelim}

		default_image[{$obj_id}]['src'] = document.getElementById('det_img_{$obj_id}').src;

	{rdelim}

	if (document.getElementById('detailed_href1_{$obj_id}')) {ldelim}

		default_href[{$obj_id}] = document.getElementById('detailed_href1_{$obj_id}').href;

	{rdelim}

	default_image[{$obj_id}]['width'] = '{$image_width}';

	default_image[{$obj_id}]['height'] = '{$image_height}';

	default_image[{$obj_id}]['alt'] = '{$images.$checktype.alt|escape:javascript}';

</script>

{/if}

{/strip}

product_pages > product_details.tpl

(find the line that includes image.tpl and replace it with this)

{include file="common_templates/image.tpl" obj_id=$product.product_id images=$product.main_pair object_type="detailed" size="detailed"}</td>

That should do it! I haven't tested this if you are using the Db for your images, but it should work in that case as well. If not, let me know and I'll take a look.

B

[YouRockDaddy]

It worked perfect for me

Thank you, Thank you, Thank you.

[dominos_2004]

Ho can make image large or smaller?

Hi All,

Here is a way to get your main product image in the larger view. I haven't edited the display at all, but figured people could customize to how they wanted it.

common_templates > image.tpl

(replace your code with what's below)

{* $Id: image.tpl 2518 2006-11-09 16:29:31Z zeke $ *}
 
 
{*Set default image to icon*}
{assign var="location" value="image_id"}
{assign var="checktype" value="icon"}
 
{*Check to see if size has been specified*}
    {if $size == "detailed"}
        {assign var="location" value="detailed_id"}
        {assign var="checktype" value="detailed"}
    {/if}
 
 
{strip}
 
{if $settings.General.images_location == "database"}
 
    {assign var="image_src" value="$image_index?object_type=`$object_type`&image_id=`$images.$location`"}
 
{else} {* image is stored in file system *}
 
    {assign var="image_src" value=$images.$checktype.image_path|default:$no_image_path}
 
{/if}
 
 
 
{if $show_detailed_link && $images.detailed_id}
 
    {assign var="detailed_href" value="javascript:fn_open_popup_image('$image_index?object_type=detailed&image_id=`$images.detailed_id`&window=popup', `$images.detailed.image_x`, `$images.detailed.image_y` + 30);"}
 
{/if}
 
 
 
{if !$image_width}
 
    {if $images.$checktype.image_x}
 
        {assign var="image_width" value=$images.$checktype.image_x}
 
    {/if}
 
    {if $images.$checktype.image_y}
 
        {assign var="image_height" value=$images.$checktype.image_y}
 
    {/if}
 
{else}
 
    {if $images.$checktype.image_x && $images.$checktype.image_y}
 
        {math equation="new_x * y / x" new_x=$image_width x=$images.$checktype.image_x y=$images.$checktype.image_y format="%d" assign="image_height"}
 
    {/if}
 
{/if}
 
{if $images.$checktype.image_type != 'application/x-shockwave-flash'}
 
    {if $detailed_href}
 
        <a {if $obj_id && !$no_ids}id="detailed_href1_{$obj_id}"{/if} href="{$detailed_href}" {$window_target}>
 
    {/if}
 
 
 
    {if $obj_id && !$no_ids}
 
        <img id="img_width_{$obj_id}" src="{$images_dir}/spacer.gif" {if $image_width}width="{$image_width}"{/if} height="1" alt="" border="0" /><br />
 
    {/if}
 
    <img {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} src="{$image_src}" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if} alt="{$images.$checktype.alt}" border="0" {if $close_on_click == true}onclick="window.close();"{/if} />
 
    {if $detailed_href}
 
        </a>
 
    {/if}
 
{else}
 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if}>
 
<param name="movie" value="{$image_src}" />
 
<param name="quality" value="high" />
 
<param name="wmode" value="transparent" />
 
<param name="allowScriptAccess" value="sameDomain" />
 
{if $flash_vars}
 
<param name="FlashVars" value="{$flash_vars}">
 
{/if}
 
<embed src="{$image_src}" quality="high" wmode="transparent" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if} allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" {if $flash_vars}FlashVars="{$flash_vars}"{/if} />
 
</object>
 
{/if}
 
 
 
{if $detailed_href}
 
<table cellpadding="0" cellspacing="2" border="0" align="center">
 
<tr>
 
    <td>
 
        <a {if $obj_id && !$no_ids}id="detailed_href2_{$obj_id}"{/if} href="{$detailed_href}" {$window_target}><img src="{$images_dir}/view_larger.gif" width="12" height="12" alt="{$lang.view_larger_image}" border="0" /></a></td>
 
    <td nowrap="nowrap" align="center">
 
        <a {if $obj_id && !$no_ids}id="detailed_href3_{$obj_id}"{/if} href="{$detailed_href}" {$window_target}>{$lang.view_larger_image}</a></td>
 
</tr>
 
</table>{/if}
 
{if $obj_id && !$no_ids}
 
<script type="text/javascript" language="javascript 1.2" defer="defer">
 
    default_image[{$obj_id}] = new Array();
 
    if (document.getElementById('det_img_{$obj_id}')) {ldelim}
 
        default_image[{$obj_id}]['src'] = document.getElementById('det_img_{$obj_id}').src;
 
    {rdelim}
 
    if (document.getElementById('detailed_href1_{$obj_id}')) {ldelim}
 
        default_href[{$obj_id}] = document.getElementById('detailed_href1_{$obj_id}').href;
 
    {rdelim}
 
    default_image[{$obj_id}]['width'] = '{$image_width}';
 
    default_image[{$obj_id}]['height'] = '{$image_height}';
 
    default_image[{$obj_id}]['alt'] = '{$images.$checktype.alt|escape:javascript}';
 
</script>
 
{/if}
 
{/strip}
 

product_pages > product_details.tpl

(find the line that includes image.tpl and replace it with this)

 
{include file="common_templates/image.tpl" obj_id=$product.product_id images=$product.main_pair object_type="detailed" size="detailed"}</td>
 

That should do it! I haven't tested this if you are using the Db for your images, but it should work in that case as well. If not, let me know and I'll take a look.

B

[bholland]

The larger image isn't resized at all and is whatever the original size you uploaded. The thumbnail image is resized, but the "detailed" view of the product has to do with the actual image file.

B

[Palmtop]

Many Thanks!

It works fine! Wonderful!

[mhackl]

you can specify the size by adding the red value below to the image.tpl file.

{*Check to see if size has been specified*}
{if $size == "detailed"}
{assign var="location" value="detailed_id"}
{assign var="checktype" value="detailed"}
{assign var="image_width" value=400}
{/if}

Iv used chosen to manage the image size here by width, but you can also manage the image size by height. Just replace the word "width" with "height".

[mhackl]

This is what is what I did so that I could manage the size displayed and also still have a link so that image could be viewed at full size.
Here is an example if it in action.
product_details.tpl

{include file="common_templates/image.tpl" [COLOR="Red"]show_detailed_link="Y"[/COLOR] obj_id=$product.product_id images=$product.main_pair object_type="detailed" size="detailed"}

image.tpl

{*Check to see if size has been specified*}
{if $size == "detailed"}
{assign var="location" value="detailed_id"}
{assign var="checktype" value="detailed"}
[COLOR="Red"]{assign var="image_width" value=400}[/COLOR]
{/if}

[bholland]

Yes, that will work, but the only issue is scaling the image via HTML. You're having someone load the full size image which isn't ideal, but you'd have to create a new image type to get around this. I think it's a good solution though if you need three different size images and don't want to tear into the PHP

[Palmtop]

What about using this useful tool called "PHP Thumb" ?

It generates automatically "thumbnails" using whatever size you need... So we can put always two images (one BIG and one SMALL ... and create a NORMAL one for product's detail creating from big image using this tool).

I don't know if it could be easily added to CS-cart code, but I was using it with another cart and it works fine! (it also has a cache for most used images, so it's very well developed).

This is tool's website:

http://phpthumb.sourceforge.net/

Regards

[Premier]

I've tried this on 1.3.5 sp1 and it does not work, can you update it for the new cs cart version?

[YouRockDaddy]

I'm interested as well.

[bholland]

Sure, I'll take a look. I should have something posted up tonight.

B

[Premier]

Sure, I'll take a look. I should have something posted up tonight

GREAT! Thanks so much!

[Premier]

Any luck so far bholland?

[YouRockDaddy]

Anybody figure this out yet for 1.3.5 sp2?