Page Titles and Sitename for Collections and Blogs

What follows is really just an example of how I implemented Hussein Al Hammad's excellent tutorial called List, Detail and Beyond. His tutorial explains all the ins and outs on the below code. I just wanted to create a code snippet for future use.

In this example I created a Collection called Projects.

Page Head Template

/templates/layouts/global/01_page_head.php

Include the following code, replacing Collection details along with Template names.

<?php
  $sitename = perch_content_custom('Site Name', [
    'skip-template' => true,
    'return-html' => true,
  ])['html'];

  PerchSystem::set_var('sitename', $sitename);
  PerchSystem::set_var('page_title', perch_pages_title(true));
  PerchSystem::set_var('domain', 'http://'.$_SERVER["HTTP_HOST"]);
  PerchSystem::set_var('url', perch_page_url([], true));
  PerchSystem::set_var('twittername', '@granttransition');

  if(perch_layout_has('hide_sitename')) {
    PerchSystem::set_var('hide_sitename', true);
  }

  switch(perch_layout_var('meta', true)) {
    case 'project':
      perch_collection('Projects', [
        'template'   => 'projects/04_seo.html',
        'filter' => 'slug',
        'match' => 'eq',
        'value' => perch_get('s'),
      ]);
      break;

    case 'blog-post':
      perch_blog_post_meta(perch_get('s'));
      break;

    default:
      PerchSystem::set_var('page_title', perch_pages_title(true));

      perch_page_attributes([
        'template' => 'default.html'
      ]);
      break;
  }
?>

Create Collection Templates

templates/pages/projects/01_projects.php

<?php
  perch_layout('global/01_page_head');
  perch_layout('global/02_header');
  perch_content('Page Intro');

  perch_collection('Projects', [
    'template' => 'projects/02_list.html',
    'count' => 9,
    'paginate' => true,
  ]);

  perch_layout('global/03_footer');
?>

templates/pages/projects/02_project.php

<?php
  $project = perch_collection('Projects', [
      'filter' => 'slug',
      'match' => 'eq',
      'value' => perch_get('s'),
      'template' => 'projects/03_item_detail',
      'skip-template' => true,
      'return-html' => true,
  ]);

  if(isset($project[0])) {
      // exists - let's grab the title
      $page_title = $project[0]['title'];
      PerchSystem::set_var('current_page_title', $page_title);
  } else {
      // doesn't exist - let's redirect to the 404 page
      PerchSystem::redirect('/errors/404');
  }

  perch_layout('global/01_page_head', [
      'meta' => 'project',
  ]);

  perch_layout('global/02_header');

  // output the item
  echo $project['html'];

  perch_layout('global/03_footer');
?>

Collection Content Templates

My templates obviously include other templates as per Hussein's tutorial, however, as these are directly related to the 01_page_head, I thought I should show these. templates/content/projects/04_seo.html

<title><perch:content id="title"> - <perch:content id="sitename" type="hidden" /></title>
<meta property="og:site_name" content="<perch:content id="sitename" type="hidden" />">
<meta property="og:url" content="<perch:content id="domain" type="hidden" />/projects/<perch:content id="slug" />">
<meta property="og:title" content="<perch:if exists="og_title"><perch:content id="og_title" type="text" escape="true" /><perch:else/><perch:content id="title" /></perch:if>" />
<perch:if exists="short_desc">
<meta property="og:description" content="<perch:content id="short_desc" type="text" escape="true" />" />
</perch:if>
<perch:if exists="og_image">
<meta property="og:image" content="<perch:content id="domain" type="hidden" /><perch:content id="og_image" type="image" width="1200" />" />
</perch:if>
<meta property="og:type" content="project" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="<perch:content id="twittername" type="hidden" />" />
<meta name="twitter:title" content="<perch:if exists="og_title"><perch:content id="og_title" /><perch:else/><perch:content id="title" /></perch:if>" />
<perch:if exists="og_description">
<meta name="twitter:description" content="<perch:content id="og_description" type="text" />" />
</perch:if>
<perch:if exists="og_image">
<meta property="twitter:image" content="<perch:content id="domain" type="hidden" /><perch:content id="og_image" type="image" width="1200" />" />
</perch:if>
<meta name="twitter:url" content="<perch:content id="domain" type="hidden" />/projects/<perch:content id="slug" />" />

templates/content/projects/05_item_in_sitemap.html

<url>
  <loc>https://www.transition-creative.co.uk/projects/<perch:content id="slug" /></loc>
  <changefreq>monthly</changefreq>
  <priority>0.5</priority>
</url>

Blog Post Page

templates/pages/blog/post.php Include the following so that the blog post header is looking at the right meta template.

<?php
  perch_layout('global/01_page_head', ['meta' => 'blog-post']);
  perch_layout('global/02_header');
?>

templates/blog/meta_head.html

<title><perch:blog id="postTitle" /> - <perch:blog id="sitename" /></title>
<meta property="og:site_name" content="<perch:setting id="perch_blog_site_name" />" />
<meta property="og:url" content="<perch:blog id="domain" type="hidden" /><perch:blog id="postURL" type="hidden" />" />
<meta property="og:title" content="<perch:blog id="og_title" label="Social title" type="text" escape="true" />" />
<meta property="og:description" content="<perch:blog id="og_description" label="Social description" type="textarea" size="s" escape="true" />" />
<perch:if exists="og_image">
<meta property="og:image" content="<perch:blog id="domain" type="hidden" /><perch:blog id="og_image" label="Image when shared" help="Should be at least 1200x630" type="image" width="1200" />" />
</perch:if>
<perch:if exists="og_type">
<meta property="og:type" content="<perch:blog id="og_type" label="Facebook type" type="select" options="article,book,profile,website,video,music" allowempty="true" />" />
</perch:if>
<meta property="article:author" content="<perch:blog id="author_facebook" type="hidden" />" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="<perch:blog id="author_twitter" type="hidden" />" />
<meta name="twitter:title" content="<perch:blog id="og_title" label="Social title" type="text" escape="true" />" />
<meta name="twitter:description" content="<perch:blog id="og_description" label="Social description" type="textarea" size="s" escape="true" />" />
<perch:if exists="og_image">
<meta property="twitter:image" content="<perch:blog id="domain" type="hidden" /><perch:blog id="og_image" label="Image when shared" help="Should be at least 1200x630" type="image" width="1200" />" />
</perch:if>
<meta name="twitter:url" content="<perch:blog id="domain" type="hidden" /><perch:blog id="postURL" type="hidden" />" />

Create Collection in Perch

In Perch Admin, you now need to create the Collection matching the above details and Pages Routes.

Create a page for Projects

Under page Location, create a URL Pattern as follows:

projects/page/[i:page]
Create a sub-page for Project

Under page Location, create a URL Pattern as follows:

projects/[slug:s]/[preview:preview]

projects/[slug:s]

Thanks, as always to @husseinalhammad for his contribution to this process.

Wiki

Perch Resource Wiki / Collection Page Titles