Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Insert images into menu list


Reply


8 Posts   1467 Views

Avatar
grumpypanda

Community Member, 32 Posts

12 July 2011 at 3:38pm

Edited: 18/07/2011 11:48am

Hi there,

Please see the last reply from me for updates, thanks you very much.

I'm new to this, I'm trying to populate my menu items with an image/logo on each of the third menu list. Here is my code so far without the images. Can someone please point me to the right direction on how I go about insert the images/logos? Please see attached result.

<body>   <script type="text/javascript">

      // initialise plugins
      jQuery(function(){
         jQuery('ul.sf-menu').superfish();
      });

      </script>
      
   <!--   <div id="header"><h1>$Title</h1></div>-->
      
      
      <ul class="sf-menu">
      <% control Menu(1) %>
         <li>
            <a href="#a">$MenuTitle</a>
             <% if Children %>
               <ul><% control Children %>
                  <li>
                     <a href="#aa">$MenuTitle</a>
                     
                      <% if Children %>
               <ul><% control Children %>
                  <li>
                     <a href="#aa">$MenuTitle</a>
                  </li>
                  <% end_control %>
                  
                  </ul><% end_if %>
                  </li>
                  <% end_control %>
                  
                  </ul><% end_if %>
         
         <!--<li>
            <a href="#">menu item</a>
         </li>-->
         
            </li> <!--current-->
      <% end_control %><!--   <li>
            <a href="#">menu item</a>
         </li>   -->
      </ul> <!--sf-menu-->
   </body>

Thanks heaps.
S:)

Attached Files
Avatar
Willr

Forum Moderator, 5513 Posts

12 July 2011 at 6:14pm

Have you got an image field attached to your page types? Tutorial 2 covers how to add images to page types.

Then you would just need to reference that image field (say $Image) in your 3rd level. You may want to use SetSize to ensure it's a specific size

<a href="#aa">$Image.SetSize(20,20) $MenuTitle</a>

Avatar
grumpypanda

Community Member, 32 Posts

13 July 2011 at 10:53am

Hi Willr,

Thanks very much for your reply. I put $Image.SetSize(20,20) $MenuTitle to my third level menu on page.ss. I have followed the tutorial you gave me, and managed to insert an image tab in Silverstripe, but everytime I tried to upload an image an error shows up. Would you be able to point me to the right direction on what I've done wrong? Thanks heaps.

Here is the code for Page.php

<?php
class Page extends SiteTree {

public static $db = array(
);

public static $has_one = array(
'MenuImage' => 'Image'
);

function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldToTab("Root.Content.Images", new ImageField('MenuImage','Menu image'));

return $fields;
}
}
class Page_Controller extends ContentController {

public static $allowed_actions = array (
);

public function init() {
parent::init();

// Note: you should use SS template require tags inside your templates
// instead of putting Requirements calls here. However these are
// included so that our older themes still work
Requirements::themedCSS('layout');
Requirements::themedCSS('typography');
Requirements::themedCSS('form');
}
}

here is error

[User Error] Couldn't run query: SELECT * FROM "Page" WHERE "ID" = 15 Table 'ss_show.page' doesn't exist POST /Show/admin/EditForm/field/MenuImage/EditFileForm

Line 525 in C:\wamp\www\Show\sapphire\core\model\MySQLDatabase.php

Avatar
Willr

Forum Moderator, 5513 Posts

13 July 2011 at 9:04pm

Table 'ss_show.page' doesn't exist POST /Show/admin/EditForm/field/MenuImage/EditFileForm

Sounds like you haven't rebuilt your database. Visit yoursite.com/dev/build to rebuild your database.

Avatar
grumpypanda

Community Member, 32 Posts

14 July 2011 at 4:19pm

Hi Willr,

You are a legend, thanks so much for your help, it worked! THANK YOU, yet again!

Cheers
S:)

Avatar
grumpypanda

Community Member, 32 Posts

15 July 2011 at 5:01pm

Hi Willer,

I'm still on the same project, and I'm new to SS. There are a couple of questions if you are ok to help me.

1) I want put an <id> to each of the top menu items, because they are different shapes and in different locations. Also I need to apply a class for the secondary and third level menus of the fourth menu item due to float different direction (please see attached). How do I apply an <id> or a <class> to each menu item and implement silverstripe? I've been searching and only managed to apply either the first menu item or all the menu items have to be the same style. Please help.

