Chapter 4 - Modules and plugins
Contents
1. IHI Banner plugins in the library Q Create a plugin Home page banner Masthead Side banner Zenario User Manual 7 0 5 On the next screen enter the plugin name which is usually something relevant to the content of the plugin and then to show an image click on Show an image Two options will then appear upload and select image Upload will allow you to upload from your computer and select image will allow you to choose an image that is already in the image library of your site Image link Title amp HTML City news Banner Lo Image source Don t show an image OShowanimage Auto show image from destination content item If you choose auto show then an image marked as sticky on the destination content item will be used Image A Nothing selected Upload Select image I a city image jpg 352 x 185px Image canvas Unlimited size Scrolling further down the admin box you will see an area called Destination It is here that you can choose a link destination to take the site user to when clicking on the banner Zenario User Manual 7 0 5 As this is a banner taking about city news we want to link this to the existing news page on the website Under Destination click the Link to a Content Item button More options will appear allowing you to select a content item Destination No link Link to a Content Item Link to an external URL Enlar2. ZENARIO Modules and plugins 7 0 5 This chapter introduces you to self contained software packages called modules that contain the functionality of a Zenario site You will learn how to install initialize and run modules You will see how modules can add core features management facilities and how certain modules can generate plugins that add features to visitor facing pages You will be shown how to create a plugin which can then be saved in the plugin library How to add a plugin to a content item view and edit its settings and how to move a plugin on the page You will learn about plugins and their relationship with layouts enabling you to put plugins across multiple pages at once This guide will also cover version controlled plugins which can be added to the layout of a website and be used as a place holder for content Finally you will learn about some advanced module topics including what a framework is how to specify a CSS class in a plugin and how to suspend and reset a module Zenario User Manual 7 0 5 Modules Why modules are important Modules are a critical part of Zenario While Zenario s core software creates the environment for operating and managing a website modules are used to deliver a considerable part of the visitor and administrator facing functionality Certain modules are critical to the operation of Zenario such as the module called Common Features which provides all of the standard cor
3. content item Remove plugin Moving a plugin Should you wish to move the plugin to a different slot simply click on the multi coloured edit icon of the plugin and then click Move plugin Banner City news Banner zenario banner zenario_banner default style Plugin properties Framework amp CSS Move plugin Ww Show a different plugin on this content item Remove plugin A plus icon will then appear on all of the slots that you can move the banner to Click the plus to move 13 Zenario User Manual 7 0 5 E Click to move into the empty Slot Side 1 Citynews Plugins and layouts When working and editing your website on the Edit tab you may ave noticed that some plugins such as the company logo are greyed out Navigate Menu Properties w Publish Actions wv Categories w 14 Zenario User Manual 7 0 5 This is because these plugins are on the layout of that content item A layout is what defines the structure of a page and the arrangement of the slots on a content item Multiple content items can use a single layout for their appearance The layout tab To access the plugins on a layout you need to go to the Layout tab in the admin toolbar Navigate Menu Layout Edit layout Change skin Organize layout View v Hide empty slots Show grid Help Layout LO1 Text heavy Used on 4 Content Item s With this tab selected you can see that the layout
4. click on the pencil icon to add your content Advanced module topics In this final chapter of modules and plugins you will learn about some more advanced topics such as frameworks how to specify a CSS class in a plugin and suspending and resetting a module Frameworks A framework is the mechanism through which a plugin s HTML output is defined and onto which its styles are attached The plugin in each slot generates a chunk of HTML according to its framework and that HTML gets merged into the appropriate slot of the overall layout If we use a banner as an example By default if you have a title some text and an image then your banner will looks like this using the Duke street skin that comes with a new install 22 Zenario User Manual 7 0 5 City news The latest news from around your city a Nd O You are able to choose a variety of different frameworks To do this go to the plugin options drop down and choose Framework amp CSS SENE et i M R gt slot sall slot Side_2 T Ww Banner City news Banner Eh T l zenario_banner zenario banner default style City nev The latest Plugin properties Framework amp CSS m Move plugin Show a different plugin on this content item Remove plugin An admin box will appear within it there is a section called Framework here you can see the current framework being used and a preview of the code for that
5. expect them Plugins As mentioned earlier in this chapter a plugin can be generated from modules that output visible content on the front end When a plugin is inserted onto a page it is inserted into a s ot A slot is an area on a layout that plugins can be inserted into Once in the slot the plugin can display something or provide some functionality with which a visitor can interact Zenario User Manual 7 0 5 When inserted a plugin exists on either the single content item it is on or on the layout that the content item is using You will learn about layouts later in this chapter When inserted a plugin can take two forms A plugin can be stored in the library A plugin can be version controlled Plugins stored in the plugin library come complete with their settings It holds its own content irrespective of the content item on which it is used If used on multiple pages and a setting is changed it will change on all of the pages it is used on Version controlled plugins are like place holders that indicate a plugin is inserted in a given slot they have no actual content The content of a version controlled plugin comes entirely from the content item on which it is used Creating a plugin This section of the user guide will talk you through how to create a banner plugin that is stored in the plugin library adding it to a content item viewing and editing its content and moving it on the page When complete it w
6. have access to your server file system you can edit framework files or make new ones You may wish to make minor changes to a framework as soon as you save your changes to a framework file they become live if the framework is used More advanced users may wish to create their own Frameworks 25 Zenario User Manual 7 0 5 How to specify a CSS class in a plugin It is possible to specify a CSS class in a plugin in order to change the look and feel of the front end output Choose the Framework amp CSS option for the plugin i ND AY E Y E Ra i i LI a 2 I Nm i f lt 7 B s r I x t 4 columns 348px slot small slot Side_2 Banner City news Banner zenario_ banner zenario banner default style City nev The latest Plugin properties Framework amp CSS Ww Move plugin Show a different plugin on this content item Remove plugin You will then see that there is a section called CSS classes which will list existing classes There is also a text box at the bottom which allows you to input your own classes CSS classes zenario_banner zenario_banner__default_style zenario_banner banner_masthead zenario_banner example class Add CSS classes by picking existing ones from the list or by writing your own in the text box A designer can add new styles to this list by editing the zenario custom templates grid templates skin
7. Core modules Content types Managing modules i Banner zenario banner Pluggable modules in i abs zenario breadcru ery View this module s plugins u Common Features zenario common pog Confidential User Documents zenario user dodq MN ta Content Summary List zenario_content Click Create a plugin and follow the same process as mentioned in the Creating a plugin section above 16 Zenario User Manual 7 0 5 Create a plugin City news Banner Home page banner Masthead Side banner Once you have made your new banner return to the front end of your website go to the Layout tab then click the multi coloured edit icon on the company logo banner and click Show a different plugin on this layout 3 columns 249px slot small slot Top_l Image Container Logo 3 layouts zenario image container logo Plugin properties Framework amp CSS Move plugin Show a different plugin on this content item Hide plugin on this content item Show a different plugin on this layout Remove plugin from layout Select the new banner you made and click insert 17 Zenario User Manual 7 0 5 Properties Framework amp CSS View v Actions w m City news Banner E Home page banner Masthead 2 0 m f Side banner Your new logo will now appear in this slot on the layout ZENARIO As you can see in the admin toolbar information 4 content items are using this layout Nav
8. and its ID number as well as how many content items use that layout are shown in the toolbar You will also notice that a different set of slots will now be highlighted such as the previously inaccessible company logo and the long masthead banner This is a simple content page Lorem ipsum dolor sit amet consectetuer adipiscing elit Aenean commodo ligula eget dolor Aenean massa l Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus Donec quam felis ultricies nec pellentesque eu pretium quis sem Nulla consequat massa quis enim Donec pede justo fringilla vel aliquet nec vulputate eget arcu In enim justo rhoncus ut imperdiet a venenatis vitae justo Nullam dictum felis eu pede mollis pretium Integer tincidunt Cras dapibus Vivamus elementum semper nisi Aenean vulputate eleifend tellus Aenean leo ligula iporttitor eu consequat vitae eleifend ac enim Aliquam lorem ante dapibus in viverra quis feugiat a tellus 15 Zenario User Manual 7 0 5 Inserting a plugin on the layout Inserting a plugin on the layout is a very similar process to adding to the content item In this example we want to replace the company logo banner with a new banner on the layout Firstly make your new banner which can be done in Organizer Modules gt All modules and then click on the banner folder icon Manage modules and their plugins All modules Custom modules
9. arch zenario advanced search Anonymous Comments zenario anonymous comments Comments zenario comments Content Notifications zenario content notifications Content Summary List ProBusi X zenario content list probusiness Content Type Audio zenario ctype audio Content Type Event zenario ctype event Cookie Consent Status zenario cookie consent status CRM form integration zenario crm form integration Currency manager zenario currency manager Once on this screen you can search for the module you are looking for in the quick search box For this example the module Location Manager has been entered in the search box Once the desired module has been found highlight it and click Start module in order to initialize it pod Modules filtered Q Location Manager All Uninitialized Running Suspended Start module Zenario User Manual 7 0 5 Directory class name The Location Manager can be used to model any kind of location in the real world For example you can use it to store the locations of customers individuals important buildings venues for events With Location Manager you can create a Location with a name a street address contact details and a Google mar Each Location can optionally be linked to a Content Item You can use this feature to create an HTML Page or an Directory Name zenario location manager Path home simonc dev Zenario 7 0 5 zenario modules zenario location manager Status Uninitialized Dep
10. e features of Zenario Other modules are optional and can add certain management functionality such as the Location Manager module which provides the ability to create and manage locations on your website Certain modules can generate an output that is visible on a web page for site visitors Modules that do this are called pluggable modules These Modules can be used to generate plugins which can be inserted onto a web page The Modules area in Organizer allows you to easily view each type of running module and its functionality Modules Manage modules and their plugins All modules Custom modules Core modules Content types Managing modules Pluggable modules Plugin library Zenario User Manual 7 0 5 Initializing and running a module Some modules will uninitialized be default that is to say that they are turned off and will need to be activated initialized in order to provide functionality To initialize a module in Organizer go to the modules area and click on All modules You will then see some filtering options next to the quick search box Click on Uninitialized to display the correct list Modules iy Modules filtered Manage modules and their plugins Q All Uninitialized Running Suspended All modules Custom modules Core modules Content types Name Directory class name Managing modules 5 lid Access Key Map zenario access key map Pluggable modules Plugin library Advanced Se
11. endencies Country Manager Dependents Revision 142 The start module screen will appear where you have the option to choose the permission type for the module either Grant yourself permissions to use the module Grant all site administrators permission Do not grant any permissions Starting the module Location Manager A Start the module Location Manager This module uses its own set of permissions Grant myself the permissions needed to use this module Start module Click Start module Zenario User Manual 7 0 5 The module will then appear in the list of running modules m Language Picker zenario language picker Running vf MN Location Manager zenario location manager Running Menu Horizontal zenario menu Running Note A module may add new icons to the left hand admin menu icons within existing sections tabs or fields to existing admin boxes or a range of other features A Module may add any of the following create new navigation areas in the left column of Organizer create features in existing parts of Organizer define new content types create its own database tables and insert data add to the Admin Toolbar of the visitor front end add tabs to floating admin boxes in the front or Organizer create its own Settings panels Modules can create a well integrated environment with features delivered where an administrator would most intuitively
12. erted logo Diagnostics w Help html 2 not found html 3 no access html 4 second page html 5 news Version controlled plugins Version controlled plugins are inserted into a given slot A version controlled plugin exists in its slot on a layout and has a given appearance via CSS but otherwise contains none of its own settings or content Thus you might think of it as a window or wire frame through which content is viewed The content of the version controlled plugin is tied into the content item and specifically to a given version of that content item Each time you create a new version of a content item the version controlled plugin data is updated and linked to that specific version You can think of a version controlled plugin as being a placeholder for content it s a kind of window whose position on a web page is predetermined but what appears through the window comes from an individual content item Putting a version controlled plugin on a layout To put a version controlled plugin on a layout you must firstly be on the layout tab in the admin toolbar choose and empty slot and click on the icon You will now see a few different options of the types of version controlled plugins that you can insert highlighted in the red box 20 Zenario User Manual 7 0 5 Insert a Banner Insert a Content Summary List Insert a Document Container Insert a Google Map Location Insert a Image Container Inser
13. framework 23 Zenario User Manual 7 0 5 Framework image then title then text default The selected framework file is displayed below editing may be available via your server s file system 1 lt div class banner wrap div class banner wrap outer div class banner wrap inner If an image has been set then show the image if Image X div class banner image if Image Link Href a Image_Link_Href Target_Blank gt endif img src Image_Src alt Image_Alt title Image_Title I RolLlover_Images if Enlarge_Image span class banner image zoom title Enlarge this image trans gt X endif X if Image Link Href lt a gt endif lt div gt endif You can choose a different framework by using the drop down list There are another two frameworks setup for this plugin X image then title then text default title then image then text title then text then image w editing may be available via 1 lt div class banner wrap div class banner wrap outer div class banner wrap inner If an image has been set then show the image if Image X div class banner image if Image Link Href lt a Image_Link_Href Target_Blank gt endif If choosing title then image then text the banner will look like this on the front end 24 Zenario User Manual 7 0 5 Note If you
14. ge image in floating box Content Item Nothing selected Once clicked you will see an Organizer screen There you can choose the content item from the list and click Choose b amp L server time 12 26 15 You will then see the chosen content item in the plugin settings Destination No link Link to a Content Item Link to an external URL Enlarge image in floating box Content Item html 5 news Not Published You will also notice another tab at the top of this window called Title amp HTML It is here that you can display some text on the banner that will show to the site visitors 10 Zenario User Manual 7 0 5 You can add a title some sub text in the HTML box and a link to read more if you wish For the purpose of this banner however just title will be used Title amp HTML Title City news Title heading tags Heading 2 HTML e ww B Z JI Font Sizes Paragraph More link text Click save and your new banner plugin is now saved in the library Usage on lay Usage on ite y Home page banner Masthead Side banner b L QO server time 12 34 00 11 Zenario User Manual 7 0 5 Click Insert plugin to put the banner into the empty slot on the page HOME ABOUT NEWS Home About This is a simple content page Lorem ipsum dolor sit amet consectetuer adipiscing elit Aenean commodo ligula eget dolor Aenean massa Cum sociis natoq
15. hat is managed by the module will be retained while the module is suspended If you wish to delete the module s data and restore the module to its factory defaults you should reset the module To reset a suspended module to its default settings select the module and under Actions click Uninitialise and delete data ue Modules filtered Q All Uninitialized Running Suspended View Y Actions w Start module A WARNING Take great care when resetting a module Modules may hold a considerable amount of data and all such data will be lost when you perform a reset Tip You can use the Start module button to restore the module and its data back to your site 28 Zenario User Manual 7 0 5 Summary This chapter has covered a lot of ground modules are a central concept of Zenario and you have learned how to install them administer them and work with them You have learned about plugins the front end incarnation of a module Plugins can be inserted into a slot either stored in the library or as a version controlled plugin Version controlled plugins work as placeholders in which you can edit module specific settings or content while plugins saved in the library have self contained content You have been introduced to layouts an important structural feature of Zenario that allows you to determine the configuration and styling of sections of a site Both kinds of plugins can be installed on the layout level and y
16. igate Layout Edit layout Change skin Organize layout View v Show empty slots Show grid Help Layout LO1 Text heavy Used on 4 Content Item s But how do we find out which content items this new logo has appeared on Go to Organizer Modules Plugin library you can then see that the My logo is being used on one layout 18 Zenario User Manual 7 0 5 Modules IBBI Plugin Library Manage modules and their plugins Q All modules Custom modules Properties Framework amp CSS View w Actions v Delete Core modules Content types Usage on layouts wy Usage on items y Managing modules a RE NR Pluggable modules Plugin library City news Banner Footer Menu Home page banner Language Picker 3 Logo 2 mu Masthead 2 0 iE Recent pages 1 0 IE Responsive Menu 3 0 You can see further information by going to view and then Layouts using this plugin Framework amp CSS View v Actions Y Delete View image Layouts using this plugin ity news Banner Items using this plugin Effective usage ooter Menu ome page banner Highlighting the layout that appears and choosing View Content items using this layout Layout properties Edit layout View v Actions Y HTML source Content items using this layout d List of slots HTML in head of page HTML at foot of page 19 Zenario User Manual 7 0 5 You will then see the four content items on the layout that are using the newly ins
17. ill look like the below enean massa quam felis de justo fringilla 5 pretium Integer nean leo ligula f ugiat a tellus i ies nisi vel eT E gt ellus eget am quam nunc onec vitae sapien Zenario User Manual 7 0 5 To begin go to the page that you would like the banner on Go to the Edit tab and then click the Show empty slots button v Categories v Layout y View v Locking Show empty slots Show grid All of the unused slots on the page will now show Hover your mouse over an empty slot and click on the icon and choose Insert plugin from library 4 columns 348px slot small slot Side_2 Insert plugin from library Ww Zenario User Manual 7 0 5 You will then see a list of all of the running modules with library plugins As we want to use a banner click on the folder icon next to Banner pod Running modules with library plugins filtered Uninitialized Running Suspended Q All View all plugins Banner A View this module s plugins m Content Summary List Ne n y Document Container a ap B Footer Menu uU a Forms Va Google Map Location Wi 7009 P Directory class name zenario_banner zenario_breadcrumbs zenario_content_list zenario_document_container zenario_footer zenario_user_forms zenario_google_map You will then see all of the banners in the library We want to make a new one so click on Create a plugin
18. ou ve learned about the controls in the admin toolbar for determining those placements You have seen how you can move a plugin from one slot to another and how to change its styling using the framework picker Finally you have seen the administrative tools that let you view the various styles of a module and how to access its Frameworks the HTML like code that determines the layout of a plugin in its slot 29
19. s duke street description yaml file 26 Zenario User Manual 7 0 5 Suspending a module If you wish to suspend a module and any associated plugins go to Organizer Modules locate the module in the panel select it and then click on Suspend module Modules ue Modules filtered Manage modules nd their plugin and their plugins Q All Uninitialized Rumning Suspended All modules View Y Actions w Custom modules Core modules Suspend module Content types i Managing modules E Pluggable modules pod En Google Map Location zenario google map Plugin library Lt in Image Container zenario image conta NM in Language Picker zenario language pi HIM jr MN in Menu Horizontal zenario menu MN in Menu Responsive Multilevel zenario menu respo While suspended the following things will happen None of the administration interfaces that the module has created will appear and you will not be able to interact with any of the module s data The functionality of the module will not be available to other modules For modules that have plugins that appear on visitor facing pages the plugins will not appear this will affect published web pages The module will the appear in the suspended modules list pog Modules filtered Q All Uninitialized Running Suspended Directory class name Location Manager zenario location manager 27 Zenario User Manual 7 0 5 Resetting a module Data t
20. t a Raw HTML Snippet Insert a Slideshow 2 Insert a WYSIWYG Editor Insert plugin from library Click on the plugin you would like to insert a banner will be used for this guide After you click insert you will see that the slot has no content 4 columns 348px slot small_slot Side Banner zenario_banner zenario_banner__default_style Move Banner Remove Banner from layout In order to add content to the plugin you must then go to the edit tab in the admin toolbar 21 Zenario User Manual 7 0 5 Titl Navigate Men vi v2 draf He Actions w Categories wv NC v View Locking Hide empty slots Show grid Help Version 2 Draft created by Simon Chambers simonc 09 26 today sit amet consectetuer adipiscing elit Aenean commodo ligula massa Cum sociis natoque penatibus et magnis dis 4 columns 263px ascetur ridiculus mus Donec quam felis ultricies nec slot small slot side 2 etium quis sem Nulla consequat massa quis enim Donec el aliquet nec vulputate eget arcu Banner zenario banner us ut imperdiet a venenatis vitae justo Nullam dictum felis paucitas apad ee onis m Integer tincidunt Cras dapibus Vivamus elementum Edit contents admin box Ww vulputate eleifend tellus Aenean leo ligula porttitor eu Edit title amp HTML inline ifend ac enim Aliquam lorem ante dapibus in viverra quis E lla ut metus varius laoreet Quisque rutrum Aenean You can then
21. ue penatibus et magnis dis parturient montes nascetur ridiculus mus Donec quam felis ultricies nec pellentesque eu pretium quis sem Nulla consequat massa quis enim Donec pede justo fringilla vel aliquet nec vulputate eget arcu In enim justo rhoncus ut imperdiet a venenatis vitae justo Nullam dictum felis eu pede mollis pretium Integer tincidunt Cras dapibus Vivamus elementum semper nisi Aenean vulputate eleifend tellus Aenean leo ligula porttitor eu consequat vitae eleifend ac enim Aliquam lorem ante dapibus in viverra quis feugiat a tellus City news Phasellus viverra nulla ut metus varius laoreet Quisque rutrum Aenean imperdiet Etiam ultricies nisi vel augue Curabitur ullamcorper ultricies nisi Nam eget dui Etiam rhoncus Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero sit amet adipiscing sem neque sed ipsum Nam quam nunc blandit vel luctus pulvinar hendrerit id lorem Maecenas nec odio et ante tincidunt tempus Donec Viewing and editing a plugin s settings Now that the banner is on the page you can view or change any of its settings Stay in Edit mode and hover your mouse on the banner you will see that a multi coloured icon appears Click it and select Plugin properties 12 Zenario User Manual 7 0 5 City news Banner zenario_banner zenario banner default style Plugin properties Ww Framework amp CSS Move plugin Show a different plugin on this
Download Pdf Manuals
Related Search