How to create a blog using content collections

Before we begin be sure to update your developer-kit to the newest version.

1. Create the file bootstrap.php inside your template-folder

Insert your custom content structure defining $data['collections']. This file is only for designing the template and to have some dummy-data to show. In this case we use a title, intro, body and a image.

$data['collections'] = array(
        'blog' => array(
            array(
                'slug' => 'example',
                'text:title' => 'Lorem ipsum dolor sit amet dolorem.',
                'textarea:intro' => 'Lorem ipsum dolor sit amet dolorem.',
                'textarea:body' => 'Lorem ipsum dolor sit amet dolorem.',
                'image:image' => 'example.png',
            ),
            array(
                'slug' => 'example',
                'text:title' => 'Lorem ipsum dolor sit amet dolorem.',
                'textarea:intro' => 'Lorem ipsum dolor sit amet dolorem.',
                'textarea:body' => 'Lorem ipsum dolor sit amet dolorem.',
                'image:image' => 'example.png',
            ),
        )
);

2. Code and test your template offline with the template-kit

We create a file called blog.html inside the pagesfolder. In the left column we are using the function get_collection('blog', {'group_by': 'month'})to get a nice menu of the blog-posts organized by months.

<div class="col-md-3">
    <ul>
    {% for item in get_collection('blog', {'group_by': 'month'}) %}
        <li>
            <a href="{{ site_url('blog?month=' ~ item.cmonth ~ '&amp;year=' ~ item.cyear) }}">{{ item.cmonth }}-{{ item.cyear }} ({{ item.count }})</a>
        </li>
    {% endfor %}
    </ul>
</div>

<div class="col-md-9">

    {% if request.get.single %}

        <!-- Single -->
        {% set single = get_element(request.get.single) %}

        <div class="blog-item">
            <h2>
                {{ single['text:title'] }} <small>{{ single.created_at|to_formatted_date }}</small>
            </h2>
            {{ single['textarea:body']|raw }}
        </div>

        <a href="{{ site_url('blog') }}" class="button blue">&lt; Voltar</a>

    {% else %}

        <!-- List -->
        {% for item in get_collection('blog', {'paginate': true, 'limit': 5, 'month': request.get.month, 'year': request.get.year}) %}
            <div class="blog-item">
                <h2>
                    {{ item['text:title'] }} <small>{{ item.created_at|to_formatted_date }}</small>
                </h2>
                
                {{ host_img(item['image:image'], 'medium') }}
                {{ item['textarea:intro']|raw }}

                <a href="{{ site_url('blog?single=' ~ item.slug) }}" class="button blue">Ler mais</a>
            </div>
        {% endfor %}

        {{ get_collection_pagination() }}

    {% endif %}

</div>

To get the blog shown we'll need to create a page (Go to 'More' -> 'Pages') in the admin and give it the slug blog.

Then we tell twig where to find the newly created blog.html file. We will edit page.html to achieve this:

{% extends _layout %}

{% block content %}

{% if page.slug in ['blog'] %}

    {% include 'pages/' ~ page.slug ~ '.html' %}

{% else %}

    {{ page.content|raw }}

{% endif %}

{% endblock %}

Tip: Test the blog calling index.php?p=page&slug=blog

3. Define the config for the admin

Create a file named settings.json and define the collection 'blog'.

• name: Name of the content-collection
• listing: The field to use at the listing view of the collection. Default is text:title
• fields: Array of fields. Click here for a list of examples.

{
    "collections": {
        "blog": {
            "name": "Blog",
            "listing": "text:title",
            "fields": {
                "text:title":     {"label": "Titulo"},
                "textarea:intro": {"label": "Intro", "rich": true},
                "textarea:body":  {"label": "Completo", "rich": true},
                "image:image":    {"label": "Imagen"}
            }
        }
    }
}

4. Ready

Now you can zip everything up, upload your template and create or edit blog-posts in in 'More' -> 'Content'