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.

 
Download the EE Code for 09 - Passing Values to Embedded Templates

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
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 Entry   

Next Entry >>

 

Previous Comments

Picture of tzTrainEE

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!

Picture of Sean

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.

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, February 24th, 2009
Comment: #3

Sorry..I deleted the wrong comment.  Paul had asked:

wouldn’t it be more efficient to just determine current states, hover state, etc for the nagivation via the stylesheet instead of using connditional EE comments? I understand you may just be using conditions here for example, but since you’re already id’ing body tags, you could thus reference the nagivation links through the body tags in the css to style the current page link.


How would you measure efficiency in this case?

Using EE variables you save on stylesheet declarations, but have a few EE conditionals.

Using the CSS approach you save on EE conditionals but have a larger stylesheet.

Either approach works and is valid - use whichever you prefer. 

I prefer the EE approach, and don’t always have HTML that specifies body id tags.

Picture of Paul

by Paul

Date: Tuesday, February 24th, 2009
Comment: #4

Mike, thanks for the quick reply.

honestly, efficiently was probably the wrong word choice there. I guess I was merely thinking in terms of having to evaluate conditional statements which end up applying a style anyway vs. simply reading and applying the style.  You’re right though, it’s probably just more of a personal preference. For me, I’d prefer just styling the links direct from a stylesheet than having a number of ” if else ” conditionals (specifically in this example, since body id tags have been used already). but then, i’m very new to EE so my preferences could change ;)

Thanks again.

Picture of Nathan Horton

by Nathan Horton

Date: Thursday, April 30th, 2009
Comment: #5

Mike,

This technique is not working for me, and I’m sure it’s because I’m not doing something correctly.

I have put this code in my index template:
{embed=“embeds/html_header” page_title=“Home”}

I have put this code in my ‘embeds/html_header’ template:
<title>{site_name} | {embed:page_title}</title>

In the title bar of my browser it shows:

My Site Name | {embed:page_title}

What am I doing wrong? Do I need to create that global variable somewhere or is it automatically created?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, April 30th, 2009
Comment: #6

Should work.

It might be the quotes around the page_title value - make sure those are straight quotes and not smart quotes (which you’d get if you copied the code from a webpage etc).

The only other thing I can think of is if somehow the html_header template type was set to “static” - so then it wouldn’t parse the variable.

Picture of Nathan Horton

by Nathan Horton

Date: Thursday, April 30th, 2009
Comment: #7

Yep. The template type was set to static. My mistake. :-)

Thanks!

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, April 30th, 2009
Comment: #8

Aha!

‘Course - now my luck is shot for the day….

Picture of Richard

by Richard

Date: Monday, August 9th, 2010
Comment: #9

thanks to you, I can now pass my meat data to my html head section, but it surrounds the entry in P tags….. which field type should I use to stop this happening? as text input and text area both appear to do the same thing….

Thanks for all of your efforts putting these tutorials together, I simply would have no idea where to even start without them!!

Mike Boyink

by Mike Boyink (Author)

Date: Monday, August 9th, 2010
Comment: #10

That’s a formatting option set at the field level - so you can either go edit the field to choose a formatting option of “none”, or there are also plugins that strip the HTML at the template level. 

The latter is handier if you are re-using content that needs the formatting elsewhere.

Picture of Sarah

by Sarah

Date: Sunday, October 30th, 2011
Comment: #11

Nevermind on my last comment :) Apologize for my lack of reading throughly to see you addressed my questions on this next post.

Great articles! Very informative.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, October 31st, 2011
Comment: #12

No worries…I was waiting..;)

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>