PHP in templates

My presentation slash workshop was about using PHP in templates, but also covered EE’s template parse order. Prior to the presentation, I dove right into EE’s template class and created a little cheat sheet as a handout people could refer to during my talk. I think it went fairly well and judging from the feedback I’ve read and heard, my audience felt the same way. Here are the slides, if you haven’t already seen them on SlideShare:

Next up

The next EECI conference will be held, like the first edition, in my home town Leiden. Robert already cooked up some excellent speakers and there will also be a so-called DevDay on October 1st (also my birthday, coincidently). What will happen on the DevDay is yet to be announced, but one thing’s for sure: I’ll be there eating cake.

Of course, the best way to explore a foreign country is with the help of the locals. So here’s what I thought would be fun… Why not ask some fellow web geeks if they mind having me and my girlfriend over? I think it would be a fantastic way to meet people and see the country.

To be precise, we will be traveling through California from June 3rd till June 17th, and we would love to stay one or two nights. Drop me an email if you live somewhere around or in between SF and LA and you’re up for it: low@loweblog.com

Template tags

The secret lies in Low Variables’ template tags: {exp:low_variables:parse}. Apart from parsing variables early (like path.php vars) or late (like user defined template vars) in the parsing order, you can parse Low Variables using the template tags, which allows you to do extra stuff apart from just a simple string replace.

For example, in the case of multiple valued variables, you can loop through the values. This means you could create a simple navigation menu that your users can manage.

Create a Select variable

First you need to create a variable with type Select. In this example, we’ll name the variable low_site_menu. You can turn early parsing off, since we’re going to use the template tags to parse it. In the Options field, we’ll add the menu items, putting each item on a new line and separating paths and labels with  : . For example:

/ : Home
about-us : About us
services : Services
news : News
contact : Contact
pages/copyright : Copyright

Next, we’ll allow multiple values to be selected and select the Drag and drop lists as interface. This means your user can turn off any menu item, as well as sort them in a preferred order.

Edit your template

In your template, add the following code:

<ul id="nav">{exp:low_variables:parse var="low_site_menu" multiple="yes"}
  <li><a href="{path="{value}"}">{label}</a></li>{/exp:low_variables:parse}
</ul>

That’s it! You could even enter full urls as values and omit the {path=""} variable, so external menu items are possible as well. This approach is very efficient; I compared it to using a {exp:weblog:categories} tag instead, and saved up to 3 queries per request, depending on caching settings.

Custom header image

In this example, we’ve defined the default header image in a CSS file. We’ll override that by adding a <style> block to our templates. But first, we need to create a variable with type ‘Select Files’. Let’s name the variable {my_custom_header}. Select the upload destination(s) that the user can choose images from and check the ‘Allow uploads’ checkbox.

Then, just add this code to your templates:

<style type="text/css">
	#header {background-image:url({my_custom_header})}
</style>

Random masthead image

For a random image, create a similar variable, for example {my_custom_masthead}. Enable early parsing and allow for multiple files to be selected. We need early parsing to be enabled, because we’re using the variable as input for the Low Random plugin.

Here’s how it would look in our templates:

<img src="{exp:low_random:items}{my_custom_masthead}{/exp:low_random:items}" alt="" />

That’s all there is to it; custom and random images with Low Variables.

Multilingual sites in ExpressionEngine 1.6.x often use a Path.php variable to determine the current language. Something like this, perhaps:

$global_vars['country_code'] = 'es';

Let’s take this approach and apply it to Low Variables.

Create a variable for each piece of text that needs to be translated. Make sure Early Parsing is turned off for these variables. In my example, I created these: {low_snippets_payoff_en}, {low_snippets_payoff_es}, {low_snippets_footer_en} and {low_snippets_footer_es}.

Then, all you have to do in your templates, is add these variables, combined with the Path.php variable we made earlier:

<p id="payoff">{low_snippets_payoff_{country_code}}</p>

<!-- More code -->

<p id="footer">{low_snippets_footer_{country_code}}</p>

But don’t stop there; all static bits of text throughout your templates can be treated like this. Your users will hug you and send you flowers ’cause they can now edit them without the heartache!

Elwin and I have agreed that I will take over development for these add-ons. I’m not sure exactly when, but you can expect something like a Low Reeorder or Low Navigator in the near future. If you’re using any of Elwin’s add-ons and want to see them ported to 2.0, let me know, along with any feature requests. I’ll do my best to add a little Low-sauce while I’m at it. Thanks to Elwin for not letting his work wither and die — there’s a bottle of Pouilly-Fuissé here with your name on it, buddy!

Let’s take a look at the current home page of the sandbox site. There’s a heading that reads “Latest news”. Below that are two articles. There’s also a sidebar with some contact information. In order to customize the home page, we’ll need to add a couple of variables. Here’s what I added:

