Jump to:

23355 Posts in 17734 Topics by 2862 members

General Questions

SilverStripe Forums » General Questions » Insert images into menu list

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

Page: 1
Go to End
Author Topic: 1401 Views
  • grumpypanda
    Avatar
    Community Member
    32 Posts

    Insert images into menu list Link to this post

    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
  • Willr
    Avatar
    Forum Moderator
    5482 Posts

    Re: Insert images into menu list Link to this post

    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>

  • grumpypanda
    Avatar
    Community Member
    32 Posts

    Re: Insert images into menu list Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5482 Posts

    Re: Insert images into menu list Link to this post

    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.

  • grumpypanda
    Avatar
    Community Member
    32 Posts

    Re: Insert images into menu list Link to this post

    Hi Willr,

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

    Cheers
    S:)

  • grumpypanda
    Avatar
    Community Member
    32 Posts

    Re: Insert images into menu list Link to this post

    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
  • martimiz
    Avatar
    Forum Moderator
    1067 Posts

    Re: Insert images into menu list Link to this post

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

  • grumpypanda
    Avatar
    Community Member
    32 Posts

    Re: Insert images into menu list Link to this post

    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>

    1401 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.