Ionize Doc Webdesigner

Ionize for WebdesignerIonize documentation

Contents

General information.......................................................................................................... 3License.............................................................................................................................................. 3

Requirements.................................................................................................................................... 4

Basic requirements........................................................................................................................................................4

Additional requirements............................................................................................................................................... 4

Ionize philosophy...............................................................................................................................4

Installation steps.............................................................................................................. 5Troubles after installation...................................................................................................................5

Server internal error...................................................................................................................................................... 5

Settings saving errors, no thumbnail creation.................................................................................................... 5

Content organization in Ionize............................................................................................6Languages.........................................................................................................................................6

Pages................................................................................................................................................ 6

Articles...............................................................................................................................................6

Media.................................................................................................................................................6

URL................................................................................................................................................... 6

Language detection........................................................................................................................... 6

How will the website be displayed by Ionize ?................................................................................... 7

Content displaying......................................................................................................................................................... 7

Standard URL.................................................................................................................................................................. 7

Reserved URL................................................................................................................................................................. 7

Themes........................................................................................................................... 8Create one theme..............................................................................................................................8

Create views......................................................................................................................................8

Steps................................................................................................................................................................................... 8

Default views....................................................................................................................................................................9

Tags and template language..............................................................................................................9

Single data object...........................................................................................................................................................9

Containers objects / Iterator.....................................................................................................................................10

Tags index........................................................................................................................................11

Website data...................................................................................................................................................................11

Languages.......................................................................................................................................................................11

Navigation....................................................................................................................................................................... 12

Current page.................................................................................................................................................................. 13

Articles.............................................................................................................................................13

Article filter : “with”....................................................................................................................................................... 14

Article date : “date”...................................................................................................................................................... 14

Media...............................................................................................................................................15

Other tags........................................................................................................................................16

Categories tags.............................................................................................................................................................16

Archives tag....................................................................................................................................................................16

General information

Ionize is a content management system (CMS) based on the PHP CodeIgniter framework.

The main purpose of Ionize is to make creation and content editing very easy for the web designer and for the content editor.

License

This software is released under the Open Source MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions :

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

THE SOFTWARE.

Requirements

Basic requirements

• PHP 5.2.0 or higher,

• MySQL,

• FTP access to your server.

Additional requirements

The PHP user also needs to have writing privileges on following folders:

Folder Description

/application/config/ The config files folder

/files/ User's media folders.

Writing rights must also be set to each subfolder

/themes/your_theme/config The theme config folder

/themes/your_theme/language Static translations files folder

Ionize philosophy

Website

In Ionize, the website is composed of :

• Content, stored in database

• One theme, containing display items

• Media files : pictures, videos, music, etc.

Theme

A theme defines how the content of a website will be displayed.

A theme is a folder containing all the website templates, assets and optional widgets used by the website. Themes are located in the themes folder.

View

A view is one file used to display data. This could also be called a “template”.

Common views are articles and page templates.

Their extension is .php, even they don’t use PHP but a template tag language.

Tag

A tag is a template language element used to display data easily. All tags start with the “ion” prefix.

Example of tag :

<ion:last_articles num=”3” paragraph=”1” />

This tag will display the last 3 articles list, with the first paragraph.

Installation steps

1. Copy the ionize zip package content to your server

2. Launch http://your-domain/install and follow the installation steps

3. Delete the /install folder after the installation is complete in order to use Ionize

Important : During the install process, you will create the admin account. This account will be mandatory to log onto the admin part of Ionize.

Troubles after installation

Server internal errorDepending on your server configuration, you should edit the .htaccess file and remove the comment before the line :

#RewriteBase /

Settings saving errors, no thumbnail creation...The server PHP user must have writing privileges on folders :

• /application/config/

