Introducing Tina4 Content Management System

Tina4 CMS is a module written with Tina4. Here is what you get out of the box:

  • Page driven CMS - Each page can be a landing for content
  • Articles - Articles can be categorised and displayed on pages
  • Snippets - little HTML pieces you can reuse
  • Article Categories - These double up as menus and categories

Getting Started

The beauty of working with the Tina4CMS is you can build your own site in a matter of minutes as it only needs a tiny SQLite database to start with and you have all the Tina4 power out of the box.

Run each of these commands individually to get the Tina4CMS installed and running: 

composer require tina4stack/tina4cms
composer exec tina4 initialize:run

Database Connection

Once you have that installed you need to add into your index.php file a database connection. Your index.php should look as follows: 

<?php
require_once "./vendor/autoload.php"; //Load all the libraries
  
//Initialize the database
global $DBA;
$DBA = new \Tina4\DataSQLite3("test.db","", "", "d/m/Y");
  
//Create a new config
$config = new \Tina4\Config();
  
//Run the Tina4 engine
echo new \Tina4\Tina4Php($config);

Run CMS

Once you have installed the required files and created your database connection in your index.phpfile, run the following command in your terminal to spin-up a Web-Server. 

composer start

Now that you have the Web-Server running then you will be able to run the Tina4CMS by going to https://localhost:7145/cms/login in your browser, to setup your initial user.

Landing Page

The Tina4CMS Module will have a page called “home” in the CMS as your starting page

Create/Customize Landing Page

To customize your landing page, make a base.twig file in your /src/templates folder.

You can create the file as you would a HTML file but will require to add twig tags and blocks. Here's an example: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ title }}</title>
    <meta prefix="og: https://ogp.me/ns#" property="og:title" content="{{ title }}"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:type" content="website"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:url" content="{{ url }}"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:image" content="{{ image }}"/>
    <meta prefix="og: https://ogp.me/ns#" property="og:description" content="{{ description }}"/>
{% block headers %}
{% endblock %}
</head>
{% block body %}
<body>
{% block navigation %}
    {% include "navigation.twig" %}
{% endblock %}

{% block content %}
{% endblock %}

{% block footer %}
{% endblock %}
</body>
{% endblock %}
</html>

If you're logged in, here is another method you could use to customize your the existing base.twig in the Tina4CMS: 

{% extends "@tina4cms/base.twig" %}

{% block headers %}
    <link rel="stylesheet" type="text/css" href="/src/templates/css/default.css">
{% endblock %}

{% block body %}
<body>
    <div class="content">
{% block navigation %}
    {%  include "navigation.twig" %}
{% endblock %}

{% block content %}
{% endblock %}
    </div>
</body>
{% endblock %}

You could also use the above method on normal twig files located in your /src/templates directory.

Create/Customize Navigation

To customize your navigation menu, make a navigation.twig file in your /src/templates folder. Here's an example of a navigation: 

{% set menus = Content.getMenu("") %}
<nav>
    <ul>
        {% for menu in menus %}
            <li><a href="{{ menu.url }}">{{ menu.name }}</a>
                {% if menu.children %}
                    <ul>
                        {% for childmenu in menu.children %}
                            <li>
                                <a href="{{ childmenu.url }}">{{ childmenu.name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>

Including Snippets

Tina4CMS works dynamically thus there are two ways you can include snippets using Tina4CMS.

For example if you created a Snippet in the CMS and want it to be parsed, use the raw filter when you want to have scripts or other things included correctly. Here is an example of including a Snippet: 

{{snippetName | raw}} or {{snippetName}}

Including Snippets as variables

Here is a method you can use to include Snippets as variables: 

{{ include(getSnippet("snippetName")) }}

Here is a method you can use to include Snippets as variables in your home file: 

 {% set world = "World!" %}
  
{{ include (getSnippet("mySnippet")) }}

The result you will receive is: 

Hello {{world}}!

Adding an Article into a Page

Here is a method you can use to adding an Article into a Page: 

{% set articles = Content.getArticles ("", 8) %}
{% for article in articles %}{% include "snippets/medium.twig" with {"article": article} %}{% endfor %}
{% set params = {"tag": "all", "skip": 4, "limit": 4, "template": "medium.twig"} %}
{% include "load-more.twig" with params %}

Overwriting the default CMS twig namespace to your own namespace

CMS_TWIG_NAMESPACE=""
Powered by ComboStrap