Code, ExpressionEngine, EE Tips

Why You Should Use Low Variables on Your ExpressionEngine Builds

I've been using Low Variables on all of my ExpressionEngine builds for the last couple of years and I think you should be too. Low Variables (LV) is basically the swiss army knife of ExpressionEngine addons, a multipurpose tool that will allow you to do more with less. It is a commercial addon but for what you get the $49 price tag is well worth it.

The one part of LV that I use on every site is the ability to edit variables (textarea type) as flat files. Now your important variables with template code are able to be version controlled and editable in your favorite text editor. I set the file path to be the same as my tempalte folders. You can set this in the settings for LV in the CP or if you are using the FocusLab multi environment set up then you can add the following lines to your config.master.php which will set both your regular template path and LV flat files.

    
    
      // add-on themes path
	$env_config['path_third_themes'] = $base_path . '/addons/themes/';
	$env_config['url_third_themes'] = $env_config['base_url'] . '/addons/themes/';
	// add-on system path
	$env_config['third_party_path']    = $base_path . '/addons/system/';
 
	// low variables
	$env_config['low_variables_save_as_files'] = 'y';
	$env_config['low_variables_file_path'] = $base_path . '/templates/';

Low Variables also allows you to hide variables from non managers. I set the managers group to super admin and hide all template code variables from other users. Other settings in the CP that I use are:

Clear Cache "Yes"
Enable Early Parsing "Yes before snippets"
Add member data to early parsed variables "no"

Enabling Early parsing is useful because we can now on a per variable basis set the variable to be early parsed. This allows you to use EE code and pass variables through to your files as you would with an embed. The bonus here is that there is less overhead than with embeds which speeds up your site. Many sites split up repeatable content into embeds using {embed="includes/_nav"} or {embed="includes/_doctype_header" meta_title="foo bar"} Where the variable meta_title is passed to the embedded content. The same approach can be used with LV but with less overhead.

In your template you would have the following code:

    
    
      {exp:low_variables:single var="lv_doctype_header"
	preparse:pre_meta_title="Some Page Title Here"
	}
<body>
	code here
</body >

Then in your low variable lv_doctype_header you would have the following code where you can see that the page title is now using {pre_meta_title}:

    
    
      <html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{pre_meta_title}</title>
</head>

I put all of the above style template code into a group called Developer Variables and all variables inside this group are hidden from non super admins. Remaining variables are then put into groups depending on the section they belong to. I will typically have a Homepage, SEO, and Miscellaneous group. If another section of the site has several variables then that section will also get it's own group of variables.

On the homepage many sites have a home slider and I make this a low variable using the matrix field type. This matrix has four cells:

image-upload "File"
slide-title "text"
slide-text "text"
slide-link "text"

The template code looks like this:

    
    
      {exp:low_variables:pair var="lv-home-slider"}
	<li &#123;if row_count=="1"}class="active"&#123;/if}>
	{if slide-text}	
		{exp:ce_img:pair src="{image-upload}" width="650" height="392" alt="image"}
			<img src="{made}" alt="" width="{width}" height="{height}" />
		{/exp:ce_img:pair}
		<div class="text-holder">
			<strong class="title">{slide-title}</strong>
			<p>{slide-text}</p>
			<a href="{slide-link}" class="more">read more</a>
		</div>
	{/if}
	{if slide-text ==""}
		{exp:ce_img:pair src="{image-upload}" width="950" height="392" alt="image"}
			<img src="{made}" alt="" width="{width}" height="{height}" />
		{/exp:ce_img:pair}
	{/if}
	</li>
{/exp:low_variables:pair}

On another site I just finished a landing page for one section needed to have a grid of four items with custom copy for the title, short blurb and thumbnail, but link to an interior page on the site. I set this up again with Low Variables and a matrix. This time the matrix had a minium of 4 rows and a maximum of 4 rows set. There were four cells, the playa cell could easily be a "select entries" field which comes with Low Variables. The code for this is below.

sector_title "text"
sectory_copy "text"
sector_link "playa"
sector_image "file"

    
    
      {exp:low_variables:pair var="lv-investment-sectors"}
<div class="col-md-3 col-sm-6 invest-grid" data-match-height="invest-grid">
	<a href="/about/detail/{sector_link}{url_title}{/sector_link}"><img src="{sector_image}" alt="..." class="img-circle"></a>
	<h3><a href="/about/detail/{sector_link}{url_title}{/sector_link}">{sector_title}</a></h3>
	<p>{sector_copy}</p>
	<a href="/about/detail/{sector_link}{url_title}{/sector_link}" class="more-icon"></a>
</div>
{/exp:low_variables:pair}

The SEO group is set up to handle landing pages where SEO description and meta title is not available in a channel entry. I've previously written about this on my post SEO and ExpressionEngine.

In conclusion Low Variables allows you to effiently code your site using DRY code and provides a clean easy to use interface for your clients to edit various bits of copy around the site that don't necessarily belong in a channel. My clients have all been very happy with the intuitive and easy to use interface that Low Variables provides them. For the developer, you are able to use snippets and global variables by setting the parse early option on a per variable basis and edit those variables as files, thus allowing you to have your code version controlled and easy to edit.