6

What is the best way to create a category listing page where the category name is used in both the <head> and <body> tags?

This is what I have at the moment:

<!DOCTYPE html>
<html lang="en">
<head>
    {exp:channel:category_heading channel="news"}
        {if category_name}
            <title>{category_name} - News - {site_name}</title>
        {if:else}
            <title>Archive - News - {site_name}</title>
        {/if}
    {/exp:channel:category_heading}

    {common-page-head}
</head>
<body class="news-listing listing">
    {exp:channel:category_heading channel="news"}
        <h1>{category_name}</h1>
        {if category_description}
            <p>{category_description}</p>
        {/if}
    {/exp:channel:category_heading}

    {exp:channel:entries channel="news"}
        <article class="news">
            <h2>{title}</h2>
            {body}
        </article>
    {/exp:channel:entries}
</body>
</html>

Whilst this works, is it bad to have the {exp:channel:category_heading} tag twice on the same template? (i.e. excess queries).

Is there a way to place the page title into a temporary variable which can then be reused to avoid performing the same queries multiple times?

5

For the title in the head I'd use Low Title:

<title>{exp:low_title:category url_title="{segment_n}"} - News - {site_name}</title>

Assuming you're looking to just list the category and its description for the article below, for the body you can just use Channel Entries and Low Seg2Cat:

{exp:channel:entries channel="news" category="{segment_n_category_id}"}
{categories}    
    <h1>{category_name}</h1>
    {if category_description}
        <p>{category_description}</p>
    {/if}
{categories}
{/exp:channel:entries}
  • Low Title will actually accept URL titles, so he could forgo Low Seg2Cat altogether and just use <title>{exp:low_title:category url_title="{segment_N}"} - News - {site_name}</title>. – Derek Hogue Dec 5 '12 at 20:07
  • Good point, updated the code. don't forget to vote – Stuart McCoy Dec 5 '12 at 20:14
6

I can think of a couple solutions for you.

Low Seg2Cat

Since you're only using the category name in the title in the <head>, you could very easily use Low's excellent Seg2Cat extension. I use it on nearly every site, and it's great for grabbing all of your basic category metadata based on categories found in URL segments.

Assuming your url structure is something like example.com/template/category/blue, you could simply use {segment_3_category_name} in your title tag to output the displayed category name.

Stash

A more complicated method, which I frequently use as well is the Stash method. This would require that your header is added using an {embed=""} tag or that you're following the Stash Template Partials Method. I won't go into a ton of detail about how this would work, but basically within your one {exp:channel:category_heading ...} tag pair, you would use the Stash tags to set a variable containing the category title, which could then be output in your embedded template.

Example category template:

{embed="inc/header"}

<body class="news-listing listing">
    {exp:channel:category_heading channel="news"}
        <h1>{category_name}</h1>
        {if category_description}
             <p>{category_description}</p>
        {/if}
        {exp:stash:set_value name="category_title" value="{category_name}"}
     {/exp:channel:category_heading}

    {exp:channel:entries channel="news"}
         <article class="news">
            <h2>{title}</h2>
            {body}
         </article>
    {/exp:channel:entries}
</body>

Example head template:

<!DOCTYPE html>
<html lang="en">
<head>
    {if {exp:stash:not_empty name="category_title"}}
        <title>{category_title} - News - {site_name}</title>
    {else}
        <title>Archive - News - {site_name}</title>
    {/if}

    {common-page-head}
</head>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.