MenuList - Different Images

Member since: 2009
 

 

When I use MenuList I create items with similar looks (only PageLink) using the itemTemplate and selectedTemplate. Now I want to insert different images on each item. 

Any idea of how to do this?

BR, Magnus

#27080 Jan 16, 2009 10:50
  • Member since: 2007
     

    Not sure of exactly what you mean!? Could you please describe a litle bit more and maybe i can help you!?

    /Eric

    #27182 Jan 19, 2009 22:05
  • Member since: 2009
     

    Here is an example template that I am trying to convert to a more dynamic EPiserver site:

     http://www.templateworld.com/zero/in_action/green_solutions/index.html

    There you have a menu list with three links: Our blog, Possibilities and Solutions. I want the same template for these three sites. I have manage to do this with a menulist, but either I have no picture at all or the same picture at each link. Do you understand what I am trying to do?

     

    Best regards, Magnus

     

     

    #27191 Jan 20, 2009 12:40
  • Member since: 2007
     

    One idea could be to store a css class or image url on the pages and then read it in the item template either in the ascx or just create the whole html in the codebehind.

    When we need to build a more complex menu as a <ul><li> list with a lot of different css classes for displaying correct images we have sent in the PageData object to a method and in the codebehind build a stringbuilder with the correct html, and we "print" it in the footer template.

    Ex

           <ItemTemplate>
                    <%#CreatePageLink(Container.CurrentPage)%>
          </ItemTemplate>

    or

        <ItemTemplate>
                    <%#WriteItemTemplate(Container.CurrentPage)%>
          </ItemTemplate>

              <FooterTemplate>
                    <%#WriteFooterTemplate()%>
                </FooterTemplate>

    #27259 Jan 22, 2009 11:10
  • Member since: 2007
     

    Hi,

    We have a solution like the one you posted before that looks like this http://www.templateworld.com/zero/in_action/green_solutions/index.html.

    If you look at http://world.episerver.com/en/Download/ i have a solution with en menu with pages that looks like this:

    <EPiServer:PageList runat="server" ID="BannerList">
        <HeaderTemplate>
            <div class="floatleft clearboth">
        </HeaderTemplate>
        <ItemTemplate>
            <a class="banner nostyle" style='background-image: url( <%#Container.CurrentPage["ImageLink"]%>);
                height: 59px; width: <%#Container.CurrentPage["Width"]%>px;'
                href='<%#Container.CurrentPage["BannerURL"] %>'></a>
        </ItemTemplate>
        <FooterTemplate>
            </div>
        </FooterTemplate>
    </EPiServer:PageList>

     Then i have a css-class that changes the background-position of the image instead of changing image when hovering, sliding door and css: http://www.alistapart.com/articles/slidingdoors/

    a.banner:hover
    {
    background-position:0 -60px;
    }

    This make it possible for our editors to choose different  images for each item. But to make this work great you also have to insert width of the image as well or create better css-classes. Laughing

    The hight must also be the same for all of the images otherwise it will not be able to change their positions correctly.

    Best Regards
    /Eric

    #27343 Jan 27, 2009 10:44
  • Member since: 2009
     

    Thanks to both Per and Eric for answer my question.

     I will try to implement what you recommended Eric, and hopefully I won't need to answer more questions in this thread ;-)

     

    Best regards, Magnus

    #27418 Jan 29, 2009 14:16