locked
adding images to category text on default.aspx RRS feed

  • Question

  • User212556065 posted

    Would like to ad images aswell as category text on default.aspx page, any ideas on slickest way to do? Example Picture of Seeds next to Seeds text.

    Thursday, March 12, 2009 5:39 PM

All replies

  • User-122480877 posted

    There is a few ways you could go about that and I propose This way but let me know if you are wanting to this another way.

    1. You need to modify the category browse control. (you may wanna remove all refrences to <ul> and <li>)
    2. You need to create a new or modify the existing Image Handler.
    3. You need images and Name them the 'Id' of the the category they will be used for and locate them in a folder on your site (example: ~/Images/CategoryPreview/)

    So heres the new code for you browse control. (you will add this code in 3 sections as shown below)

    <asp:LinkButton ID="PreviewImageLinkButton" runat="server" CommandArgument='<%# Eval("Id") %>'>

    <asp:Image ID="PreviewImage" runat="server" ImageUrl='<%# Eval("Id", "~/System/Handler/PhotoDisplay.ashx?CategoryPreviewId={0}&Size=Small") %>'

    AlternateText="Preview Image" Style="border: 0;" />

    </asp:LinkButton>

    My code may have been modified to an extent so please only use as a guide.

    <%@ Control Language="C#" CodeFile="Browse.ascx.cs" Inherits="CategoryBrowse_ascx" %>

    <asp:DataList ID="TopCategoryList" runat="server" DataSourceID="TopCategoriesDS" CssClass="category_browse" HorizontalAlign="Center" RepeatColumns="3" OnItemDataBound="TopCategoryList_ItemDataBound" OnItemCommand="TopCategoryList_ItemCommand">

    <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" />

    <ItemTemplate>

    <h4>

    <!-- Begin New Code -->

    <asp:LinkButton ID="PreviewImageLinkButton" runat="server" CommandArgument='<%# Eval("Id") %>'>

    <asp:Image ID="PreviewImage" runat="server" ImageUrl='<%# Eval("Id", "~/System/Handler/PhotoDisplay.ashx?CategoryPreviewId={0}&Size=Small") %>' AlternateText="Preview Image" Style="border: 0;" />

    </asp:LinkButton>

    <!-- End New Code -->

    <asp:LinkButton ID="TopCategoryButton" runat="server" Text='<%# Eval("Name") %>' CommandArgument='<%# Eval("Id") %>' />

    </h4>

    <span class="small_text">(<%# Eval("NumActiveListings") %>)</span>

    <asp:Repeater ID="NestedSubCategoryRepeater" runat="server" DataSourceID="NestedCategoryDS"

    OnItemCommand="NestedSubCategoryRepeater_ItemCommand" OnItemDataBound="NestedSubCategoryRepeater_ItemDataBound">

    <HeaderTemplate>

    <ul>

    </HeaderTemplate>

    <ItemTemplate>

    <asp:Panel ID="NestedSubCategoryPanel" runat="server">

    <li>

    <!-- Begin New Code -->

    <asp:LinkButton ID="PreviewImageLinkButton" runat="server" CommandArgument='<%# Eval("Id") %>'>

    <asp:Image ID="PreviewImage" runat="server" ImageUrl='<%# Eval("Id", "~/System/Handler/PhotoDisplay.ashx?CategoryPreviewId={0}&Size=Small") %>' AlternateText="Preview Image" Style="border: 0;" />

    </asp:LinkButton>

    <!-- End New Code -->

    <asp:LinkButton ID="SubCategoryButton" runat="server" Text='<%# Eval("Name") %>' CommandArgument='<%# Eval("Id") %>' />

    <span class="small_text">(<%# Eval("NumActiveListings") %>)</span> </li>

    <asp:Repeater ID="NestedSubCategoryRepeater2" runat="server" OnItemCommand="NestedSubCategoryRepeater_ItemCommand"

    DataSourceID="NestedCategoryDS2">

    <HeaderTemplate>

    <ul>

    </HeaderTemplate>

    <ItemTemplate>

    <li>

    <!-- Begin New Code -->

    <asp:LinkButton ID="PreviewImageLinkButton" runat="server" CommandArgument='<%# Eval("Id") %>'>

    <asp:Image ID="PreviewImage" runat="server" ImageUrl='<%# Eval("Id", "~/System/Handler/PhotoDisplay.ashx?CategoryPreviewId={0}&Size=Small") %>' AlternateText="Preview Image" Style="border: 0;" />

    </asp:LinkButton>

    <!-- End New Code -->

    <asp:LinkButton ID="SubCategoryButton2" runat="server" Text='<%# Eval("Name") %>'

    CommandArgument='<%# Eval("Id") %>' />

    <span class="small_text">(<%# Eval("NumActiveListings") %>)</span> </li>

    </ItemTemplate>

    <FooterTemplate>

    </ul>

    <br />

    </FooterTemplate>

    </asp:Repeater>

    <asp:ObjectDataSource ID="NestedCategoryDS2" TypeName="AspNet.SpiderMaster.TradingCenter.Web.CategoryCache"

    SelectMethod="GetBrowseCategoriesByParentId" runat="server">

    <SelectParameters>

    <asp:Parameter Type="Int32" Name="parentCategoryId" />

    </SelectParameters>

    </asp:ObjectDataSource>

    </asp:Panel>

    </ItemTemplate>

    <FooterTemplate>

    </ul>

    </FooterTemplate>

    </asp:Repeater>

    <asp:ObjectDataSource ID="NestedCategoryDS" TypeName="AspNet.SpiderMaster.TradingCenter.Web.CategoryCache"

    SelectMethod="GetBrowseCategoriesByParentId" runat="server">

    <SelectParameters>

    <asp:Parameter Type="Int32" Name="parentCategoryId" />

    </SelectParameters>

    </asp:ObjectDataSource>

    </ItemTemplate>

    </asp:DataList>

    <asp:ObjectDataSource ID="TopCategoriesDS" runat="server" TypeName="AspNet.SpiderMaster.TradingCenter.Web.CategoryCache"

    SelectMethod="GetBrowseCategoriesByParentId">

    <SelectParameters>

    <asp:Parameter Type="Int32" DefaultValue="0" Name="parentCategoryId" />

    </SelectParameters>

    </asp:ObjectDataSource>

    Thursday, March 12, 2009 6:56 PM
  • User212556065 posted

    Wow, I am bit concerned about my ability to make these changes!

    Could you advise if there is a simple or simplest approach for beginner.

    Saturday, March 14, 2009 7:25 AM
  • User-122480877 posted

    I can not think of a better option and this would be the easiest way.

    If you have followed so far and modified your code then run your site you will see the category browse has attempted to display Images. Basicly Everything Is now there to display the images and I will post the image handler code shortly. So if you have the images all you need to do is decide if you want to Name them according to categoryId or categoryName

    I have choosen to name them by Id simply because I may rename the category later leaving only the Id of the Image to Match.

    So in a folder of your choice you need Images. (On my site they are like this (~/System/Images/Category/203.Sm.jpg)

    Here is the best way to go about naming the Images.

    • Create the small 16x16 (approx pixel) image and choose a file type for the images (recommend jpg) if you have the images then ensure they are all the same size and file extension.
    • Formatting should look like this   CategoryId . Size . Extension
    • The name of the Image should Result as for categoryId 1 = 1.Sm.jpg and for 2 = 2.Sm.jpg

    If everything iso far s working and you now have the images located in a folder on your site. I can then help you modify further code to link to your Images with either a new Handler or your current Handler. Once this is done then you are finished. You will get the hang of this and will look back and think. That was easy as [:P]

    Saturday, March 14, 2009 7:53 PM
  • User212556065 posted

    Hi Spider,

    Thanks dude, think I am getting there, might be delayed due to a rather annoying SMTP problem with www.plantup.com.au  I am in thre middle of resolving with my host www.webhost4life.com

    Thanks,

    R

    Tuesday, March 17, 2009 6:43 AM
  • User212556065 posted

    Any chance of this in VB?

    Sorry a beginner...

    Tuesday, March 17, 2009 6:46 AM
  • User1371822439 posted

    so what's next?

    Tuesday, March 17, 2009 11:30 AM
  • User-1136540166 posted

    Here is the way I did it.  Like you, I want a picture for each category.  I did not want to show the 'subcategories'.  This if for one of my sites in which the categories will very rarely change.  The images will very rarely change also.  Perhaps once a year I will add or delete a category.   So for me, this 'manual' process is working.

    I have completely 'replaced'  default.aspx.  On my new default.aspx are welcome notices and some "about" the business.  The category listing as provided in the starter kit was completely removed.

    I manually place images on my new default.aspx and then manually make them into hyperlinks.   The link is ~/Search.aspx?c=66 .  For each image, I determine the number of the category and set its link appropriately.

    I suppose you could manually place buttons and manually set the links also.   In my case however, I wanted pictures.... like cars, trucks, horses and bicycles.

    Thursday, April 9, 2009 12:26 PM
  • User-390097995 posted

    I know it's been a long time, but could you put up the code changes to the current handler.

    Thanks for the help.

    Tim

    Thursday, November 3, 2011 11:03 PM