MenuList - Different Images

Vote:
 

 

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
Vote:
 

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
Vote:
 

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
Vote:
 

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
Vote:
 

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
Vote:
 

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
* 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.