Insert images into the menu list - content-management-system

Question

I'm trying to populate my menu items with an image/logo on each of the third menu list, please see example below.
I've been using Silverstripe to populate the menu items, below is my code so far without the images. Can someone please point me to the right direction on how I go about inserting the images/logos on the third level menu?
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<ul class="sf-menu">
<% control Menu(1) %>
<li>
$MenuTitle
<% if Children %>
<ul><% control Children %>
<li>
$MenuTitle
<% if Children %>
<ul><% control Children %>
<li>
$MenuTitle
</li>
<% end_control %>
</ul><% end_if %>
</li>
<% end_control %>
</ul><% end_if %>
<!--<li>
menu item
</li>-->
</li> <!--current-->
<% end_control %><!-- <li>
menu item
</li> -->
</ul> <!--sf-menu-->
Thanks heaps.
S:)
UPDATE below is my Page.php, and I have insert $Image.SetSize(20,20) $MenuTitle to my third level menu. However everytime i tried to insert an image through CMS, there is error coming up in CMS. Sorry i'm new to this, any help would be appreciated.
<?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 the error info.
[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

Answer 1

Assuming you have an image on your page object, you can render it in your template by doing something like this:
$MyImage.SetWidth(50) $MenuTitle
"$MyImage.SetWidth(50)" will output an image tag with an image resized to 50px wide. See the SilverStripe image reference for more info.

Answer 2

In case you don't have the menu image yet, follow the official documentation to do so: http://doc.silverstripe.org/sapphire/en/tutorials/2-extending-a-basic-site

Answer 3

I figured it out with soneone's help. Just in case others are in the same situation, it is because I didn't rebuild my database. Visit mysite.com/dev/build to rebuild the database. The code above in the update works after that. Thanks everyone! :)