• {low_home_heading}: to edit the heading. Variable type: Text Input.
• {low_home_categories}: so the user can select categories from which to pull entries. Variable type: Select Categories (see image below).
• {low_home_status}: so the user can select the statuses of entries to show. Variable type: Checkbox group.
• {low_home_limit}: so the user can select how many entries are shown on the home page. Variable type: Radio group.
• {low_home_no_results}: the message shown if no entries match the given criteria. Variable type: Textarea.
• {low_home_sidebar}: option to show or hide the sidebar. Variable type: Checkbox.

{low_home_heading} and {low_home_no_results} do not need early parsing to be enabled, but the others do. They are used as input for the {exp:weblog:entries} tag in the template. {low_home_sidebar} is used as a global conditional. Here’s how the template might look:

<div id="content">

	<div id="primary">
		<h2>{low_home_heading}</h2>
		{exp:weblog:entries category="{low_home_categories}" status="{low_home_status}" limit="{low_home_limit}"}
			<div class="article">
				<h3>{title}</h3>
				{body}
			</div>
			{if no_results}
				<p>{low_home_no_results}</p>
			{/if}
		{/exp:weblog:entries}
	</div>

	{if low_home_sidebar == 'y'}
	<div id="aside">
		<!-- Sidebar here -->
	</div>
	{/if}

</div>

There you go! You can use Low Variables to customize your template tags without the heartache!

Say you want the company name, address and other contact data displayed on the site. Basically, this is vCard information, which you might want to re-use. On my sandbox site, I’m using the company name in the footer, the full address on the contact page, marked up using the hCard microformat, and the email address is also used as the contact form recipient.

In order to re-use the data properly, we’ll create four variables: {low_contact_fn}, {low_contact_street-address}, {low_contact_locality} and {low_contact_email}. I’m using the prefix low, so regular users can edit them. The middle part of the variable name, contact groups them in the same group (you might also want to check out my Introduction to Low Variables screencast on YouTube). I’ve changed the type of each variable to Text Input. For {low_contact_email}, I enabled Early Parsing (so I can use it as input for other tags) and I’ve added a regular expression to the Pattern field, so only valid email addresses can be saved.

That only leaves the template bit. Here’s how that might look:

<div id="footer">&copy; {current_time format="%Y"} - {low_contact_fn}</div>

<div class="vcard">
	<span class="fn">{low_contact_fn}</span><br />
	<span class="street-address">{low_contact_street-address}</span><br />
	<span class="locality">{low_contact_locality}</span><br />
	<a class="email" href="mailto:{low_contact_email}">{low_contact_email}</a>
</div>

{exp:email:contact_form recipients="{low_contact_email}"}
	<!-- the contact form -->
{/exp:email:contact_form}

That’s it! You can now use Low Variables to manage contact data without the heartache!

Birth

As most EE Add-ons, Low Variables was born out of necessity. I wanted to give regular users access to the User Defined Global Variables, without giving them access to the Templates section. Basically, I’d be giving them the ability to edit static bits of content throughout the site. I asked if it was a good idea and I got enough response to go ahead with my plan.

Baby steps

Completely ignoring Paul Burdick’s advice, I just started coding, thinking it would be a small job. And it was, at first. I had a very basic version of what I had in mind up and running in no time. But then it hit me: with a bit more effort, I could take it a step further. And with even more effort, I could take it a lot further. Gotta love your own, self-induced scope creep.

Adolescence

Inspired by the most popular EE Add-on, I started to rebuild the basic structure of the module, allowing for Variable Types. Before I knew it, I had a handful of different Types and a setup that would allow for many more. Then it hit me again: people might pay for this. Brandon Kelly’s presentation at EECI2009 had already nudged me in that direction, so I decided I’d make this my first commercial add-on.

Adulthood, almost

Low Variables could well be the answer to Life, the Universe, and Everything EE, so I thought a price tag of 42 USD would be appropriate. However, it turned out that selling software online isn’t as easy as it seems, especially if you want to do it right for the Dutch/European tax laws. Eventually, I caved in and settled for a price in Euros instead: 29.75 (which, depending on the rates, is about 42 bucks).

So there you have it. Available today, for the bargain price of €29.75: Low Variables. An ExpressionEngine add-on that takes User Defined Global Variables, Fresh Variables and FieldFrame and puts them in a blender to make a shiny new smoothee.

Be gentle… It’s my first time

PayPal is used to handle the purchases and refunds are given within 30 days. Please note that, since it’s the first time I actually sell stuff online, things might not go as planned. If that’s the case, please let me know, and I’ll sort things out. As for support, I’m giving Get Satisfaction a go, so go there for bug reports, questions and ideas.

Future plans

The current version of Low Variables is compatible with EE 1.6.8. There will also be a 2.x compatible version available later. As soon as it is, a single license will allow you to use either the 1.6.8 or the 2.x compatible version, in the same way EllisLab is doing with EE 2.0 PB at the moment.

Many thanks to Brandon Kelly, Jamie Pittock, Erwin Heiser, Robert Eerhart and Albert de Klein for their help and suggestions.