How to use thumbnail on category.

[lasujah]

Hi everyone,

In edit/add category, theres a "Thumbnail" field that allows you to select an image on Product Asset Manager. My problem is, I dont know how to use it on conlib (ex. SimpleCategoryList). I tried <%#Eval("Thumbnail")%> but returns 'CommerceBuilder.Catalog.Category' does not contain a property with the name 'Thumbnail' error. How do I use the "Thumbnail" field on Category so that I could have an image beside a category name on category listings?

Thanks.

[jmestep]

Try ThumbnailURL.
This is a snippet from CategoryGridPage2.ascx:

Code: Select all

//OUTPUT LINKED THUMNAIL
                if (!string.IsNullOrEmpty(catalogNode.ThumbnailUrl))
                {
                    string thumbnail = string.Format("<a href=\"{0}\"><img src=\"{1}\" alt=\"{2}\" border=\"0\" class=\"Thumbnail\" /></a><br />", catalogNodeUrl, ResolveUrl(catalogNode.ThumbnailUrl), catalogNode.ThumbnailAltText);
                    itemTemplate1.Controls.Add(new LiteralControl(thumbnail));
                }

[lasujah]

thanks a lot! it worked.

This is my code on my ascx file.

Code: Select all

<%#ResolveClientUrl(Eval("ThumbnailUrl").ToString())%>

[romac7]

Hi Judy,
I've tried using the CategoryGridPage2 conlib but Categories don't appear, only Products,Links and Webpages.
Is code required for CategoryGridPage2.ascx to make categories with thumbnails show?
Regards,
Rom

Try ThumbnailURL.
This is a snippet from CategoryGridPage2.ascx:

Code: Select all

//OUTPUT LINKED THUMNAIL
                if (!string.IsNullOrEmpty(catalogNode.ThumbnailUrl))
                {
                    string thumbnail = string.Format("<a href=\"{0}\"><img src=\"{1}\" alt=\"{2}\" border=\"0\" class=\"Thumbnail\" /></a><br />", catalogNodeUrl, ResolveUrl(catalogNode.ThumbnailUrl), catalogNode.ThumbnailAltText);
                    itemTemplate1.Controls.Add(new LiteralControl(thumbnail));
                }

[creativespark]

Hi Lasujah, Judy , Others.

I added the td tag in the categorygridpage2.ascx.cs file.
This below is my ascx file. Lasujah it does contain the Resolve tag you were saying but i guess i added to the wrong place as no thumbnail is coming... (and yes, there is a thumbnail for that category ) Please point out where exactly to put it and modifications if any.

Thanks.

Umesh Sethi
---------------------------------------------------------------------------------------------------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CategoryGridPage2.ascx.cs" Inherits="ConLib_CategoryGridPage2" %>
<%--
<conlib>
<summary>A category page that displays all contents in a grid format. This page displays products, webpages, and links.</summary>
</conlib>
--%>
<%@ Register Src="~/ConLib/CategoryBreadCrumbs.ascx" TagName="CategoryBreadCrumbs" TagPrefix="uc" %>
<%@ Register Src="~/ConLib/CategorySearchSidebar.ascx" TagName="CategorySearchSidebar" TagPrefix="uc" %>
<%@ Register Src="~/ConLib/Utility/ProductPrice.ascx" TagName="ProductPrice" TagPrefix="uc" %>
<%@ Register Src="~/ConLib/AddToCartLink.ascx" TagName="AddToCartLink" TagPrefix="uc" %>
<ajax:UpdatePanel ID="SearchResultsAjaxPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="CategoryHeaderPanel" runat="server" EnableViewState="false">
<uc:CategoryBreadCrumbs id="CategoryBreadCrumbs1" runat="server" HideLastNode="False" />
<div class="pageHeader">
<h1><asp:Literal ID="Caption" runat="server" EnableViewState="False"></asp:Literal></h1>
</div>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tbody>

<tr>
<td class="linegapping"></td>
</tr>
<tr>
<td height="39" class="bg_blue"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="txt_white">New Customer&rsquo;s Special Offer >> Sign up to get an extra 10% off </td>
<td align="right" class="txt_black"><strong>* valid till 31&rsquo; May 2008&nbsp;&nbsp;</strong></td>
</tr>
</table></td>
</tr>
<tr>
<td class="linegapping"></td>

<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width="707" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="238" background="Assets/CategoryImages/Main/main_box.jpg"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="58%"><img src="/Assets/CategoryImages/Main/cat7-womensfashion.jpg" width="370" height="218" /></td>
<td width="42%" valign="top"><p class="menu_txt_heading">Featured Fashion</p><br />
<br />

<p><span class="txt_menublack"><strong>Stylish Dress</strong></span><br /><br />

<span class="txt_menured"><strong>Stylish Partywear dress</strong></span></p>
<p><span class="txt_menublack"><strong>Dancing Feets</strong></span><br /><br />

