why nextcms: layout editor
DESCRIPTION
NextCMS provides a visual, easy-to-use tool to edit, customize the layout of page.- Splitting the page into containers- Dragging and dropping widgets to the containers. You can move the widgets between containers- Setting CSS class or CSS styles to any containers, widgets- Applying filters to the main content pane or widgets to modify their output- Allowing cache any widgets on pageTRANSCRIPT
![Page 2: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/2.jpg)
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
![Page 3: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/3.jpg)
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
![Page 4: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/4.jpg)
We are going to create a page as the following
![Page 5: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/5.jpg)
Layout is organized by border containers
top container
center container
bottom container
![Page 6: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/6.jpg)
grid containers: placed inside border containers
left column
right column
grid container (2 columns)
![Page 7: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/7.jpg)
widgets, main content pane: placed inside grid column
menu
editor
search box
categories
banners
google adsense
menu
bread crumb
main content
url shortener
banners
comments
![Page 8: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/8.jpg)
Step 1: Splitting page to border containers
Method 1: right-click on node, choose Insert border container
![Page 9: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/9.jpg)
Step 1: Splitting page to border containers
Method 2: drag and drop containers
![Page 10: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/10.jpg)
Step 2: Inserting grid container
![Page 11: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/11.jpg)
Step 2: Setting the grid columns
![Page 12: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/12.jpg)
Step 3: Inserting widgets
Method 1: drag widget and drop on the target column
![Page 13: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/13.jpg)
Step 3: Inserting widgets
Method 2: drag widget and drop on the target node
![Page 14: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/14.jpg)
Step 4: Inserting main content pane
main content pane: the main content of page without widgets, such as
the content of article, etc.
![Page 15: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/15.jpg)
Drag and drop widgets/main content pane between grid columns
![Page 16: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/16.jpg)
It is also possible to insert tab containers
![Page 17: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/17.jpg)
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
![Page 18: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/18.jpg)
Applying filters to given element:
![Page 19: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/19.jpg)
Using available and/or additional filters
drag and drop to change filter’s
position
![Page 20: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/20.jpg)
Example of filter:
Slideshow - Showing a slideshow of all images taken from the content
![Page 21: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/21.jpg)
Example of filter:
Navigator - Creating a table of content based on headings
![Page 22: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/22.jpg)
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>
![Page 23: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/23.jpg)
Cloning layout by copying ...
![Page 24: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/24.jpg)
... and pasting
![Page 25: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/25.jpg)
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
![Page 26: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/26.jpg)
XML structure:
<?xml version="1.0" encoding="UTF-8"?>
<layout>
...
</layout>
![Page 27: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/27.jpg)
Inserting a border container
<layout>
<borderContainer region="top">
...
</borderContainer>
</layout>
region: top, bottom, left, right, center
![Page 28: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/28.jpg)
Inserting a grid container
<borderContainer region="center">
<gridContainer>
...
</gridContainer>
</borderContainer>
![Page 29: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/29.jpg)
Inserting a grid column
<gridContainer>
<zone cssClass="leftContainer">
...
</zone>
<zone cssClass="rightContainer">
...
</zone>
</gridContainer>
![Page 30: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/30.jpg)
Inserting a tab container
<zone cssClass="rightContainer">
<tabContainer>
<gridContainer title="Top viewed">
...
</gridContainer>
<gridContainer title="Top commented">
...
</gridContainer>
</tabContainer>
</zone>
![Page 31: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/31.jpg)
Inserting the main content pane
<zone cssClass="leftContainer">
<mainContentPane />
</zone>
![Page 32: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/32.jpg)
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>
![Page 33: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/33.jpg)
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>
![Page 34: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/34.jpg)
Defining a filter
<mainContentPane>
<filters>
<filter module="util" name="slideshow" />
<filter class="Util_Services_HiddenLink" />
</filters>
</mainContentPane>
![Page 35: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/35.jpg)
Importing layout from a XML file
![Page 36: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/36.jpg)
Exporting layout to a XML file
![Page 37: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/37.jpg)
Customizing the dashboard
dashboard: where displays the data you care most
Latest unactivated articles/comments
Latest unread private messages
Uncompleted todo list
etc.
![Page 38: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/38.jpg)
Customizing the dashboard
![Page 39: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/39.jpg)
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.
![Page 40: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/40.jpg)
Placing any widget at any position of article’s content
Example: inserting a poll inside the content
![Page 41: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/41.jpg)
Example: inserting a poll inside the content
![Page 42: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/42.jpg)
Example: inserting an album at the bottom of content
![Page 43: Why NextCMS: Layout Editor](https://reader033.vdocuments.net/reader033/viewer/2022052622/5593aa031a28ab4c068b461a/html5/thumbnails/43.jpg)
We listen to you!
On social networks
twitter.com/thenextcms
facebook.com/nextcms
youtube.com/thenextcms
slideshare.net/thenextcms
github.com/thenextcms