Why NextCMS: Layout Editor
0 likes1,294 views
NextCMS is a free and open-source content management system developed by Nguyen Huu Phuoc, designed for ease of use by both end-users and developers. The document details the features and steps for utilizing the layout editor, including creating border and grid containers, inserting widgets, and applying filters to customize content. It also explains the ability to import and export layouts via XML and offers customization options for dashboards and content placements.
![ Inserting a widget
<zone>
<widget module="content" name="articles"
title="Latest articles">
<params>
<param name="data_source">
<value><![CDATA[...]]></value>
</param>
<param name="template" value="list" />
<param name="limit" value="4" />
<param name="category_id" value="__AUTO__" />
</params>
</widget>
</zone>](https://image.slidesharecdn.com/whynextcms-layouteditor-120701221655-phpapp02/85/Why-NextCMS-Layout-Editor-32-320.jpg)
Why NextCMS: Layout Editor
- 1. Layout Editor Present by Nguyen Huu Phuoc, Founder of NextCMS thenextcms@gmail.com
- 2. NextCMS is a content management, built on top of zend framework, dojo toolkit, and jquery It is free and open source software This slide tell you one of many reasons why you should choose NextCMS instead of other one
- 3. We need a Layout Editor (or Template Builder, or whatever you say) which is: Easy to use for both end-users and developers Easy to customize the layout of page
- 4. We are going to create a page as the following
- 5. Layout is organized by border containers top container center container bottom container
- 6. grid containers: placed inside border containers left column grid container (2 columns) right column
- 7. widgets, main content pane: placed inside grid column menu editor bread crumb search box main content categories url shortener banners banners google adsense comments menu
- 8. Step 1: Splitting page to border containers Method 1: right-click on node, choose Insert border container
- 9. Step 1: Splitting page to border containers Method 2: drag and drop containers
- 10. Step 2: Inserting grid container
- 11. Step 2: Setting the grid columns
- 12. Step 3: Inserting widgets Method 1: drag widget and drop on the target column
- 13. Step 3: Inserting widgets Method 2: drag widget and drop on the target node
- 14. Step 4: Inserting main content pane main content pane: the main content of page without widgets, such as the content of article, etc.
- 15. Drag and drop widgets/main content pane between grid columns
- 16. It is also possible to insert tab containers
- 17. We need to mofify the content, such as: Replace special characters with emotion icons in the article’s content Replace bad word with pre-defined characters in the article’s content Create a slideshow consisting of all images taken from the article’s content etc. Content modifiers are called as FILTERS
- 18. Applying filters to given element:
- 19. Using available and/or additional filters drag and drop to change filter’s position
- 20. Example of filter: Slideshow - Showing a slideshow of all images taken from the content
- 21. Example of filter: Navigator - Creating a table of content based on headings
- 22. Setting id, class, style attributes for div tags that show layout elements <div class="container top_container" id="topContainer" style="height: 30px; width: 100%"> ... </div>
- 23. Cloning layout by copying ...
- 24. ... and pasting
- 25. It is possible to define the layout in a XML file: Template providers can package the template with pre- defined layouts Community can share the layout with each other Administrator can backup and restore the layout
- 26. XML structure: <?xml version="1.0" encoding="UTF-8"?> <layout> ... </layout>
- 27. Inserting a border container <layout> <borderContainer region="top"> ... </borderContainer> </layout> region: top, bottom, left, right, center
- 28. Inserting a grid container <borderContainer region="center"> <gridContainer> ... </gridContainer> </borderContainer>
- 29. Inserting a grid column <gridContainer> <zone cssClass="leftContainer"> ... </zone> <zone cssClass="rightContainer"> ... </zone> </gridContainer>
- 30. Inserting a tab container <zone cssClass="rightContainer"> <tabContainer> <gridContainer title="Top viewed"> ... </gridContainer> <gridContainer title="Top commented"> ... </gridContainer> </tabContainer> </zone>
- 31. Inserting the main content pane <zone cssClass="leftContainer"> <mainContentPane /> </zone>
- 32. Inserting a widget <zone> <widget module="content" name="articles" title="Latest articles"> <params> <param name="data_source"> <value><![CDATA[...]]></value> </param> <param name="template" value="list" /> <param name="limit" value="4" /> <param name="category_id" value="__AUTO__" /> </params> </widget> </zone>
- 33. Styling page elements: id, cssClass, cssStyle attributes <borderContainer region="top" id="topContainer"> <gridContainer cssStyle="border: 1px solid #ccc"> <zone cssClass="leftContainer"> <widget module="..." name="..." cssClass="searchBoxContainer"> </widget> </zone> </gridContainer> </borderContainer>
- 34. Defining a filter <mainContentPane> <filters> <filter module="util" name="slideshow" /> <filter class="Util_Services_HiddenLink" /> </filters> </mainContentPane>
- 35. Importing layout from a XML file
- 36. Exporting layout to a XML file
- 37. Customizing the dashboard dashboard: where displays the data you care most Latest unactivated articles/comments Latest unread private messages Uncompleted todo list etc.
- 39. Have you ever wished? Place a poll inside an article’s content Place a photo slideshow at the end of article’s content Place a Google Adsense banners inside an article’s content etc.
- 40. Placing any widget at any position of article’s content Example: inserting a poll inside the content
- 41. Example: inserting a poll inside the content
- 42. Example: inserting an album at the bottom of content
- 43. We listen to you! On social networks twitter.com/thenextcms facebook.com/nextcms youtube.com/thenextcms slideshare.net/thenextcms github.com/thenextcms Email thenextcms@gmail.com
- 44. nextcms.org nextcms.tv © 2012 Nguyen Huu Phuoc thenextcms@gmail.com