Product Image with Thumbnails

[wave_werks]

Someone posted code here in the last few months that does that nicely using the additional image resized dynamically as a thumbnail . I just can't find the forum post. Here is an example of it:
http://www.uptownenterprises.com/Zippo- ... P1227.aspx

Hi Judy...
Any idea where the code for this can be found. I've been searching the forum all day and have yet to find the right keywords to track it down. It appears to be very straight forward and is exactly what we are looking for. Please, please, please search your memory for where you saw it so we may put it to use.

Thanks!

[jmestep]

I found it this time- (not forum search, I had it stored in OneNote)
viewtopic.php?f=42&t=7739

[mazhar]

Following could be helpful as well
viewtopic.php?f=47&t=9026

[wave_werks]

I added a CustomProductSwatches conlib file to my Product Page scriptlet...
I have it check, first, if there is more than one image for the product...

Code: Select all

#if($Product.Images.Count > 0)
<td style="border-top:solid 1px gray; border-right:solid 1px gray; padding:5px;">
[[ConLib:CustomProductSwatches]]
#else
<td style="border-top:none; border-right:solid 1px gray; padding:0px;">
#end

Then, the actual code files are extremely simple...
CustomProductSwatches.asxc:

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomProductSwatches.ascx.cs" Inherits="ConLib_CustomProductSwatches" %>
<script type="text/javascript">
    function changeImage(urlpath)
    {
        t = urlpath.length;
        urlpath = urlpath.substr(2,t-2);
        document.getElementById("ProductImage").src = urlpath;
    }
</script>
<ajax:UpdatePanel ID="DescriptionAjax" runat="server">
    <ContentTemplate>
        <div>
            <asp:Repeater runat="server" ID="ImageList">
                <ItemTemplate>
                    <span onmouseover="changeImage('<%# Eval("ImagePath") %>');"> 
                    <asp:Image runat="server" ID="DisplayImage" ImageUrl='<%# Eval("ImagePath") %>' Width="50" Height="50" BorderWidth="0" />
                    </span>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </ContentTemplate>
</ajax:UpdatePanel>

...and the code file... CustomProductSwatches.ascx.cs

Code: Select all

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using CommerceBuilder.Products;
using CommerceBuilder.Utility;

public partial class ConLib_CustomProductSwatches : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ImagePath", typeof(String));
        int _ProductId = AlwaysConvert.ToInt(Request.QueryString["ProductId"]);
        Product _Product = ProductDataSource.Load(_ProductId);
        if (_Product != null)
        {
            ProductImageCollection images = _Product.Images;
            dt.Rows.Add(new Object[] { AlwaysConvert.ToString(_Product.ImageUrl) });
            foreach (ProductImage theimage in images)
            {
                dt.Rows.Add(new Object[] { AlwaysConvert.ToString(theimage.ImageUrl) });
            }
            ImageList.DataSource = dt;
            ImageList.DataBind();
        }
    }
}

In order for this to work, the ID of your main product image has to be ProductImage.

Thanks Judy!!!
I think I may have seen this but after looking through so many posts they somehow all start to look exactly the same!

Ok... So, I can take parts 2 and 3 and make the appropriate .ascx and ascx.cs files. Where exactly am I putting part 1?

Code: Select all

#if($Product.Images.Count > 0)
<td style="border-top:solid 1px gray; border-right:solid 1px gray; padding:5px;">
[[ConLib:CustomProductSwatches]]
#else
<td style="border-top:none; border-right:solid 1px gray; padding:0px;">
#end

Is it going directly into the Product Page scriptlet? Or, does it go somewhere else?

Also, there is a note about ID of the main product image being "ProductImage".
How is this done? Do the product images need to be stored in separate folders and uploaded into their own directories?
Also, can the product images be in .PNG format instead of .JPG format?

[mazhar]

Code: Select all

#if($Product.Images.Count > 0)
<td style="border-top:solid 1px gray; border-right:solid 1px gray; padding:5px;">
[[ConLib:CustomProductSwatches]]
#else
<td style="border-top:none; border-right:solid 1px gray; padding:0px;">
#end

You will put this in scriptlet (Show Product 1)

product images

Product Images are stored under Website/Assets/Product Images folder

Also, can the product images be in .PNG format instead of .JPG format?

You can use PNG images for additional images.

[jmestep]

How is this done? Do the product images need to be stored in separate folders and uploaded into their own directories?

The code is taking any images you have entered as additional images and then creating a thumbnail display of them by the sizing Width="50" Height="50" on the page. That's why the thumbnails might not look that great.

[wave_werks]

Code: Select all

#if($Product.Images.Count > 0)
<td style="border-top:solid 1px gray; border-right:solid 1px gray; padding:5px;">
[[ConLib:CustomProductSwatches]]
#else
<td style="border-top:none; border-right:solid 1px gray; padding:0px;">
#end

You will put this in scriptlet (Show Product 1)

