Create one page : Views

Pages use views... But, what's a view ?Top of Page

Views are PHP file located in the folder /themes/your_theme/views/.

Views are a part of the website theme. They are used by the website to display the content.

Views files have the .php extension.

Pages and articles use views to be displayed.

Views and TagsTop of Page

A view displays the website content through tags.
We can also say that tags are used in views to display content from the database.

Each view file contains mainly HTML code and tags.
Tags retrieve data and are a quick and easy way to display them without writing PHP code.

All usable tags are documented in the Tags Reference part of the current documentation.

Kind of viewsTop of Page

They are 3 kind of views :

View typeDescription
Page views Linked to one page through Ionize.
Used to display all pages elements :
  • Pages meta data : Website title, page title
  • Medias linked to the page
  • Partials views, like header or footer
Article views

Linked to one article or to the "Article's views" of one page.
Used to display all articles fields.

Partial views These views are used as partial block in other views, for repeating content.
For example, if the header of the website is always the same, you will create an "header.php" view and include it in a page view.

Since Ionize 0.9.9, articles views are not really used anymore.
Pages views are enough to build most of the websites without the need of using dedicated articles views. The more views you use, the more complex will be the edition of the website. Keep it simple !

Activate pages and articles viewsTop of Page

Pages and Articles views need to be activated in order to use them in the Page and Article panels of Ionize (to link these views to pages or articles).

To activate views :

  • In Ionize, go to : Settings > Theme... : This panel shows the views PHP files. 
  • For each view, set a logical name, and set the type ("Article" or "Page").
  • Save
  • Edit one page : The view will be available in the Options > Attributes > Views select box.

Create one page viewTop of Page

Basically, one page view displays the navigation, the current page content (title, medias, etc.) and loops through the articles linked to the current page.

A page view can also displays articles from another page, even this other page has no URL or is not in the navigation menu of the website.

A page view can also include other views, called "partial" views.

What we will do

We will create one basic Home page for the theme called "my_theme".

This home page will :

  • Call 2 partial views : header and footer,
  • Display basic page data
  • Loop through the articles of the current page
  • For each article, display the linked pictures

1. Create the "header" view

In the folder /themes/my_theme/views/ :
Create the file called "header.php" and add the following code :

<!DOCTYPE html>
<html lang="<ion:current_lang />">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Website title : Will display the page or article's meta title or the site title if not set -->
    <title><ion:meta_title /></title>

    <meta name="description" content="<ion:meta_description />" />
    <meta name="keywords" content="<ion:meta_keywords />" />

    <!-- The "style.css" file will be located in /themes/my_theme/assets/css/ -->
    <link rel="stylesheet" type="text/css" media="all" href="<ion:theme_url/>assets/css/style.css" />
</head>

<body>

<!-- Languages menu -->
<ul class="lang">
    <ion:languages no_helper="true" active_class="lang_active">
        <li>
            <a href="<ion:language:url/>" class="<ion:language:code/>" title="<ion:language:name/>"></a>
        </li>
    </ion:languages>
</ul>

<!-- Main Navigation menu -->
<ion:navigation level="0" tag="ul" class="navigation" active_class="active" />

<!-- Breadcrumb -->
<a href="<ion:base_url lang="true" />"><ion:lang key="home" /></a> &nbsp;&#8250;&nbsp;<ion:breadcrumb level="1" />

This header will be called by each page of the website.

It will display :

  • Basic website's data, such as title, meta_description. For more information, see Website meta tags
  • The languages menu. For more information, see the Language Tag reference
  • The navigation menu. For more information, see the Navigation Tag reference
  • The breadcrumb. For more information, see the Breadcrumb Tag reference

2. Create the "footer" view

In the folder /themes/my_theme/views/ :
Create the file called "footer.php" and add the following code :

</body>
</html>

Of course the footer could be more complex, but for this example, this simple one is enough.

3. Create the "home_page" view

In the folder /themes/my_theme/views/ :
Create the file called "home_page.php" and add the following code :

<!-- This includes the header view -->
<ion:partial view="header" />

<!-- Display the page title -->
<ion:page:title tag="h2" />

<!-- Display the page subtitle, if one is set -->
<ion:page:subtitle tag="p" class="gray" />

<!-- Loop through the articles of the current page
  <ion:page:articles>

    // Displays the article title
    <h3><ion:article:title /></h3>
 
    // Displays the article content
    <ion:article:content />

    <!-- Display the article's resized pictures -->
<ion:article:medias type="picture" size="300,200" >

    <img src="<ion:media:src />" alt="<ion:media:alt />" />

</ion:article:medias>

</ion:page:articles>

<!-- This includes the footer view -->
<ion:partial view="footer" />

4. Link the view to one page

  • In Ionize, go to : Settings > Themes...
  • For the file "home_page.php", set the logical name to "Home" and the type to "page"
  • Save
  • Edit your home page or create one new page
  • Select the view "Home" in the view list

The page uses now the view home_page to display its content

To display the page's articles, you need to create some articles linked to this page.