Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

MenuList - Different Images



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

Jan 16, 2009 10:50

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


Jan 19, 2009 22:05

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

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



Jan 20, 2009 12:40

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.






Jan 22, 2009 11:10


We have a solution like the one you posted before that looks like this

If you look at i have a solution with en menu with pages that looks like this:

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

 Then i have a css-class that changes the background-position of the image instead of changing image when hovering, sliding door and css:

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

Jan 27, 2009 10:44

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

Jan 29, 2009 14:16
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.