<strong class="txt_menured">Shoes fit for a dancing queen</strong></p>
<p><span class="txt_menublack"><strong>Exquisite Jewelry </strong></span><br /><br />

<span class="txt_menured"><strong>Exquisite Jewelry </strong></span></p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>


</tr>
</tbody>
</table>

<asp:PlaceHolder ID="SubCategoryPanel" runat="server" EnableViewState="false">
<div class="section">
<div class="content">
<asp:Repeater ID="SubCategoryRepeater" runat="server" EnableViewState="false">
<SeparatorTemplate>, </SeparatorTemplate>
<ItemTemplate><asp:HyperLink ID="SubCategoryLink" runat="server" Text='<%#String.Format("{0} ({1})", Eval("Name"), Eval("ProductCount"))%>' NavigateUrl='<%#Eval("NavigateUrl")%>'> <%#ResolveClientUrl(Eval("ThumbnailUrl").ToString())%></asp:HyperLink></ItemTemplate>
</asp:Repeater><br /><br />
</div>
</div>
</asp:PlaceHolder>
</asp:PlaceHolder>
<asp:PlaceHolder ID="phCategoryContents" runat="server">
<div class="searchSortHeader">
<table width="100%" cellpadding="3" cellspacing="0" border="0">
<tr>
<td align="left">
<asp:Localize ID="ResultIndexMessage" runat="server" Text="Displaying items {0} - {1} of {2}" EnableViewState="false"></asp:Localize>
</td>
<td align="right">
<asp:Label ID="SortResultsLabel" runat="server" Text="Sort:" SkinID="FieldHeader" EnableViewState="false" AssociatedControlID="SortResults"></asp:Label>&nbsp;
<asp:DropDownList ID="SortResults" runat="server" AutoPostBack="true" CssClass="sorting" EnableViewState="false">
<asp:ListItem Text="By Name (A -> Z)" Value="Name ASC"></asp:ListItem>
<asp:ListItem Text="By Name (Z -> A)" Value="Name DESC"></asp:ListItem>
<asp:ListItem Text="Featured" Value="IsFeatured DESC, Name ASC"></asp:ListItem>
<asp:ListItem Text="By Price (Low to High)" Value="Price ASC"></asp:ListItem>
<asp:ListItem Text="By Price (High to Low)" Value="Price DESC"></asp:ListItem>
<asp:ListItem Text="By Brand (A -> Z)" Value="Manufacturer ASC"></asp:ListItem>
<asp:ListItem Text="By Brand (Z -> A)" Value="Manufacturer DESC"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</div>
<!-- Top Bar -->
<div class="catalogWrapper">
<asp:DataList ID="CatalogNodeList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%"
OnItemDataBound="CatalogNodeList_ItemDataBound" DataKeyField="CatalogNodeId" CssClass="catalog" EnableViewState="false" HorizontalAlign="Left">
<ItemStyle HorizontalAlign="center" VerticalAlign="bottom" Width="33%" CssClass="tableNode" />
<ItemTemplate>
<asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder>
<uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' />
<asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>
<div style="margin-top:10px;margin-bottom:20px" id="Add2CartLinkDiv" runat="server" visible='<%#((CatalogNodeType)Eval("CatalogNodeType")) == CatalogNodeType.Product %>'><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("CatalogNodeId")%>' visible='<%#((CatalogNodeType)Eval("CatalogNodeType")) == CatalogNodeType.Product %>' /></div>
</ItemTemplate>
<SeparatorTemplate>&nbsp;</SeparatorTemplate>
<SeparatorStyle CssClass="separator" Width="1" />
</asp:DataList><br clear="all" />
<asp:PlaceHolder ID="PagerPanel" runat="server">
<div class="paging">
<asp:Repeater ID="PagerControls" runat="server" OnItemCommand="PagerControls_ItemCommand" EnableViewState="true">
<ItemTemplate>
<asp:LinkButton ID="PageLink" runat="server" Text='<%#Eval("Text")%>' CommandName="Page" CommandArgument='<%#Eval("PageIndex")%>' Enabled='<%#Eval("Enabled")%>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:PlaceHolder>
</div>
<asp:HiddenField ID="HiddenPageIndex" runat="server" Value="0" />
</asp:PlaceHolder>
<asp:PlaceHolder ID="phEmptyCategory" runat="server" Visible="false" EnableViewState="false">
<div align="center">
<asp:Localize ID="EmptyCategoryMessage" runat="server" Text="This category is empty." EnableViewState="false"></asp:Localize>
</div>
</asp:PlaceHolder>
</ContentTemplate>
</ajax:UpdatePanel>

[jmestep]

It looks like categorygrid2 isn't coded to display categories:
<summary>A category page that displays all contents in a grid format. This page displays products, webpages, and links.</summary>
You would need to select a different display page or customized that one.

[AbleMods]

Use CategoryGrid3 or 4.

I use CategoryGrid4 for my site since I have multiple sub-categories under each root category.