How to Structure the Evo2 Menu
The Evo2 Menu is as flexible as you need it to be. To adapt the menu to fit your project, decide first which modules you wish to use and then edit the menu in function of the desired structure.
YorgoMan Menu
The YorgoMan site will feature mainly Photos. The preferred gallery module is the Images module. YorgoMan wants to organize the images in albums and for each album he wants to load a menu entry.
Albums:
- Sun and Sea
- Basketball
- Friends
- Holidays
- I me and myself
We will need 5 times the Image module.
A further category will be Music where he wants to load his preferred songs; for this we will use the Music Module.
Finally, he wants to load some YouTube clips, for which we use the YouTube Galley module.
For the good order’s sake we keep the contact form and eliminate all other modules.
How to Edit the Menu
The visible part of the menu is edited in evo2/xml/menu.xml
Each menu item is defined by code between <page> …. </page> tags. I delete all items which are not needed from the menu.xml and keep only the home page, Images, YouTube Gallery and Contact. Also I will keep the Links module to point to the YorgoMan Blog.
We will get the following script after this first operation:
<?xml version="1.0" encoding="ISO-8859-1"?> <data> <!-- menuTitle = the title of the menu item --> <!-- deepLinkURL = the deep-link url page name --> <!-- image "align" = what point to align your background image --> <!-- image = the url of your background image --> <!-- module "thirdParty = if the swf is your onw and not a module from the template --> <!-- module = the module to load in for the page --> <!-- moduleType = the type of module to load in. see below for options --> <!-- moduleXML = the url of the module's xml file --> <!-- ACCEPTED PARAMETERS FOR BACKGROUND ALIGN: "bgAlign" tl = top-left; tc = top-center; tr = top-right lc = left-center mc = middle-center rc = right-center bl = bottom-left bc = bottom-center br = bottom-right --> <!-- BELOW ARE THE ACCEPTED PARAMETERS FOR EACH MODULE FOR THE "modulePos" node longText: 1) "left" 2) "center" 3) "right" // **************************** gallery: 1) "lc" (left-center) // **************************** portfolio: 1) "tc" (top-center) // **************************** news / services / music: 1) "lc" (left-center) // **************************** banner: 1) "tl" (top-left) 2) "tc" (top-center) 3) "tr" (top-right) 4) "lc" (left-center) 5) "mc" (middle-center) 6) "rc" (right-center) 7) "bl" (bottom-left) 8) "bc" (bottom-center) 9) "br" (bottom-right) // ***************************** contact: 1) "tl" (top-left) 2) "tc" (top-center) 3) "tr" (top-right) 4) "lc" (left-center) 5) "mc" (middle-center) 6) "rc" (right-center) 7) "bl" (bottom-left) 8) "bc" (bottom-center) 9) "br" (bottom-right) --> <!-- accepted parameters for module type: 1) customModule 2) yourSwf SPECIAL NOTES: // A static image or 3rd party swf can be loaded as a module. // If a 3rd party swf is loaded, the moduleXML parameter will be ignored // If you wish to not load in a module (for example a menu item that has a sub-menu), // write null for all parameters except the "menuTitle" // deepLinkURL will be converted to lower-case // deepLinkURL will be joined to one string/word... // For example: "my photos" would become "myphotos" // however, "my_photos" would remain "my_photos" --> <page> <menuTitle>HOME</menuTitle> <deepLinkURL>home</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/1.jpg</bgURL> <bgAlign>tc</bgAlign> <moduleURL>banner.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/banner.xml</moduleXML> </page> <page> <menuTitle>IMAGES</menuTitle> <deepLinkURL>images</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page> <page> <menuTitle>YOU TUBE GALLERY</menuTitle> <deepLinkURL>you tube videos</deepLinkURL> <urlTarget>_self</urlTarget> <bgURL>images/backgrounds/18.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/you_tube.xml</moduleXML> </page> <page> <menuTitle>MUSIC</menuTitle> <deepLinkURL>our music</deepLinkURL> <urlTarget>_self</urlTarget> <bgURL>images/backgrounds/18.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>music.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/musicmodule.xml</moduleXML> </page> <page> <menuTitle>LINK</menuTitle> <deepLinkURL>http://www.semiomantics.com</deepLinkURL> <urlTarget>_blank</urlTarget> <bgURL>images/backgrounds/7.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>contact.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>null</moduleXML> </page> <page> <menuTitle>CONTACT</menuTitle> <deepLinkURL>contact</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/7.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>contact.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/contact.xml</moduleXML> </page> </data>
Multiply the Image Galleries
the Following Block defines the Image Gallery:
<page> <menuTitle>IMAGES</menuTitle> <deepLinkURL>images</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page>
Let’s try to understand these lines:
Line 2: Menu entry Title as it will appear on the site
Line 3: is the link slug – needs to be different for each gallery.
Line 4: Would be an external link target which we don’t need here – we leave the value at ‘null’.
Line 5: Is the relative link to the gallery’s background picture. Can be different for each Gallery: just load background images into the evo2/images/backgrounds folder and then define here the image name you wish to import as gallery background.
Line 6: Is the alignment of the background image, here bl for bottom left.
Line 7: Defines the module we use. This remains unchanged for all Galleries: gallery.swf
Line 8: is the alignment of the module, here lc for left-center. Don’t change this.
Line 9: Don’t change.
Line 10: Each Gallery will need it’s own xml file, since we define there each image.
We will now copy paste this code block 4 times to end up with 5 Galleries.
You end up with the following:
<?xml version="1.0" encoding="ISO-8859-1"?> <data> <!-- menuTitle = the title of the menu item --> <!-- deepLinkURL = the deep-link url page name --> <!-- image "align" = what point to align your background image --> <!-- image = the url of your background image --> <!-- module "thirdParty = if the swf is your onw and not a module from the template --> <!-- module = the module to load in for the page --> <!-- moduleType = the type of module to load in. see below for options --> <!-- moduleXML = the url of the module's xml file --> <!-- ACCEPTED PARAMETERS FOR BACKGROUND ALIGN: "bgAlign" tl = top-left; tc = top-center; tr = top-right lc = left-center mc = middle-center rc = right-center bl = bottom-left bc = bottom-center br = bottom-right --> <!-- BELOW ARE THE ACCEPTED PARAMETERS FOR EACH MODULE FOR THE "modulePos" node longText: 1) "left" 2) "center" 3) "right" // **************************** gallery: 1) "lc" (left-center) // **************************** portfolio: 1) "tc" (top-center) // **************************** news / services / music: 1) "lc" (left-center) // **************************** banner: 1) "tl" (top-left) 2) "tc" (top-center) 3) "tr" (top-right) 4) "lc" (left-center) 5) "mc" (middle-center) 6) "rc" (right-center) 7) "bl" (bottom-left) 8) "bc" (bottom-center) 9) "br" (bottom-right) // ***************************** contact: 1) "tl" (top-left) 2) "tc" (top-center) 3) "tr" (top-right) 4) "lc" (left-center) 5) "mc" (middle-center) 6) "rc" (right-center) 7) "bl" (bottom-left) 8) "bc" (bottom-center) 9) "br" (bottom-right) --> <!-- accepted parameters for module type: 1) customModule 2) yourSwf SPECIAL NOTES: // A static image or 3rd party swf can be loaded as a module. // If a 3rd party swf is loaded, the moduleXML parameter will be ignored // If you wish to not load in a module (for example a menu item that has a sub-menu), // write null for all parameters except the "menuTitle" // deepLinkURL will be converted to lower-case // deepLinkURL will be joined to one string/word... // For example: "my photos" would become "myphotos" // however, "my_photos" would remain "my_photos" --> <page> <menuTitle>HOME</menuTitle> <deepLinkURL>home</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/1.jpg</bgURL> <bgAlign>tc</bgAlign> <moduleURL>banner.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/banner.xml</moduleXML> </page> <page> <menuTitle>IMAGES</menuTitle> <deepLinkURL>images</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page> <page> <menuTitle>IMAGES</menuTitle> <deepLinkURL>images</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page> <page> <menuTitle>IMAGES</menuTitle> <deepLinkURL>images</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page> <page> <menuTitle>IMAGES</menuTitle> <deepLinkURL>images</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page> <page> <menuTitle>IMAGES</menuTitle> <deepLinkURL>images</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page> <page> <menuTitle>YOU TUBE GALLERY</menuTitle> <deepLinkURL>you tube videos</deepLinkURL> <urlTarget>_self</urlTarget> <bgURL>images/backgrounds/18.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/you_tube.xml</moduleXML> </page> <page> <menuTitle>MUSIC</menuTitle> <deepLinkURL>our music</deepLinkURL> <urlTarget>_self</urlTarget> <bgURL>images/backgrounds/18.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>music.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/musicmodule.xml</moduleXML> </page> <page> <menuTitle>LINK</menuTitle> <deepLinkURL>http://www.semiomantics.com</deepLinkURL> <urlTarget>_blank</urlTarget> <bgURL>images/backgrounds/7.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>contact.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>null</moduleXML> </page> <page> <menuTitle>CONTACT</menuTitle> <deepLinkURL>contact</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/7.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>contact.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/contact.xml</moduleXML> </page> </data>
Now we need to
Customize the Galleries
As we saw above, there are a certain number of entries specific to each gallery:
Let’s start with the apparent Menu entries:
in each gallery code block we change the Menu Title to fit the project.
in each gallery code block we change the deep link url (i.e. the slug)
in each gallery code block we change the background image (we will need to load these backgrounds to evo2/images/backgrounds)
in each gallery code block we change the name of the xml file to images1.xml, images2.xml …. we will then have to create these files in evo2/xml by simply copying the images.xml multiple times and renaming it.
You get the following menu.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <data> <!-- menuTitle = the title of the menu item --> <!-- deepLinkURL = the deep-link url page name --> <!-- image "align" = what point to align your background image --> <!-- image = the url of your background image --> <!-- module "thirdParty = if the swf is your onw and not a module from the template --> <!-- module = the module to load in for the page --> <!-- moduleType = the type of module to load in. see below for options --> <!-- moduleXML = the url of the module's xml file --> <!-- ACCEPTED PARAMETERS FOR BACKGROUND ALIGN: "bgAlign" tl = top-left; tc = top-center; tr = top-right lc = left-center mc = middle-center rc = right-center bl = bottom-left bc = bottom-center br = bottom-right --> <!-- BELOW ARE THE ACCEPTED PARAMETERS FOR EACH MODULE FOR THE "modulePos" node longText: 1) "left" 2) "center" 3) "right" // **************************** gallery: 1) "lc" (left-center) // **************************** portfolio: 1) "tc" (top-center) // **************************** news / services / music: 1) "lc" (left-center) // **************************** banner: 1) "tl" (top-left) 2) "tc" (top-center) 3) "tr" (top-right) 4) "lc" (left-center) 5) "mc" (middle-center) 6) "rc" (right-center) 7) "bl" (bottom-left) 8) "bc" (bottom-center) 9) "br" (bottom-right) // ***************************** contact: 1) "tl" (top-left) 2) "tc" (top-center) 3) "tr" (top-right) 4) "lc" (left-center) 5) "mc" (middle-center) 6) "rc" (right-center) 7) "bl" (bottom-left) 8) "bc" (bottom-center) 9) "br" (bottom-right) --> <!-- accepted parameters for module type: 1) customModule 2) yourSwf SPECIAL NOTES: // A static image or 3rd party swf can be loaded as a module. // If a 3rd party swf is loaded, the moduleXML parameter will be ignored // If you wish to not load in a module (for example a menu item that has a sub-menu), // write null for all parameters except the "menuTitle" // deepLinkURL will be converted to lower-case // deepLinkURL will be joined to one string/word... // For example: "my photos" would become "myphotos" // however, "my_photos" would remain "my_photos" --> <page> <menuTitle>HOME</menuTitle> <deepLinkURL>home</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/1.jpg</bgURL> <bgAlign>tc</bgAlign> <moduleURL>banner.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/banner.xml</moduleXML> </page> <page> <menuTitle>SUN & SEA</menuTitle> <deepLinkURL>sunsea</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images.xml</moduleXML> </page> <page> <menuTitle>BASKETBALL</menuTitle> <deepLinkURL>basketball</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/12.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images1.xml</moduleXML> </page> <page> <menuTitle>FRIENDS</menuTitle> <deepLinkURL>friends</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/11.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images2.xml</moduleXML> </page> <page> <menuTitle>HOLYDAYS</menuTitle> <deepLinkURL>holidays</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/13.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images3.xml</moduleXML> </page> <page> <menuTitle>I ME & MYSELF</menuTitle> <deepLinkURL>yorgo</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/14.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/images4.xml</moduleXML> </page> <page> <menuTitle>YOU TUBE GALLERY</menuTitle> <deepLinkURL>you tube videos</deepLinkURL> <urlTarget>_self</urlTarget> <bgURL>images/backgrounds/18.jpg</bgURL> <bgAlign>bl</bgAlign> <moduleURL>gallery.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/you_tube.xml</moduleXML> </page> <page> <menuTitle>MUSIC</menuTitle> <deepLinkURL>our music</deepLinkURL> <urlTarget>_self</urlTarget> <bgURL>images/backgrounds/18.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>music.swf</moduleURL> <modulePos>lc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/musicmodule.xml</moduleXML> </page> <page> <menuTitle>LINK</menuTitle> <deepLinkURL>http://www.semiomantics.com</deepLinkURL> <urlTarget>_blank</urlTarget> <bgURL>images/backgrounds/7.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>contact.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>null</moduleXML> </page> <page> <menuTitle>CONTACT</menuTitle> <deepLinkURL>contact</deepLinkURL> <urlTarget>null</urlTarget> <bgURL>images/backgrounds/7.jpg</bgURL> <bgAlign>tl</bgAlign> <moduleURL>contact.swf</moduleURL> <modulePos>mc</modulePos> <moduleType>customModule</moduleType> <moduleXML>xml/contact.xml</moduleXML> </page> </data>
Now our menu is set at least in as much as the Galleries are concerned.
Look out for the next post about How to Edit and populate the Galleries.
Great Tutorial – so helpful for all – thank you!
Please, check my folder – very important re transfer mvr.COM to our server on HSA.
ENDLICH!