Guide 00 · Developer docs

Core dna for site builders

Read this guide first. Core dna is hosted, so there is nothing to install; your repository holds only templates and front-end assets; and a new kind of page starts in the admin, with a layout. In half a day, from what the platform is to a page you built, deployed and rendered in Smarty or Twig.

L0
Unit 03 · Your first page, end to end

Render the areas in both engines

Your first page, end to end Page 19 of 28 Updated

Replace the placeholder with markup that reads the areas: getAreaText() for plain text, getAreaHtml() for rich text, getAreaImage() for an image. The template in Smarty and in Twig, what each call returns when a field is empty or a name is wrong, and how to see the result.

Who this is for. A theme developer finishing the first page type. After this page the article renders its heading, image and body, and you will know the three area calls almost every template uses, in whichever engine your site has.

The template

Replace the placeholder in templates/pages/pages/article.html. The page the template is rendering is available as page, and also as record.

Template code templates/pages/pages/article.html 
{extends 'includes/frontend/base-template.html'}
{block 'content'}
  <main class="article">
    <h1>{$page->getAreaText('heading')|escape}</h1>
    {$page->getAreaImage('heroImage')->getResized(1200, 600, 'fit')->getHtml()}
    {$page->getAreaHtml('body')}
  </main>
{/block}
{% extends 'includes/frontend/base-template.html' %}
{% block content %}
  <main class="article">
    <h1>{{ page.getAreaText('heading')|e }}</h1>
    {{ page.getAreaImage('heroImage').getResized(1200, 600, 'fit').getHtml() }}
    {{ page.getAreaHtml('body') }}
  </main>
{% endblock %}

Commit, push the branch the development environment follows, and reload the page signed out. The heading, image and body you entered should appear.

The three calls

CallReturnsPrint it
getAreaText('heading')The area's text as storedEscaped: |escape in Smarty, |e in Twig. Neither engine escapes for you on Core dna
getAreaHtml('body')Rich text as HTML. For an image, component or collection area, its rendered HTML; for a file area, the file's pathAs it is: escaping it would print the tags
getAreaImage('heroImage')An image object: getResized(width, height, strategy) returns a resized copy, getHtml() its <img> tagThrough getHtml(), or build your own tag from its path, getPath()

The resize strategy fit scales the image and crops what is left over, so the result is exactly 1200 by 600 pixels without being distorted. The other strategies, and when to use each, are in Images in templates.

When a field is empty, or a name is wrong

  • An empty layout area prints nothing. If the layout area has default content, that is used instead.
  • An empty image area gives a blank image object rather than nothing, so the chain getResized(…)->getHtml() is safe and prints nothing.
  • A name the layout does not have, such as a typo, also prints nothing. When an area stays blank although the editor filled it in, compare the name in the template with the layout's, letter for letter.
  • getAreaText() on an area that is not text, an image say, prints Error: cannot get text content for area of type … on the page: use the call for that kind of area.

Area getters, by return type lists every call. The shorter form $page->heading is covered, with the cases where it surprises, in The area shorthand.

Go deeper
GuideThe area getters and what each costs GuideResizing, converting and rendering an image How-toAdd a layout area and render it in the template FAQMy template renders but every area is empty FAQAn image area renders nothing even though the author uploaded a file

Was this page helpful?

Your answer goes to the docs team.