Dynamic page layouts

In this chapter, you'll learn how to create dynamic page layouts that change automatically when a staff user clicks on a check box on the Article Edit page. 

The example we show here features an Article Type with a custom switch 'breaking_news'. This custom switch can be added to the Article Type in the Newscoop administration interface. The journalist or editor then sees a checkbox for 'breaking_news' in the Article Edit screen, which they will click whenever they consider the story they are working on to be particularly important.

The result of a staff user clicking this checkbox can be detected in the template. Inside list_articles a constraint is added, collecting only articles where the custom switch called 'breaking_news' is turned on. If there's an article that fulfills that criteria, then it's listed. If not, the layout remains the same:

{{ list_articles length="1" ignore_section="true" order="bypublishdate desc" constraints="breaking_news is on" }}

That tells $gimme to list one article with the following constraints:

• Display articles regardless of the section they're in
• Present the articles in descending chronological order according to their published date
• Only display articles where the "breaking_news" custom switch is on

The whole template looks like this:

{{ list_articles length="1" ignore_section="true" order="bypublishdate desc" constraints="breaking_news is on" }}
<div id="breakingNews">
    <h3><a href="{{ uri options="article" }}">{{ $gimme->article->name }}</a></h3>
    {{ list_article_images length="1" }}
    <div id="breakingNewsLeft">
        <img src="{{ uri options="image width 435" }}" alt="{{ $gimme->article->image->description }}" />
        <p class="footnote">{{ $gimme->article->image->description }} {{ if $gimme->article->image->photographer }}(Photo: {{ $gimme->article->image->photographer }}){{ /if }}</p>
    </div>
    {{ /list_article_images }}
    {{ if $gimme->prev_list_empty }}
    <div id="breakingNewsLeft">
        <img src="/templates/images/breaking-news-{{ $gimme->language->code }}.jpg" alt="Breaking news" />
    </div>
    {{ /if }}
    <div id="breakingNewsCenter">
        {{ $gimme->article->publish_date|camp_date_format:"%M %e, %Y" }}
        <p>{{ $gimme->article->deck }}</p>
    </div>
</div>
{{ /list_articles }}

For more on using custom switches, see the chapter titled Topics, switches, keywords to structure content.