HTML Template to GravCMS, Part 3

Initial Theme Conversion


This page is a continuation from HTML Template to GravCMS Part 2, Project Setup

Theming Page Content

Now that we have the basic structure of the page laid out to match our source, we turn to the individual page content.

Fix broken links

If you open a dev console in your browser (F12), you may notice some 404's as Grav attempts to load various assets. Let's fix those now

For fonts, we'll need to edit THEME_ROOT/css/fontawesome-all.min.css. Toward the end of the file, replace ../webfonts with ../fonts/fa

There are some broken images in the featured.html.twig file. To fix this temporarily, we'll change each image source to include the theme's url location:

<a href="#" class="image"><img src="{{ theme_dir}}/images/pic08.jpg" alt="" /></a>

Go ahead and reload the page after your changes to ensure no other links are broken.

Dynamic Page Content

Right now, our page content is hard-coded within the base template, which isn't very useful for a CMS. We'll want our default.md type of content to fill in this generic page type.

Within base.html.twig, we'll edit our Content Section to look like the following:

<!-- Content -->
  <section>
  {% block content %}
    {{ page.content }}
  {% endblock%}
  </section>

We'll edit THEME_ROOT/templates/default.html.twig so it will contain our page heading:

{% extends 'partials/base.html.twig' %}

{% block content %}
    <header class="main">
        <h1>{{ page.title }}</h1>
    </header>
    {{ page.content }}
{% endblock %}

After a page refresh, you should now see the default Grav content within the content area.

Featured Pages

The sidebar has a section titled "Ante interdum". I decided to change it to be a featured article section. Page authors can add a taxonomy category "featured", and the latest of those pages will show a teaser in this section.

In THEME_ROOT/templates/partials/featured.html.twig, we'll create a sorted twig collection of pages matching this taxonomy, showing only the latest 3. Note also the change in the h2 title. We surround the entire section with a comparator just in case there aren't any featured pages yet.

{% set featuredPages = page.collection({'items':{'@taxonomy':{'category': 'featured'}},'order': {'by': 'default', 'dir': 'asc'}}).remove(page).slice(0,3) %}
{% if count(featuredPages) > 0 %}
<section>
    <header class="major">
            <h2>Featured</h2>
    </header>
        <div class="mini-posts">

.
.
.
        </div>
</section> <!-- End of featured Section -->
{% endif %}

Now we'll create a loop to process each of the pages:

{% for p in featuredPages %}
            <article>
                <a href="{{ p.url }}" class="featured-title"><h2>{{ p.title }}</h2></a>
                {% if p.header.primaryImage %}
                    {% set image = p.header.primaryImage|first %}
                    <a href="{{ p.url }}" class="image">{{ p.media[image.name].html("",p.title) }} </a>
                {% endif %}

                <p>{{ p.summary(100)|raw }}</p>
            </article>
        {% endfor %}

Theming Content Recap

Read on for more in this series "HTML Template to GravCMS":

Previous Next