Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Main product image needs to be a different size. Rate Topic   - - - - -

 
  • mhackl
  • Member
  • Members
  • Join Date: 26-Mar 07
  • 79 posts

Posted 29 March 2007 - 08:25 PM #1

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:
Posted Image


How it is should be:
Posted Image

 
  • YouRockDaddy
  • Senior Member
  • Members
  • Join Date: 11-Apr 06
  • 319 posts

Posted 09 May 2007 - 08:03 AM #2

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

 
  • bholland
  • Senior Member
  • Members
  • Join Date: 16-May 06
  • 129 posts

Posted 09 May 2007 - 06:02 PM #3

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
  • Senior Member
  • Members
  • Join Date: 11-Apr 06
  • 319 posts

Posted 10 May 2007 - 08:13 PM #4

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
  • Senior Member
  • Members
  • Join Date: 15-Feb 07
  • 310 posts

Posted 10 May 2007 - 08:27 PM #5

I'm also interested in it!

Regards

 
  • bholland
  • Senior Member
  • Members
  • Join Date: 16-May 06
  • 129 posts

Posted 13 May 2007 - 03:57 AM #6

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
  • Senior Member
  • Members
  • Join Date: 11-Apr 06
  • 319 posts

Posted 13 May 2007 - 10:10 AM #7

It worked perfect for me :)

Thank you, Thank you, Thank you.

 
  • dominos_2004
  • Senior Member
  • Members
  • Join Date: 02-Jan 06
  • 257 posts

Posted 13 May 2007 - 04:19 PM #8

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


CS-Cart 3.0.3

 
  • bholland
  • Senior Member
  • Members
  • Join Date: 16-May 06
  • 129 posts

Posted 13 May 2007 - 05:04 PM #9

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
  • Senior Member
  • Members
  • Join Date: 15-Feb 07
  • 310 posts

Posted 13 May 2007 - 05:20 PM #10

Many Thanks!

It works fine! Wonderful!

 
  • mhackl
  • Member
  • Members
  • Join Date: 26-Mar 07
  • 79 posts

Posted 13 May 2007 - 06:18 PM #11

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".
I know just enough to be dangerous.

Linux Virtual Dedicated Hosting | CS-Cart 1.3.4.sp3 | PHP version 4.3.11 | Mysql version5.0.18

 
  • mhackl
  • Member
  • Members
  • Join Date: 26-Mar 07
  • 79 posts

Posted 13 May 2007 - 06:28 PM #12

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}

I know just enough to be dangerous.

Linux Virtual Dedicated Hosting | CS-Cart 1.3.4.sp3 | PHP version 4.3.11 | Mysql version5.0.18

 
  • bholland
  • Senior Member
  • Members
  • Join Date: 16-May 06
  • 129 posts

Posted 13 May 2007 - 09:08 PM #13

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
  • Senior Member
  • Members
  • Join Date: 15-Feb 07
  • 310 posts

Posted 14 May 2007 - 08:35 AM #14

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
  • Member
  • Members
  • Join Date: 23-May 07
  • 82 posts

Posted 10 December 2007 - 01:59 PM #15

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
  • Senior Member
  • Members
  • Join Date: 11-Apr 06
  • 319 posts

Posted 10 December 2007 - 05:20 PM #16

I'm interested as well. :)

 
  • bholland
  • Senior Member
  • Members
  • Join Date: 16-May 06
  • 129 posts

Posted 10 December 2007 - 08:12 PM #17

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

B
CS Cart 1.3.5 SP1

 
  • Premier
  • Member
  • Members
  • Join Date: 23-May 07
  • 82 posts

Posted 10 December 2007 - 08:31 PM #18

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


GREAT! Thanks so much! :P

 
  • Premier
  • Member
  • Members
  • Join Date: 23-May 07
  • 82 posts

Posted 12 December 2007 - 12:40 PM #19

Any luck so far bholland?

 
  • YouRockDaddy
  • Senior Member
  • Members
  • Join Date: 11-Apr 06
  • 319 posts

Posted 08 January 2008 - 10:14 PM #20

Anybody figure this out yet for 1.3.5 sp2?