09 - Passing Values to Embedded Templates
Embedded templates in ExpressionEngine are great for centralizing the storage of certain snippets of code; but sometimes - like with a Page Title - they need to display things that are unique to the page where they are being viewed. I’ve included the title tags in the embedded html_header template, which is great for centralizing our doctype and stylesheet link; but, I still want unique page titles for SEO & Bookmarks. How to have both? By using Embed Variables for the Embedded Template.
Chapter Overview:
- Passing a page title to embeds/html_header
- Using the site_name global variable
- Passing a location value to embeds/main_nav
- Updating Main Navigation Items
Passing a Page Title to embeds/html_header
There are two things I need to successfully pass a unique page title to embeds/html_header: the send and the receive. The send happens in the parent template - so first we’ll edit page-comps/index.
I need to edit the embed statement for the html_header to add a parameter that I’ll use to hold the desired page title. So this code:
{embed="embeds/html_header"}
Needs to be edited to:
{embed="embeds/html_header" my_title="Home"}
Note that the name of the parameter - my_title in this case - is user-defined. Call it my_page_title, the_page_title, page_title - whatever makes the most sense to you. Just make sure that you don’t inadvertently use one of ExpressionEngine’s Standard Global Variables.
Also, in this example I am specifying a bit of hardcoded text. But, as I implement this site, you’ll see that you can use any combination of static text, EE tags, etc. to build the my_title value that gets passed to embeds/html_header.
Save your changes to page-comps/index. Now let’s get the receive into place.
Open embeds/html_header for editing, and find this code:
<title>SAMPLE TEMPLATE</title>
I’ll do two iterations here - first just change that code to:
<title>{embed:my_title}</title>
Save embeds/html_header and load page-comps/index in your browser. You should have a page title of “Home” - or whatever you specified in page-comps/index.
But that’s not a great page title for SEO or bookmarks. The page title should really start with the site name, so rather than your church pages coming up in search results as “Ministries”, they’d come up with “My Church Name | Ministries”, etc.
Using the site_name Global Variable
I could just hardcode the church name into embeds/html_header, but let’s take advantage of the ExpressionEngine Standard Global Variable of site_name. As the docs mention, this variable pulls the value that you initially specified while installing EE, and resides at Admin > System Preferences > General Configuration > Name of your site.
So with embeds/html_header open for editing, change this code:
<title>{embed:my_title}</title>
to:
<title>{site_name} | {embed:my_title}</title>
Save your changes, and reload page-comps/index in a browser to see your work. Mine now renders as:
<title>Train-ee.com ExpressionEngine Church Site | Home</title>
Passing a Location Value to embeds/main_nav
In order to centralize our main navigation code, I need to do essentially the same thing - setup an embed variable send (from the parent template) and receive (in the embedded template).
I’ll do the send first as it’s the easy part. Open page-comps/index for editing and change this code:
{embed="embeds/main_nav"}
to:
{embed="embeds/main_nav" my_location="home"}
Again the variable name of my_location is one I’ve made up. Change yours to suit.
OK - now the trickier part. I need to go a bit further than simply displaying the value of the embed variable in the receiving template—I need to generate different HTML code depending on its value.
Look at the contents of embeds/main_nav, and look at that particular section of code in the other templates provided by ChristianTemplatesOnline.com. In order to achieve the main navigation style where the white translucent “stripe” stays visible for the section you are in and as a rollover for other sections there are two ways a link is coded.
The code for the link for the current section (and the visible white stripe) is:
<a href="index.html" class="current">HOME PAGE</a>
If it’s not the active section the code for that link needs to be:
<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><a href="index.html">HOME PAGE </a></div>
So what to do?
Use ExpressionEngine Conditionals.
I can use EE’s conditionals to have embeds/main_nav look at the incoming value of the embed variable “my_location” and choose what HTML code to generate depending on its value. This approach to building navigation was first published by Derek Jones in his Behind the Curtain - Part I post.
Here’s an example of the EE code I’ll need for one navigation item:
{if '{embed:my_location}'=="home"}
<a href="index.html" class="current">HOME PAGE</a>
{if:else}
<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'">
<a href="index.html">HOME PAGE</a>
</div>
{/if}
In this case the code is looking at the my_location variable for a value of “home”, and if that’s what the parent template has sent then the user must be on the site Home Page - so the active styling is applied. If my_location isn’t “home”, then the user must be somewhere else in the site so the Home Page link gets the rollover effect instead.
Note the important part here is that the send and receive values are the same - so make sure the value you put in the parent template is what you are looking for in the conditionals in your embedded template.
Now - all I need to do is copy that code for each main navigation item, changing what it’s looking for in “my_location” and link target.
Updating Main Navigation Items
Since I’ve determined that the main navigation, as the templates came with, isn’t quite right for our purposes, I’m going to take this opportunity to re-define the main nav as we established in chapter 3 of this series.
You’ll get the finished embeds/main_nav code in the companion files. But I do want to point out that I’ve removed all references to HTML files in the links, and have also used another EE Global Variable - homepage - in the link target of the Home Page main navigation item. This is a good idea, as usually you are building the site at a temporary URL that changes during site launch. Using variables in this way will help that launch process go off with fewer issues.
With this step done it’s a good idea to go back to page-comps/index and change the my_location variable to some of the others that you specified in embeds/main_nav. You should be able to save the change to page-comps/index, refresh the rendered page in your browser, and see the active state of the main navigation jump to the new section.
The Results
Here’s my updated site: http://church.train-ee.com/
With the changes covered in this post I’m nicely setup to start bringing in the rest of the template set, doing some additional chunking on the way, and setting some default page titles and navigation locations. Looking at the number of additional templates in this set, I think in the next installment I’ll go through, do the chunking, and just post an overview of the work. The basic principles and process are the same as what I’ve covered already, and I want to be able to move onto setting up weblogs and field groups to hold our content.
Cheers!
Category Navigation
Previous Comments
by Sean
Date: Saturday, July 12th, 2008
Comment: #2
embed variables == “useful”
I have an immediate use for this and will get on it later this evening. I had seen the docs, but didn’t “get it” until I read this post.
by tzTrainEE
Date: Sunday, May 4th, 2008
Comment: #1
Excellent write-up Michael.
The page titles are important to search engines.
It’s interesting the design so far does not have any Heading tags: H1, H2, H3, etc. for those to be accurate and contain keywords for the site is as important as having complete and accurate Title tags as filled in by the methods Michael has described.
This is not a criticism of the tutorial, just something to think about when building out your own site later on.
For example a standard thing to do is place the logo image in the header in an H1 tag, this will require changes to the CSS for sure.
A church site would have a predefined audience and regional importance anyways, so the site ought to show up nicely in the search indexes just by some references of the denomination, and city, state, county, etc. which will all be in the sites content anyhow.
These are all topics for another day, and way beyond the scope of the tutorials which is really rolling along now. It sounds like a good blog topic (note to self).
Thanks Michael previously of OozamalaK (one for the locals, lol)...
Full-speed Ahead!