Problem in dispalying images in Product List page

Question

Hi,

I want to display the images in the Product List page. I modified the code in ProductList.aspx.

Here is my code snippet

                    <asp:HyperLink ID="ImageURL" runat="server" EnableViewState="false"
                                        NavigateUrl='<%# this.GetItemUrlString(Container.DataItem) %>'>
                     <asp:Image runat="server" ImageUrl='<%# ((Microsoft.CommerceServer.Catalog.CatalogItemsDataSet.CatalogItem)Container.DataItem)["Image_filename"].ToString()%>'
                            AlternateText="<%# Eval(DisplayNameColumnName) %>" width="130" height="113" />
                     </asp:HyperLink>

This Code complies correctly.

But the Problem is,

I have given the imagefilepath value as "./Images/<filename>". This is how they have given for other images in the starter site. Thats why the images are displayed in the product detail page(which lies in the root folder).

This gives me the problem.

Because the ProductList page lies in Control folder. So the image path is coming as "http://localhost/StarterSite/Controls/images/<filename>". So the image is not getting dispalyed.

Kindly help me out in this issue.

Answer 1

try setting them as "~/Images/<filename>" in imagefilepath

the ~ normally indicates the root directory in asp.net apps.

alternatively, there is a CommerceServer function for this as well

CommerceComponents.Common.ComponentCommon.ConvertApplicationUrl("~/Images/hoonzcrazyimage.gif")

should provide the information as well

hope this helps

Answer 2

Hi Hoonius

If i do that, the images are displayed in the product list page but the image is not getting displayed in the Product details page.
 
There, the image path is rendered like http://localhost/StarterSite/~/images/sleepingbags03.gif

Thank you,
Regards,
Hari

Answer 3

does the same thing happen with

CommerceComponents.Common.ComponentCommon.ConvertApplicationUrl(imagefilepath)?

Answer 4

Thanks Hoonius,

It worked.

I gave the image path as ~/images/<filename> in the Catalog manager and modified the code in the ControlLibraray-> ProductDetails.cs as CommerceComponents.Common.ComponentCommon.ConvertApplicationUrl(imageSource) for image source.

Answer 5

 

Hi,

I want to display the images in the Product List page in starter site. I modified the code in ProductList.ascx.

Here is my code snippet

                    <asp:HyperLink ID="ImageURL" runat="server" EnableViewState="false"
                                        NavigateUrl='<%# this.GetItemUrlString(Container.DataItem) %>'>
                     <asp:Image runat="server" ImageUrl='<%# ((Microsoft.CommerceServer.Catalog.CatalogItemsDataSet.CatalogItem)Container.DataItem)["Image_filename"].ToString()%>'
                            AlternateText="<%# Eval(DisplayNameColumnName) %>" width="130" height="113" />
                     </asp:HyperLink>

 

 

 it throws this error   :    Column 'Image_filename' does not belong to table CatalogItems.

 but 'Image_filename'  exist in table.

 

Kindly help me out in this issue.

Answer 6

 

Hi,

 

The StarterSite by default does not specify this property (Image_FileName) in it's propertiesToReturn (when calling the CS API). Easy way to fix this is simply to the column via the web.config.:

...

<commerceSite

...

propertiesToReturn="CategoryName,ProductID,CatalogName,i_ClassType,DisplayName,cy_list_price,Image_FileName">

...

 

In the site code (SiteConfigurationClass), you could also change the default. This is what it is currently. 

Code Snippet

/// <summary>

/// Gets or sets the additional properties to return during product browsing and search.

/// </summary>

[

ConfigurationProperty(PropertiesToReturnAttributeName,

DefaultValue =

"CategoryName,ProductID,CatalogName,i_ClassType,DisplayName,cy_list_price")]

public string PropertiesToReturn

{

get

{

return (string)this[PropertiesToReturnAttributeName];

}

set

{

this[PropertiesToReturnAttributeName] = value;

}

}

 

 

 

Hope this helps

 

J-P

Answer 7

Thanks JP,

It worked.

Answer 8

Now in starter site dynamic  images are displaying in a vertical line in product list page. here  grid is used  for displaying the images.....
 
 
like:
 
image1
image2
image3
image4
image5
image6
 
code for above images:

<asp:GridView ID="SearchResults" runat="Server" AutoGenerateColumns="false" EnableViewState="false"
    AllowPaging="true">

    <Columns>

 <asp:TemplateField>
    <ItemTemplate>
           
             <asp:HyperLink ID="ImageURL" runat="server" EnableViewState="false"
                                        NavigateUrl='<%# this.GetItemUrlString(Container.DataItem) %>'>
                     <asp:Image ID="Image1" runat="server" ImageUrl='<%# ((Microsoft.CommerceServer.Catalog.CatalogItemsDataSet.CatalogItem)Container.DataItem)
                    ["Image_filename"].ToString()%>'
                            AlternateText="<%# Eval(DisplayNameColumnName) %>" width="130" height="113" />
                     </asp:HyperLink>
   
    </ItemTemplate>
   
   
    </asp:TemplateField>
    </Columns>
</asp:GridView>

  
 
but i want images like:
 
image1       image2         image3
 
image4        image5         image6
 
I want to use table itself for displaying images like above.
 
 
http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=1984043&SiteID=1
 
 
Kindly help me........

Answer 9

I did  same thing with datlist as what is in starter site  datagrid in productlist.ascx page. means I replace the datagrid by datalist.

But that datalist is not appearing when we run the products.aspx page.

or i have to write some extra code for datlist. i think that as datgrid is bind same way with datalist.

i put same id  of grid in datlist. and comment the page index in productlist.aspx.cs. but still that datlist is not coming.

pls help me....

<aspataList ID="SearchResults" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
    <ItemTemplate>
        <table cellpadding="3" cellspacing="0" border="0">
            <tr>
                <td valign="top">
                    <asp:HyperLink ID="ImageURL" runat="server" EnableViewState="false" NavigateUrl='<%# this.GetItemUrlString(Container.DataItem) %>'>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# ((Microsoft.CommerceServer.Catalog.CatalogItemsDataSet.CatalogItem)Container.DataItem)
                    ["Image_filename"].ToString()%>' AlternateText="<%# Eval(DisplayNameColumnName) %>" Width="130"
                            Height="113" />
                    </asp:HyperLink>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</aspataList>