I placed the above code into Show Product 1 and now I receive the following error where the picture would normally display:

Code: Select all

[[ConLib:CustomProductSwatches]] Literal content ('\') is not allowed within a 'System.Web.UI.UpdatePanel'.

Where did I go wrong?

Once I get this part fixed I'd like to force the product images to be displayed in a fixed size container that is 300px wide and 300px tall so that the images and the page don't change size because they are not contained. How can this be achieved?

[jmestep]

On the container size, you can set a width and height in the style sheet for the product image section, but if your images are not under that size to start with and/or a uniform size, it will still bounce around.

[wave_werks]

On the container size, you can set a width and height in the style sheet for the product image section, but if your images are not under that size to start with and/or a uniform size, it will still bounce around.

I'm in the process of redoing all of the images to a uniform size of 300x300px. It's going to take a while but it will make a huge difference when it's all said and done.

Any idea what is causing the error to display? I've reverted the page back to the original code until I can figure it out. I can't stand seeing errors pop up at me when working on the product pages!!!

[jmestep]

Yes, it looks like your .ascx file got corrupted- did you open it in a different editor?
Here is what is shows--

{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf430
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\margl1440\margr1440\vieww9000\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

\f0\fs24 \cf0 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomProductSwatches.ascx.cs" Inherits="ConLib_CustomProductSwatches" %>\
<script type="text/javascript">\
function changeImage(urlpath)\
\{\
t = urlpath.length;\
urlpath = urlpath.substr(2,t-2);\
document.getElementById("ProductImage").src = urlpath;\
\}\
</script>\
<ajax:UpdatePanel ID="DescriptionAjax" runat="server">\
<ContentTemplate>\
<div>\
<asp:Repeater runat="server" ID="ImageList">\
<ItemTemplate>\
<span onmouseover="changeImage('<%# Eval("ImagePath") %>');">\
<asp:Image runat="server" ID="DisplayImage" ImageUrl='<%# Eval("ImagePath") %>' Width="50" Height="50" BorderWidth="0" />\
</span>\
</ItemTemplate>\
</asp:Repeater>\
</div>\
</ContentTemplate>\
</ajax:UpdatePanel>}

And your .cs file:

Code: Select all

{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf430
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\margl1440\margr1440\vieww9000\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

\f0\fs24 \cf0 using System;\
using System.Collections;\
using System.Configuration;\
using System.Data;\
using System.Web;\
using System.Web.Security;\
using System.Web.UI;\
using System.Web.UI.HtmlControls;\
using System.Web.UI.WebControls;\
using System.Web.UI.WebControls.WebParts;\
using CommerceBuilder.Products;\
using CommerceBuilder.Utility;\
\
public partial class ConLib_CustomProductSwatches : System.Web.UI.UserControl\
\{\
    protected void Page_Load(object sender, EventArgs e)\
    \{\
        DataTable dt = new DataTable();\
        dt.Columns.Add("ImagePath", typeof(String));\
        int _ProductId = AlwaysConvert.ToInt(Request.QueryString["ProductId"]);\
        Product _Product = ProductDataSource.Load(_ProductId);\
        if (_Product != null)\
        \{\
            ProductImageCollection images = _Product.Images;\
            dt.Rows.Add(new Object[] \{ AlwaysConvert.ToString(_Product.ImageUrl) \});\
            foreach (ProductImage theimage in images)\
            \{\
                dt.Rows.Add(new Object[] \{ AlwaysConvert.ToString(theimage.ImageUrl) \});\
            \}\
            ImageList.DataSource = dt;\
            ImageList.DataBind();\
        \}\
    \}\
\}}

[wave_werks]

I'm not sure what happened. All I did was copy the code from the forum and paste it into a blank Dreamweaver document. I just did exactly the same thing again, uploaded the new files and everything is appearing as it should be. I removed the first <td style line from the code that goes into the Show Product 1 scriptlet and it placed the thumbnails under the main image instead of on the right side All that's left to do now is spend several hours dropping all of my images into a 300x300px template in Photoshop so that all of the additional images are the same size.

[Robbie@FireFold]

As you found you have to be pretty careful with the images themselves.

You can see our live demo here: http://www.firefold.com/HDMI-Male-to-DV ... 2C487.aspx

[wave_werks]

Hi Robbie,

How are you managing to have the main image display at 300x300 (which is actually sized at 300x300) and to have the "larger images" display at 300x300 when the thumbnail is rolled over even though their actual size is 500x500? Do you have this added into the CSS somewhere? If so what is the code you used to make it work and where did you place it?

Also, did you simply leave the "more images" line of code in place from the original code to have both the thumbnails and the "larger images" link display?

Thanks!

[jmestep]

He has a line in his stylesheet:
/* Controls size of main product image */
#ProductImage{height:300px;width:300px;}
Then in the control for his product image display he has <img id="ProductImage" etc