Intro

Content pages are added and managed via the CMS and a pages folder in your directory will contain the show.liquid template that queries and outputs the content to the page.

The show page

To get started, create a show.liquid file in your pages directory. A combination of the page and CMS drops are called to get attributes of a page, as such there’s numerous fields you can output.

Some very common outputs are as follows:

{{cms_page.title}}
{{cms_page.promo_content}}
{{cms_page.content}}
{{cms_page.category}}
{{cms_page.uri}}

<img src="{{cms_page.promo_asset | url_for_generic_image : "_x_" }}">
<img src="{{cms_page.image | url_for_generic_image : "_x_" }}">
<img src="{{cms_page.hero_asset | url_for_generic_image : "_x_" }}">

Tip: use the _x_ filter to compress the image and to reduce the file size.

Content blocks

Regularly used on content pages (but also elsewhere on a theme), content blocks allow dynamic insertion of content on an agency by agency basis. A number of stock content blocks exist (e.g the footer block), but you can also create your own and output where required. Log on to your agency admin and navigate to /configure/website/content/content/list to see the full list.

Content blocks are called by name and in their most basic form are rendered out to a page as follows:

{% content_block a_nice_content_block %}
 {% if content_block %}
  <div data-content-id="{{ content_block_id }}" data-content-type="site_content_chunks">
    {{content_block}}
  </div>
 {% endif %}
{% endcontent_block %}

Each time the content block tag is used it will yield the following variables:

  • {{content_block}} - a pre-rendered content. If the content block includes an image that will be placed in an img tag. If a URL is provided, the entire chunk will hyperlinked.

  • {{content_block_found}} - a boolean used for testing if the content block is found

  • {{ content_block_title }}

  • {{ content_block_text }}

  • {{ content_block_url }}

  • {{ content_block_id }}

The content-id and content-type data attributes are used to link the content chunks to the relevant Logos page for editing.

And to retrieve the full image path:

<img src="{{ content_block_image | url_for_generic_image}}" />

Finally, one other useful function is to test for the chunk and output some kind of alternative:

{% content_block cms_sidebar %}
 {% if content_block %}
  {{ content_block }}
 {% else %}
  alternative output
 {% endif %}
{% endcontent_block %}

Theme content blocks

When you want to define your own content blocks, this is where theme content chunks come in. Your first step here is to make the Homeflow backend aware that there is a chunk available. To do this we use the theme’s YAML file:

 site_content_chunks:
  - name: 'cms_sidebar_content'
    description: 'A custom sidebar content section for CMS pages.'

Once your theme gets publised, you can then navigate to your agency admin, visit /configure/website/content/site_content_chunks, and add your content chunk for the agency with any associated HTML/content etc.

To marry any page to one or more of the blocks you have created and populated with content, we can loop over the content items of the CMS page:

{% for content_item in cms_page.content_items %}
 {% content_block content_item %}
  {{ content_block }}
 {% endcontent_block %}
{% endfor %}

You can associate a page with a chunk by navigating to the page on the CMS or direct using the following link: /configure/website/content/pages/9381/site_content_chunks (replace the ID with the page ID if known).

Multiple content blocks

In some cases it’s useful to be able to define a content block multiple times:

{% content_block 'ad_unit' multiple:true %}
 {% for block in content_blocks limit: 3 %}
  <h3>{{block.content_block_title}}</h3>
  <img src="{{block.content_block_title}}"/>
 {% endfor %}
{% endcontent_block %}

In this case, content_block_found will be true if more than zero content blocks have been found. Additionally an array of content block objects will be returned.

Geo Content blocks

Geo content blocks are those containing a lat/lng pair. Any objects which respond to #lat or #lng can be used to query for content blocks near that area. For instance, to get all ‘ad_unit’ content blocks near a set location on a page like brighton-and-hove/brighton/sales:

{% content_block 'ad_unit' multiple:true location:location %}
 {% for block in content_blocks limit: 3 %}
  <h3>{{block.content_block_title}}</h3>
  <img src="{{block.content_block_title}}"/>
 {% endfor %}
{% endcontent_block %}

Alternative page layouts

Sometimes theme content managed pages are vastly different to one another. This makes constructing the layout tricky in the CMS, as well as in the page template itself. To get around this, Ctesius allows you to specify alternative templates for nominated pages.

Your first port of call is to add some directives to the YML file:

 additional_layouts:
  - name: 'Tabbed'
  - name: 'Sell_Let'
  - name: 'Contact'

The backend CMS then reads this file and adds the templates to the page layouts dropdown at the foot of the edit page. Next, you need to add the template into the layout folder so it can be used. For the tabbed layout, we would have tabbed.liquid.

The only caveat with specifying alternative templates is that you have to build the page from scratch with any dependencies - much like the application.liquid file in many ways. Effectively you can just take a copy and include the custom section as an include. This is strongly recommended to make the page layout maintainable.