• /themes/*

• /files/

http://your-domain/install

Content organization in Ionize

Ionize organizes content by language, pages and articles.

The entry point is the language, which will be detected when the user enter the website.

If no language was found, the default one will be loaded (en/english on a default installation).

Languages

Everything can be translated, from dynamic database stored data to "static" elements directly displayed in templates (such as company footers address).

Pages

Pages organize the content. They are used to build the navigation.

Pages can be nested, to create a multi-level navigation.

Pages are also containers used to display data or simply links to internal content or external URLs.

Articles

Articles contains the textual content.

An article can be a simple one or a blog post, depending on the way it is displayed.

Media

By media, we mean pictures, videos, files, music, everything which can be linked to an article or inserted in an article as inline content.

All data (articles text, media metadata, website metadata, etc.) can be translated to the defined languages.

URL

Ionize produces user-friendly URLs, containing the language code.

Example of an URL produced by Ionize :

http://www.my_domain.com/ en /my_page

Language detection

Language is detected through the following steps. At each step, if a language is found, detection stops.

1. Does the URL contains the language code ?

2. Is each of the browser (taken by ordering) language present in the website language definition config file ?

3. Use the default website language

How will the website be displayed by Ionize ?

Content displayingThe content (page / articles) will be displayed through “views”.

A view is a PHP file containing HTML and Ionize tags. Ionize tags are used to display the database stored content. See Tags and template languages for more about tags.

Views can be linked to pages and articles.

Standard URLThe URL will define what will be displayed.

Ionize displays pages, and articles in pages.

The language code is a part of the URL. It is still possible to create a one language website and not to display the language code in the URL. This choice will be achieve by views, which will not integrate the lang code in the URL.

Example of URL What will be displayed ?

www.my_domain.com/ The first page of the website, with the detected languages.

All produced links in this page will include the lang code in their URL.

www.my_domain.com/en/services The page named services, in english.

All articles in this page will be displayed as defined by the attached page view.

www.my_domain.com/services/web-design The article called web-design in the page services.

As no language is defined, the detected one or the default website language will be used.

Reserved URLSome URL display content in a special way. They're called “reserved URL”.

Important : No page or article can be named using these names, to avoid collision when detecting what should be displayed.

URI name Example URL What will be displayed ?

category http://www.my_domain/my-page/ category /xxx The articles list from category xxx in the page my-page

archives http://www.my_domain/my-page/ archives /2009/10

The articles list published in 2009/10, in the page my-page

Themes

All themes are located in the /themes/ folder.

Create one theme

Creating one theme is quite simple. You can copy one of the existing theme folder and start your work, or, if you want to start from scratch, create one folder in the themes/ folder and include at least the following folders :

Important : Never delete the /themes/admin folder. This theme is used by the admin back-end of Ionize.

Folder Description

my_theme/ Base folder of one theme. In this case, the theme is my_theme

assets/ Theme assets, like CSS and CSS images. Can be organized as you wish or named differently.

config/ Theme configuration files.

config/views.php : Contains the link between one physical template file and the Ionize displaying name in the admin part. This file is updated by the back-end, so there is no need to edit it.

language/ Contains the languages translation files, grouped by language code folder.

language/xx/my_theme_lang.php : One language “static” language elements translation file. Generated by the admin part of Ionize. See “Static languages in views” for more information about these elements.

views/ Contains views of the current theme

widgets/ All the widgets.

See Developer : Widget creation for more information about widgets.

Create views

Steps1. Create the view file

2. Declare the created view as page view or article view

3. Use it in the admin panel when editing page or article

To create a view, simply create a new PHP file in the /themes/your_theme/views folder or in a sub folder of this folder.

To use this view to display pages or articles, you have to declare this view through the admin panel :

1. Log on the admin panel and go to Settings → Theme...

2. Click on Current theme views list : You will see all views from your theme

3. In your view “Logical name” field, put the name you want to see appearing and select one type of view and save.

4. Check in one article / page : the view name will be available in the view list of the item.

Illustration 1 : View declaration in admin panel

Note : Some views do not have any logical name : It’s normal since they are not used for content editing but are used directly by tags.

For example : The “last_news” views is not declared and does not have to be declared as it is used by the tag “last_news”.

Default viewsEach theme contains default views.

These views are used to display content if no view is defined by the editor.

These files are stored in the views/default folder.

Mandatory default views :

page.php default view for each page

Article.php default view for each article

navigation.php default view for the navigation menu

categories.php default view for categories list block

archives.php default view for archives list block

last_articles.php default view for last_articles displaying

Tags and template language

Tags are used in views to display content from the database. They can display simple data as a string or nested data, depending on the tag properties.

Single data objectA single data object doesn't have any children. It contains the data.

Calling such a tag is quite simple.



<ion:meta_keywords />

Containers objects / IteratorA container object, or iterator, contains child data objects. Some containers needs to be displayed through views while others can be directly outputted to the view page.



<ion:last_articles num=”3” paragraph=”1” view=”articles/last_articles” />

The above example will display the last three articles with the view “my_last_articles”.

The file themes/my_theme/views/articles/last_articles.php must exist.

Example of content of the last_articles.php file :



<div class="result">



<ion:articles>



<h3><a href="<ion:url />"><ion:title /></a></h3>



<ion:content />

<!—Close the “foreach article” tag -->

</ion:articles>

</div>

Tags index

Tags usage :

<ion:parent_object_name attribute=”my_attribute”>

<ion:object_name />

</ion:parent_object_name>

They are available tags for:

• Website data

• Languages

• Navigation

• Current page data

• Articles

• Medias

Website data

Usage :

<ion:file_path />

TAG Description

file_path User’s media folder

theme Current theme

google_analytics Google analytics script as defined in the Ionizes Advanced settings

meta_keywords Website META KEYWORDS

meta_description Website META DESCRIPTION

site_title Title of the website

base_url Website base_url. Without the lang code.

LanguagesThese tags contains data about existing Ionize languages.

Usage :

<ion:languages>

<ion:lang /><ion:name />

</ion:languages>

TAG Parent TAG Description

languages Iterator for each language element.

lang languages Lang code, on 2 chars.

name languages Lang name

NavigationEach navigation item is a page. The designer will be able to display the data of each page in the navigation menu.

Usage example in a page views :

<ion:navigation level=”0” class_active=”active” view=”navigation/menu.php”>

In navigation/menu.php :

<ion:items>

<a class="<ion:class_active />" href="<ion:name />"><ion:title /></a>

</ion:items>

TAG Parent TAG Description Attribute Optional

navigation Navigation menu container level :

0 is the first level. “1” will show the subnavigation menu of the current 0 level displayed page

no

class_active :

The CSS class to use for the current visited menu item

Yes.

Default value : active

view :

the path to the view to be used to display the navigation

Yes.

Default value : default/navigation

items navigation Iterator for each navigation item

class_active items Current item CSS class. If the item is the current visited page, will be set to “active” (default value) or to the

“active_class” attribute value

name items The page name

title Items The page title

subtitle1 items The page subtitle 1

subtitle2 items The page subtitle 2

meta_description Items Page specific meta description

meta_keywords Items Page specific meta keywords

Current pageThese data concern the current displayed page

Usage in a page view :

<ion:title />


name The page name

title Items The page title

subtitle1 The page subtitle 1

subtitle2 The page subtitle 2

meta_description Page specific meta description

meta_keywords Page specific meta keywords

Articles

Usage in a page view :

<ion:articles >

<ion:article />

</ion:articles>

Notice : In the above case, each article will be displayed with its own view, depending on the attached view in the admin panel.

In one article view :

<h2><ion:title /></h2>

<p><ion:date format="d.m.Y" /></p>

<ion:content />

…


articles Articles iterator

article articles Article output. view Yes.

Overwrite the view set by the editor.

paragraph Yes.

Limit the displayed paragraph to the given number

with Yes.

Article filter.

type Filter articles with the given view name.

Must be the complete path to the view

title article Article title

subtitle1 article Article subtitle 1

subtitle2 article Article subtitle 2

pictures article Pictures iterator. See Media for details

date article Article date format Yes.

Article filter : “with”If only a field name is passed, it will display the article if this field is not empty.

You can also create advanced filter like :

<ion:article with=”views:!=article_toto” />

This will show only the articles with another view than article_toto

Article date : “date”Use the PHP date format to display the article date.

<ion:date format=”d” />

The above example will output the day as a number.

Have a look at : www.php.net/date/ for supported date format

Media

These media tags are available in containers :

• page

• article

Example in a page view :

<ion:pictures>

<img title="<ion:title />" alt="<ion:alt />" src="<ion:base_url /><ion:file_name />" />

</ion:pictures>

Each of the following described child tag is usable for the parents tags :

• pictures

• videos

• musics

• files


pictures Pictures iterator

videos videos iterator

musics musics iterator

files files iterator

base_path pictures / videos / musics / files

Base picture path.

file_name pictures / videos / musics / files

Media complete file name

copyright pictures / videos / musics / files

Media copyright

date pictures / videos / musics / files

Media date

link pictures / videos / musics / files

Media link

title pictures / videos / Media title

http://www.php.net/date/

musics / files

alt pictures / videos / musics / files

Media alternative text

description pictures / videos / musics / files

Media description

Other tags

These tags can be used on page views.

Categories tagsUsed to display a list of link with each category.


categories Display the pages articles categories list, depending on the languages.

class_active :

The CSS class to use for the current visited menu item

view :

the path to the view to use to display the categories list

Yes.

Default value : default/categories

category categories Iterator through categories

class_active category Current active item class

url category URL to the page which displays the articles by categories

title category Category title

Archives tagUsed to display a list of link to articles / period.


archives Display the pages articles archives periods as a list

class_active :

The CSS class to use for the current visited archive

view :

the path to the view to use to display the

Yes.

Default value : default/archives

archives list

format Yes.

PHP date Format of the month name. ‘F’ by default.

archive archives Archives items iterator

class_active archive Current active item class

url archive URL to the page which displays the articles by period

period archive Period, as specified by the format attribute

nb_articles archive Number of articles published in this period

Documents

Ionize Doc Webdesigner