show image in menu!

Reza sh asked on February 8, 2016 09:08

hi. I'm using a Repeater for menu and sub menu. how can i show the image in menu with teaser image? I mean the teaser image in every Form tab of Pages. I use the Html code for this but it shows in every submenu this is my Transformation for Menu:

<%# DataItemIndex ==0?"<ul  class='mega_dropdown' style=\"background: #fff url('/App_Themes/assets/img/boys.jpg')  left center no-repeat; min-height: 304px;\"> ":"" %>

                                                                               <a href="<%# GetDocumentUrl() %>" class="item_link">
                                                                                   <span class="link_content">
                                                                                       <span  class="link_text"><%# Eval("DocumentName")%> </span>
                                                                                   </span>
                                                                               </a>
                                        <ul class="mega_dropdown">                                      
                          <cms:CMSRepeater ID="CMSDataListNested"  Path='<%# Eval("NodeAliasPath") + "/%" %>' runat="server" ClassNames="CMS.MenuItem" TransformationName="CMS.MenuItem.MegaMenuSub2" OrderBy="NodeLevel, NodeOrder, NodeName" MaxRelativeLevel="1" WhereCondition="DocumentMenuItemHideInNavigation='false'"  />
                                          </ul>
                          <%# Eval("MenuItemTeaserImage") %>
                      </li>
               <%# DataItemIndex==DataRowView.DataView.Count-1?"</ul>":"" %>

thanks guys.

Recent Answers

Dawid Jachnik answered on February 8, 2016 10:21

Hello,

Did you read this article about best pracites in navigation?

1 votesVote for this answer Mark as a Correct answer

Jan Hermann answered on February 8, 2016 10:22

Hello,

First of all, please consider building your menu using hierarchical transformations (it's way better :) ):

http://devnet.kentico.com/articles/best-practices-for-implementing-site-navigation-in-kentico

The MenuItemTeaserImage is an attachment so you can call the GetAttachmentUrl or GetFileUrl methods to retrieve the url or GetImage to get the image directly:

object attachmentGuidColumn (required)
object (int) maxSideSize
object (int) width
object (int) height
object alt

Best regards,
Jan Hermann

0 votesVote for this answer Mark as a Correct answer

Reza sh answered on February 8, 2016 10:42

Re Jan Hermann: yes sir, I used the hierarchical transformation. could you please give an example of those methods as you said?!

should I use that like this?

url('<%Eval("GetfileUrl(350)")')

0 votesVote for this answer Mark as a Correct answer

Reza sh answered on February 8, 2016 10:44

@david yes i road that and i made something like that :D , but it still work great, i just want to add images in every menu!

Regard

0 votesVote for this answer Mark as a Correct answer

Dawid Jachnik answered on February 8, 2016 12:35 (last edited on February 8, 2016 12:38)

You should use

<img src="<%#GetFileUrl("MenuItemTeaserImage")%>" alt="" />

<img src="<%# GetImage("MenuItemTeaserImage", 200, 200, 100, "image alternate text") %>" alt="" />

2 votesVote for this answer Mark as a Correct answer

Reza sh answered on February 8, 2016 13:30

Re Dawid I called you David, sorry about that. so this is my problem: I used Both of Code but not to show Image. please see these screenshots: Image Text

Image Text

0 votesVote for this answer Mark as a Correct answer

Dawid Jachnik answered on February 8, 2016 15:36

You want to put image here, yes ?

<%# DataItemIndex ==0?"<ul  class='mega_dropdown' style=\"background: #fff url('/App_Themes/assets/img/boys.jpg')  left center no-repeat; min-height: 304px;\"> ":"" %>

so try one again with functions from my previous posts:

<%# DataItemIndex ==0?"<ul  class='mega_dropdown' style=\"background: #fff url('"+GetFileUrl("MenuItemTeaserImage")+"')  left center no-repeat; min-height: 304px;\"> ":"" %>

Did you have column name MenuItemTeaserImage listed in columns of your repeater ?

3 votesVote for this answer Mark as a Correct answer