2) I'm using lightbox with the third level menu link, I made everything work in html but lost in silverstripe. I put the links eg Requirements::javascript("mysite/javascript/jquery.lightbox-0.5.js"); in Page.php, but everytime I click on the third menu link, only the image pops up not the lightbox. Any ideas?

Here is my page.ss so far. Any of your help is greatly appreciated. Thank you very much Willr, and have a great weekend.

<body>
<div id="top">
<ul class="sf-menu">
<% control Menu(1) %>
<li id="area1">
<a href="#a">$MenuTitle</a>
<% if Children %>
<ul><% control Children %>
<li>
<a href="#aa">$MenuTitle</a>

<% if Children %>
<ul><% control Children %>
<li>
<a href="#aa">$MenuImg.SetSize(20,20) $MenuTitle</a>
</li>
<% end_control %>

</ul><% end_if %>
</li>
<% end_control %>

</ul><% end_if %>
</li>
<% end_control %>

<li id="area2">
<a href="#">Area 2</a>
<ul>
<li>
<a href="#">Store one</a>
<ul>
<li><a href="#">Store one-1</a></li>
<li><a href="#">Store one-2</a></li>
</ul>
</li>
<li>
<a href="#">Store Two</a>
<ul>
<li><a href="#">Store Two-1</a></li>
<li><a href="#">Store Two-2</a></li>
</ul>
</li>

</ul>
</li>

</ul>

</div>
<div id="test" >
<ul class="sf-menu sf-vertical">
<li id="area3">
<a href="#a"></a>
<ul>

<li class="current">
<a href="#ab">store 1</a>
<ul>

<li class="current">
<a href="themes/tutorial/photos/image1.jpg" title="Adventure">
Adventure
</a>
</li>

<li>
<a href="photos/image2.jpg" title="Cats">
Cats </a>
</li>

</ul>
</li>

</ul>
</li>
<li id="area4">
<a href="#">area4</a>
<ul class="show_left">
<li>
<a href="#">Store one</a>
<ul class="show_left">
<li><a href="#">Store one-1</a></li>
<li><a href="#">Store one-2</a></li>
</ul>
</li>
<li>
<a href="#">Store Two</a>
<ul class="show_left">
<li><a href="#">Store Two-1</a></li>
<li><a href="#">Store Two-2</a></li>
</ul>
</li>

</ul>
</li>

</ul>

</div>

<div id="Content" class="typography">

$Form
</div>

</body>
      

Attached Files
Avatar
martimiz

Forum Moderator, 1105 Posts

15 July 2011 at 11:07pm

Edited: 15/07/2011 11:08pm

Hi there,

To create different classnames for your menuitems, you could use $Pos. This is a counter that counts your <% control %> loops. So you could: <li class="area{$Pos}"... to create area1, area2 etc.

You can do something similar within the nested <% controls %> for your nested levels

Of course you could also take it further, for instance by creating a new databasefield "CSSStyle" style for your pages...

As for the lightbox implementation - did you check that all necessary scripts are actually loaded in your Page? If so, it might be some javascript conflict: you could use FireBug to find out...

Avatar
grumpypanda

Community Member, 32 Posts

18 July 2011 at 11:31am

Hi Martimiz,

Thanks for your help! I have managed to populate the first two menus with SS using <li class="area{$Pos}">. However, with third and fourth menus they are in different div and class from the first two menus. How can I populate menus in different <div>? Sorry I'm new to SS, so any help would be appreciated.

Here is my code.

<div id="top">
<ul class="sf-menu">
<% control Menu(1) %>
<li id="pavilion{$Pos}">
<a href="#a">$MenuTitle</a>
<% if Children %>
<ul><% control Children %>
<li>
<a href="#aa">$MenuTitle</a>

<% if Children %>
<ul><% control Children %>
<li>
<a href="#aa">$MenuImg.SetSize(20,20) $MenuTitle</a>
</li>
<% end_control %>

</ul><% end_if %>
</li>
<% end_control %>

</ul><% end_if %>

</li>
<% end_control %>

</ul>
</div>

<div id="test" >
<ul class="sf-menu sf-vertical">
<li id="area3">
<a href="#a">Area 3</a>
</li>

<li id="area4">
<a href="#">Area 4</a>
<ul class="show_left">
<li>
<a href="#">Store one</a>

</li>
<li>
<a href="#">Store Two</a>

</li>

</ul>
</li>

</ul>
</div>