No joke, this is an entirely new site, new installation of ExpressionEngine, new design, new everything. I did import all the old entries of course, dating all the way back to just a couple months before I married my beautiful wife. It feels so good to have a clean system, untainted from all my messing around and not knowing what I was doing with ExpressionEngine over the years.
<h2>Merge</h2>
The first thing to note is that I have merged by personal blog that has always resided on this website, with my tech blog from <a href="http://buzzingpixel.com">BuzzingPixel.com</a>. The reason for this is having a movie blog, a tech blog, and a personal blog felt a bit disjointed. I wanted to consolidate and try to refresh my personal "brand" so to speak. So, all non-movie related items that I want to write about go here. That means you're going to get all kinds of stuff on this blog and if you look back through the entries, you'll find all the old entries from BuzzingPixel as well as the old entries from my personal blog. No more distinction.
<h2>Design</h2>
I think it's important for me, as a <a href="http://www.caddis.co/team/tj-draper">professional web developer</a> to have a slick, good looking website. When I rolled out design iteration four (the previous design) of this site a few years ago, I received a fair number of compliments. But since that time, mobile devices have become ubiquitous, retina screens have become more prolific — I got a retina MacBook Pro and boy did that old, non-retina design look hideous — and the design in general had become quite dated. I wanted a new design that was super clean, lent itself more to reading, was retina and mobile friendly, and in general would make me proud of my own website. In addition, there was not much of a focus on the site for telling the world about me or my family. For the redesign, I wanted to address all those issues.
So, for starters, go ahead and grab the edge of your browser (if you’re reading this on a Mac or PC), and squeeze that window down small. You'll see that the site responds to the browser size (made possible by <a href="http://weepower.com/">Wee</a>!). If you're already reading this on a mobile device, then you'll see that the site looks great on your device. And I paired down the design to a few essential elements. It's clean, it's sharp (to me at least), and I like it.
<h2>Frequency</h2>
I really doubt this means that I'll post much more often — most of my free time is consumed by <a href="http://moviebyte.com/">MovieByte</a>. But I'm going to try to write something here at least once every couple of weeks (go ahead and mark down my failure prediction).
Well, that's pretty much it. It's new, it's shiny, and I like it. I worked hard on it with late nights and weekends and if you think it looks cool, feel free to let me know. If you don't like it, well, remember how hard I worked on it and keep your opinions to yourself! (Kidding... kind of).

I Burned Down the Old Site, Here's The New One


I have awoken from my slumber to write a blog post. <a href="#fn:slumber">1</a>
You see, even though I do both web development, and film editing, and the last long term project I got was a film project which sort of took my out of the web development and <a href="https://twitter.com/search?q=%23eecms">#eecms</a> community while I worked feverishly to complete it, I still like to check in on the community once in a while and stay active when I can.
Well yesterday, <a href="https://twitter.com/search?q=%23eecms">#eecms</a> nearly blew up. The reason was because of a blog post <a href="http://ellislab.com/team/member/derek-jones">Chief Maker Derek Jones</a> wrote. <a href="#fn:chiefmaker">2</a>
<h2><a href="http://ellislab.com/blog/entry/competition-ethics-and-add-ons">Competition, Ethics, and Add-ons »</a></h2>
<blockquote>
It’s no secret that a prominent developer in the ExpressionEngine add-on community decided to release their own publishing system, intending to compete directly against ExpressionEngine. What surprised us about this was not that it happened, but the way that it happened. A formerly friendly developer unveiled a competing product behind closed doors at our own conference, and tried to convince the organizers to let him use the A/V equipment that we were paying for to do it.
</blockquote>
…
<blockquote>
Pixel &#x26; Tonic did not just set up shop across the street from us. We invited Pixel &#x26; Tonic to sell flavored syrups to our customers inside our own coffee shop. We left a few syrups off our menu because the friendly business in the corner was providing them. But then they began telling our customers that the coffee at their new shop was better - certainly their prerogative, but we would be irresponsible to ignore it.
So quite simply, we are putting those flavors back on our menu. Our customers do not have to worry whether or not Pixel &#x26; Tonic can develop and support something as complex as a publishing platform and still maintain the time and interest required to continue offering and supporting add-ons for a competitor’s product.
</blockquote>
<h2>Framing</h2>
Let me start of by saying I understand why EllisLab did this. But I have to frame it for those who may not be in the know. I understand that many of you reading this will already know the backstory, but it would be bad writing if I did not frame it anyway.
<a href="http://pixelandtonic.com">Pixel &#x26; Tonic</a> have made add-ons for <a href="http://ellislab.com/expressionengine">ExpressionEngine</a> for many years. It was kind of their business. The problem over the last couple of years is that there has been some shifting going on over at EllisLab, and a perception, right or wrong (I happen to think it’s somewhat right) that <a href="http://ellislab.com/expressionengine">ExpressionEngine</a> has been stagnating. Additionally, EllisLab has been very bad at communication and general support, bug fixes were nonexistent for a seemingly long time, and the community was growing frustrated. In the midst of all this, EllisLab decided to scale back their online presence, more or less abandoning Twitter and their active involvement in the community.
At the same time, while many of us love(d) <a href="http://ellislab.com/expressionengine">ExpressionEngine</a> for it’s great flexibility, and ability to create a website very easily from the ground up and write every single bit of code that appears on the front end, many were growing frustrated by the lack of new features and the apparent inability of EllisLab to keep <a href="http://ellislab.com/expressionengine">ExpressionEngine</a> relevant for today’s Internet. <a href="#fn:fieldgroups">3</a>
During the midst of all this, <a href="http://pixelandtonic.com">Pixel &#x26; Tonic</a> decided that maybe it was time for a new CMS that had the same spirit and heart as <a href="http://ellislab.com/expressionengine">ExpressionEngine</a>, but better foundation, development, support, and a more self aware team. Thus was born <a href="http://buildwithcraft.com">Craft</a>.
There are a lot of messy details, including some of, what looks from where I am at, impropriety of when and where the idea of <a href="http://buildwithcraft.com">Craft</a> was revealed, a questionable checklist on the <a href="http://pixelandtonic.com">Pixel &#x26; Tonic</a> website that was meant to rub EllisLab the wrong way, and EllisLab beginning to optimize their site for the word “Craft” with regard to search results, a term heretofore unused by the EllisLab team in the marketing of <a href="http://ellislab.com/expressionengine">ExpressionEngine</a>.
<h2>Inept Communication and Lack of Self Awareness</h2>
One thing has become very apparent during this whole time period: EllisLab is extremely inept at communication, social media, and community building. Every. Single. Thing. they have done/said lately has only served to anger and upset the formerly loyal community and user-base further.
Upon the posting of that blog post by Derek Jones, the <a href="https://twitter.com/search?q=%23eecms">#eecms</a> community erupted. There was the occasional yay or positive comment, but on the whole, the response was so overwhelmingly negative that one has to wonder how well considered that post was before it was posted? Not very well apparently.
I think this situation has arisen as a direct result of EllisLab’s lack of self awareness. I think that they collectively really have no clue about how they are perceived right now. They may think they do, but this blog post shows that they clearly do not. An old adage seems to apply here. When you are in a hole, stop digging. Unfortunately, EllisLab’s self dug grave just got several feet deeper, I’m afraid.
<h2>A Direct Attack</h2>
The problem is that instead of acknowledging the things that have directly led to the current situation and the creation of <a href="http://buildwithcraft.com">Craft</a>, which I maintain was a direct result of the languishing development of <a href="http://ellislab.com/expressionengine">ExpressionEngine</a>, and acknowledging how poorly communication and community have been handled, they went into attack mode. <a href="#fn:attack">4</a> They went on the offensive and the problem with that strategy is that it’s probably not a good idea when your position is as weak as EllisLab’s is right now.
Whether their perspective on Pixel &#x26; Tonic is right or wrong, it is clear that they were way too harsh in their public statements made by Derek Jones, and the community which has been keenly keeping an eye on Craft, did not respond well.
<h2>Show, Don’t Tell</h2>
Had I been in charge of EllisLab’s communication, my response would have been, show, don’t tell. What I mean is, it would be far better to just do good work and let that speak for itself. I don’t mean that EllisLab should be silent, indeed, my first act, if I were newly placed as head of EllisLab communication, would be to start engaging in the community in a positive way. I would try to acknowledge failures, solicit feedback and respond graciously, and I would certainly stay away from direct attacks on anyone.
Above all, I would encourage the team to start doing really good work. And that means fixing bugs not duplicating currently available third party functionality. I understand that in the future, that might be necessary as competition from Craft heats up, but right now that should have been the furthest thing away on the to-do list. There are so many things about <a href="http://ellislab.com/expressionengine">ExpressionEngine</a> that need help right now. What was once the greatest CMS in my book is having a mid-life crisis. Why not get the thing back on track instead of fixing something that isn’t broken right now?
<h2>A Better Way</h2>
Still, I completely understand why this decision was made. Pixel &#x26; Tonic is now a direct competitor and they are making several of the best add-ons available for <a href="http://ellislab.com/expressionengine">ExpressionEngine</a>; add-ons that many in the community feel are vital to <a href="http://ellislab.com/expressionengine">ExpressionEngine</a>. Despite the fact that I think it’s one of the weakest hands to play, you can see why this decision was made. And in the long term, yes, I think EllisLab should have done this. Not right now, and not in this way, but yes, it was the right decision to do at some point.
With that said, even if it had to be done right now, it could have been done much, much better. First, I think that I would not have written the blog post at all. Just build the functionality, and make it really cool and compelling, and let the work speak for itself.
But, if the blog post had to be written, even that could be better. I am going to do something that I hope is not too cheeky. I would like to write a better blog post that I feel would in all likelihood be much better perceived by the community. This is how I think that post should have been written.
<hr>
A proposed blog post EllisLab could have written
<h2>Competition is A Good Thing</h2>
EllisLab is committed to making ExpressionEngine the best content management platform available. One of the ways we do this is by making it a great platform for third party add-ons. Without the third party add-on community, ExpressionEngine simply wouldn’t be as great as it is today. We love our third party developers, and we want to encourage everyone in the building of great add-ons.
However, sometimes there are add-ons that extend the functionality of ExpressionEngine in such an obvious way that we really feel as if we have no choice but to add that core functionality and build it right into ExpressionEngine.
And sometimes this just makes good business sense on more than one level. It is no secret that Pixel &#x26; Tonic, makers of some of the finest add-ons available for ExpressionEngine, are also now our direct competitors in the CMS business. It seemed unwise to us to continue to leave the functionality of their most popular add-ons to them alone as this could become a conflict of interest for them in the future. We welcome them to continue making great add-ons as they always have, but we hope they will understand our position here.
That is why we are introducing a new field type into the core of ExpressionEngine called Grid, a field-type that allows authors to use grouped field-types to publish any number of rows of related content within an entry. It’s great for photo galleries, addresses, product details, baseball statistics and more.
We realize that some of our failures have directly led to this situation, and that is why we are renewing our commitment to the platform, to quality, and to the community. We hope in building this new field-type into the core of ExpressionEngine, that commitment will be apparent. Our first priority is our customers, and to serve our customers, we must have a great product.
Competition is vital in the marketplace and we really do look forward to competing with Pixel &#x26; Tonic in the CMS space. They’re doing fine work over there and we wish them the best. We really believe that there is room in the marketplace for all of us, and we believe as long as we make the best products we can make, we will be successful.
Onward we go!
<hr>
See, is that so hard? That was the blog post that Derek Jones should have written.
The bottom line here is that all of this just makes me sad. I love what I’m seeing from Craft, but I still love ExpressionEngine and it makes me sad to see the continuing demise of what was once the greatest CMS and to see them devolve into petty squabbles. I think we inherently just want everyone to get along. There really is room for both CMSes.
<h2>A Plea to EllisLab</h2>
I love ExpressionEngine. Let’s not mess it up with politics, please. Please just focus on making great software. Then you won’t need to get all defensive. We’ll love you for it if you do.
<hr>
<ol>
<li>
Actually, I have been writing a lot, you should check out my movie/film website where I do most of my writing now: <a href="http://moviebyte.com">MovieByte</a>. <a href="#fnref:slumber">↩</a>
</li>
<li>
Basically, he is the CEO, they just wanted a more creative title. <a href="#fnref:chiefmaker">↩</a>
</li>
<li>
I for one, have been extremely frustrated with the field group paradigm. It is very limiting when you want your Channels to share some common fields but have others that are not common. We should be able to assign fields to channels individually. <a href="#fnref:fieldgroups">↩</a>
</li>
<li>
Certainly, that’s the way it was perceived by the community. <a href="#fnref:attack">↩</a>
</li>
</ol>

Ethics, Communication, and EllisLab

I am always on a quest to have specific aspects of the sites I build, both mine and the sites I build for others, behave in exactly the way I want. Sometimes I get obsessive over seemingly meaningless and small details. For a very long time I have been obsessed with URL control. I want my URLs to work in a specific way. For instance, on this site I want the year and the month to be in the permalink URLs. I like having that data in the URL when I glance at it. <a href="#fn:eeulrs1">1</a> Thankfully, though not common, ExpressionEngine does have the means for me to create a way for this to work. <a href="#fn:eeurls2">2</a>
Another aspect of the URL I like to control is to remove index.php from the URLs. You see, everything in ExpressionEngine runs through the index.php file. Without any server side modifications, a typical ExpressionEngine URL looks like this:
<pre><code>http://mysite.com/index.php/template_group/template_or_url_title
</code></pre>
Index.php is the door through which the entire front end of an ExpressionEngine site must go. Everything is called through index.php.
I don’t like it. I don’t want it. It makes my URLs look ugly, it’s unfriendly and uncouth. No one cares that ExpressionEngine uses PHP to work. It’s an unnecessary and irritating part of the URL. Thankfully, as with all CMSes of this type, we can remove the index.php from the URL by rewriting the URL. We do this on typical LAMP servers with htaccess. So in my typical .htaccess file, I have this:
<pre><code>## remove index.php
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^(.*)$ /index.php/$1 [L]
</code></pre>
Okay, so what is that? The first two lines are rewrite conditions. If the filename in the URL requested is not a file (!-f) and if it is not a folder/directory (!-d), then we apply the rewrite rule to transparently run the URL through index.php. So the URL demo from above can now be:
<pre><code>http://mysite.com/template_group/template_or_url_title
</code></pre>
No index.php needed or required and the URL looks much more pretty. This is a standard way of doing things. You can find a tutorial on this in 5 seconds flat on a Google search. But there is a problem with this method that I had not considered until I read <a href="http://kevinthompson.info/blog/2011/03/04/completely-remove-index-php-from-expressionengine-urls.html">this article</a> by Kevin Thompson:
<blockquote>
While there are a number of known solutions for removing index.php from ExpressionEngine URLs, few developers realize that although URLs now resolve without index.php, the previous URLs including index.php also still exist.
</blockquote>
Right, I had never considered that for a second. I want to fix that right away. I do not like, and Google does not like (in terms of SEO) duplicate URLs for content. If your content is available at two distinct URLs it hurts your SEO and not only that but it’s confusing and irritating. I want the content to be available at one URL and one only. But with my htaccess rule, both URLs would work to get to the content. Omitting index.php was only an option, not a hard fact.
Thankfully it only takes two lines added to my .htaccess file:
<pre><code>## Redirect requests that use index.php
 RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC]
 RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,L]
</code></pre>
The condition is that if index.php is in the URL, rewrite the URL without and send a 301 code (permanent redirect). So for example, previously this URL would work to get to this article:
<pre><code>http://buzzingpixel.com/index.php/article/2013/02/completely-remove-index-php
</code></pre>
But now, if you try that, it redirects to the URL without index.php in it. It’s simple, but much to my chagrin, it’s something I never thought of before. I’m glad it’s fixed now!
<hr>
<ol>
<li>
Do you know how many people actually care about the URL? Hint, it’s not very many, only a geeky (nerdy?) few like me. <a href="#fnref:eeulrs1">↩</a>
</li>
<li>
Notice I did not say ExpressionEngine has this feature because I had to jump through a few hoops with the Channel Entries tag to make it work. I’m not doing anything hacky or undocumented, but it’s a little weird and not really the way it was intended to work. <a href="#fnref:eeurls2">↩</a>
</li>
</ol>

Completely Remove index.php

I’m writing this here because at the moment, I have no better place to write it. I can’t write about this sort of techie thing on <a href="http://moviebyte.com">MovieByte</a>, because you know, that’s for movies. I can’t write about it on <a href="http://tjdraper.com">my personal musings blog</a> (for lack of a better name), because nobody who reads that cares in the slightest. And when I do write there, it’s about politics that might offend you, or my cute kiddos.
And even though most of you probably don’t care, it’s something I want to write about because I’m excited about it. So here it is.
One of the advantages of ExpressionEngine is that it does not box you in to a certain way of doing things. I worked with WordPress a little in the early days, built one site in WordPress and messed around with a couple other sites. WordPress is just not my style at all. You see, WordPress renders the HTML you see on the front end from a very specific set of templates, things like header.html, sidebar.html, nav.html, footer.html etc. etc. A tag that you open in one might be closed in another template and so on. Yes I know that you can modify this scheme and do things in a different way to some extent, but to a very large extent WordPress has a predetermined box for you to work in or around. It’s no way to work for a guy like me.
And when I discovered EE, I thought I had died and gone to heaven. You see, what you see when you visit any given URL is the contents of the rendering of one template in which you can put whatever markup you want.
The way EE URLs and templates work looks like this:
<pre><code>http://mysite.com/the_template_group/the_template
</code></pre>
If no template group is specified in the URL, then the index template in that group is used (every template group must have an index template).
You can build each template on it’s own and put any markup you want in that template on a per-template basis (not very DRY), or you can split it up into chunks as you see fit.
Back in the EE 1 days, the way to do this was by embedding another template into your template.
<pre><code>{embed="the_template_group/the_template"}
</code></pre>
So in those days you might create a template group called “includes” and make all kinds of templates in there for your global markup that you would embed in your other templates. But doing that came at a cost. For every embed, the EE template parser would run again from the beginning. Embed about five templates and you are looking at some serious server overhead to crank out that page for your viewer. This might lead to a delay of 3 to 4 seconds, or more if you got crazy with embeds.
EE 2 debuted something new. EE 1 had something called Global Variables where you could store HTML markup to call in your template, but no EE template tags, because those would not get parsed. EE 2 built upon that premise by introducing Snippets. Snippets can contain both HTML markup AND EE template tags. And a snippet call does not restart the template parser.
So with EE 2 we have a low overhead way to slice up the template and include global markup. But even though this is an infinitely better solution than WP’s box approach, I was never complete satisfied with this.
<h2>A New Approach</h2>
Enter Mark Croxton’s excellent EE add-on called <a href="http://devot-ee.com/add-ons/stash">Stash</a>. I don’t know when he released it exactly, but I discovered it last year and it’s fantastic. There are a lot of uses this plugin can be put to that I will probably never in a million years figure out, but allow me to tell you how I use it.
Bye bye includes (via embeds or snippets) and hello one template to rule them all!
Here’s the structure. EE allows us to have hidden templates which may not be called by URL, but only by embed so I create a template group called <code>_layouts</code> where I store what I call my layout templates. The first and primary one I create is called <code>_default</code> (for a very large majority of sites, you will only need one). All my global markup goes in this layout template. If I need more than one layout template, I might break out the “super” global markup into snippets but for most sites, I just have the one template and keep all global markup there. So that’s the layout template.
In each actual site template, I call the layout template via embed:
<pre><code>{!-- Embed the Primary Template --}
{embed="_layouts/_default"}
</code></pre>
Okay, so now what? Each site template is going to have markup or variable content that we need to display somewhere in the embedded layout template. How do we get it there? Ahh, glad you asked. This is what I’m excited about. This is where Stash comes in.
EE template parse order is my nemesis. To this day I have trouble really internalizing the concepts and what gets rendered when, in what order and all that jazz. But I can tell you essentially how it works so far as I understand.
<ol>
<li>EE looks at your URL and loads the template you have called.</li>
<li>That template gets parsed, all EE template tags in that template get parsed.</li>
<li>If the template has any embeds, the template parser starts over on the embedded template</li>
<li>All template tags in the embedded template get parsed</li>
<li>The final parsed and rendered output is displayed</li>
</ol>
So this is how <a href="http://devot-ee.com/add-ons/stash">Stash</a> helps us. After embedding the layout template, we can set stuff in the template being called by URL with stash:set, and call it in the embedded template with stash:get because the called template gets parsed first, then the embedded template is parsed. So:
Setting content in the template called by URL:
<pre><code>{!-- Set some content --}
{exp:stash:set name="stuff"}stuff goes here{/exp:stash:set}
</code></pre>
Retrieving content:
<pre><code>{!-- Get some content --}
{exp:stash:get name='stuff'}
</code></pre>
Are you getting it? See the possibilities? After embedding the primary template, we wrap everything in the template called by URL in stash:set tags and essentially inject that content into the embedded template with the stash:get call. And that stash:get call can be anywhere in the embedded template. For instance, on this site I want to change the <code>&#x3C;title></code> area in the head of the page depending on the URL and page visited. So in my embedded layout template the title looks like this:
<pre><code>&#x3C;title>{exp:stash:get name='head_title'} | BuzzingPixel&#x3C;/title>
</code></pre>
And in the URL called template I have set the title that stash is retrieving like so:
<pre><code>{exp:stash:set name="head_title"}This is the page title{/exp:stash:set}
</code></pre>
Now do you see it? This is some seriously powerful mojo! And the fun doesn’t end there. What if I want to control various aspects of the layout template based on the URL? What if when I call a page template I want to turn certain aspects of the layout on or off. If it’s as easy as displaying or not displaying code we can still do it all with one layout template using Stash (for complicated sites, this is where you may need more than one layout template, but when you really get into this workflow, there is not actually a need to have more than one layout template very often).
An example is that on a site I recently developed, some templates required a sidebar layout and some did not. So I created a method with Stash to tell the layout template whether to display the sidebar. I used <a href="http://devot-ee.com/add-ons/switchee">Switchee</a> case logic (another great add-on by Croxton) to reduce template overhead, but I’ll use native EE <code>{if}</code> statements here for the simplicity of the demonstration:
Here is the value I set in my URL called template:
<pre><code>{!-- Show the Sidebar? Possible Values are: "sidebar" "nosidebar" --}
{exp:stash:set name="template_type"}sidebar{/exp:stash:set}
</code></pre>
And in the embedded layout template:
<pre><code>{if "{exp:stash:set name="template_type"}" == "sidebar"}
Sidebar Code
{/if}
</code></pre>
You can see the power of this method. But there is another benefit: speed. One embed per template. This is a really low overhead approach to keeping things DRY and I love it. This is the sort of thing I get excited about.
And I hope by writing about it here, someone comes across this and finds it useful. If you have any questions, or want to tell me about a better way to do things, shoot me an email. You will find the contact link in the menu above.

Templating with ExpressionEngine

<blockquote>
So what happened? Well, the biggest problem we found with WordPress is that we are designers first, so we NEED to design our clients a website solution that is custom to them. We need to easily be able to make changes without checking to see if our CMS will allow it first. In short, it was driving our solutions, and wasn’t very flexible for us. Our only options seamed to be taking someone else’s theme and hacking it to make it mine, and we’re not about that.
</blockquote>
Anyone who has ever heard me complain about WordPress, this is why. I design websites with HTML and CSS. I don’t want to be shoehorned into the WordPress construct, it’s very limiting. And there’s really no concept of separating content. Content in WordPress is all in one big bucket, whereas in ExpressionEngine, you can have as many Channels (buckets) as you want. And the biggest advantage of ExpressionEngine for us designers is there is no concept of themes. At all. This makes it bad for the average Joe who wants to find a theme, install it and start blogging. In that case, yeah, WordPress is the one for Joe. But if you want a CMS that gives you, the designer, complete and total control, ExpressionEngine is the way to go.
<blockquote>
In just a few short hours I was building a CMS to apply to my custom design. It was the complete opposite to any of these other CMS’s that I have learned to use previously. It changed what a CMS meant to me, because now I have complete control over the design, how the client will update it, what shows up and when, etc. They like to describe ExpressionEngine as a software to build your own CMS.
</blockquote>
One of the things that frustrates me about the paradigm most other CMSes have created can be illustrated by a question I get asked by clients sometimes. It’s something like this: “Will ExpressionEngine do X?” or, “How does ExpressionEngine handle Y?” That paradigm doesn’t really exist in ExpressionEngine. For the most part, ExpressionEngine does what the designer designs it to do.

Greenline Creative Uses ExpressionEngine

Yeah, pretty much. Because it’s geeky, and I’m geeky so I’m going to talk about it.
You might recall that I <a href="/blog/2011/12/14/just-how-flexible-is-expressionengine">talked about it when I first redesigned Apple User Pro</a>. It turned out I was using way too much PHP and making things hard on myself. So I <a href="/article/2012/02/ee-url-shortener">followed up and talked about how to do it the easy way with all native EE code</a>, and one plugin (<a href="http://devot-ee.com/add-ons/http-header">HTTP Header</a>).
But when I went for the rebrand to BuzzingPixel I wanted to simplify further from the end user perspective. One thing I never liked with any version of the URL shortener is that I had to include the template group in the URL like this:
<pre><code>http://aupro.us/s/1219
</code></pre>
Where “s” is the template group and the index template of the “s” template group is used by default. But who wants that template group in the URL? It’s extra. The entry ID is the only thing I want in the URL, that silly template group is just an annoyance. The only reason I ever included it was because as much as I love ExpressionEngine, and as flexible as it is in most ways, it can be hard to wrestle with it’s URL structure. URL structure is part of the design in my opinion, and I have been able to design the URL structure pretty well in most areas of this site, but I have never been happy with the URL shortener structure.
I have tried unsuccessfully in the past to remove the template group from the URL with htaccess re-writes but I have been unsuccessful. I even spent several hours trying to figure it out when designing the current BuzzingPixel design. I finally gave up on htaccess in disgust and went and watched a movie. But the next day I had a brain wave and I solved it! You will notice that short URLs no longer include the template group. Here’s how:
We still need to copy the index.php file from the main site root to the short URL site root. And you’ll need to remove index.php with htaccess. I’m actually removing www and trailing slashes as well. Here’s what my htaccess file looks like:
<pre><code>## remove www
 RewriteCond %{HTTP_HOST} ^www.bzpxl.us [NC]
 RewriteRule ^(.*)$ http://bzpxl.us/$1 [L,R=301]

## remove trailing slash
 ## check if file or directory exists first
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 ## if not file or directory remove the slash
 RewriteCond %{HTTP_HOST} !^\.bzpxl\.com$ [NC]
 RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

## remove index.php
 ## check if file or directory exists first
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 ## if not file or directory remove index.php
 RewriteRule ^(.*)$ /index.php/$1 [L]
</code></pre>
It’s probably not necessary to check for files and directories on my short URL site since nothing else lives there, but this is actually a pretty typical htaccess file for me, I copied and pasted then modified the main URL.
As I talked about in the previous articles, you need to modify the index.php file with some custom variables. But this is where I made the critical change that allows me to remove the template group from the URL altogether. Normally, ExpressionEngine requires a template group in the URL. But if there isn’t one in the URL then ExpressionEngine presents the 404 page. This was my “eureka” moment. I should create a new template group called anything I want (I called it shortener), and then using the custom config variable in index.php, override the default 404 page and assign my custom template as 404.
<pre><code>$assign_to_config['site_404'] = 'shortener/index';
</code></pre>
Now when the short URL with Entry ID is used, it’s sent to the 404 template. The 404 template has the appropriate code magic to redirect to the full URL.
<pre><code>{exp:http_header status="301"}

{exp:channel:entries entry_id="{segment_1}" disable="categories|category_fields|member_data|pagination"}
{if no_results}{redirect="/"}{/if}

{if channel_id=="9"}{redirect="/article/{entry_date format='%Y/%m'}/{url_title}"}{/if}

{if channel_id=="13"}{redirect="/linkedlist/{entry_date format='%Y/%m'}/{url_title}"}{/if}

{/exp:channel:entries}
</code></pre>
That’s not very much code at all. And for a lot of uses, you won’t even need to detect the Channel ID. I have to because I have two channels with two different URL structures, the Linked List, and the Article Channel.
So what’s going on. Well, first I’m using the HTTP Header plugin to change the header status to 301 instead of 404.
<pre><code>{exp:http_header status="301"}
</code></pre>
Next I’m opening the channel entries tag and instead of assigning a Channel or Channels, I’m telling the tag to use the first URL segment as the entry ID.
<pre><code>{exp:channel:entries entry_id="{segment_1}" disable="categories|category_fields|member_data|pagination"}
</code></pre>
Then I’m redirecting to the site homepage if there are no results (this is just in case someone visits the short URL without the entry ID or some such thing).
<pre><code>{if no_results}{redirect="/"}{/if}
</code></pre>
Next, in my case, I need to determine which channel the entry is in and redirect appropriately.
<pre><code>{if channel_id=="9"}{redirect="/article/{entry_date format='%Y/%m'}/{url_title}"}{/if}

{if channel_id=="13"}{redirect="/linkedlist/{entry_date format='%Y/%m'}/{url_title}"}{/if}
</code></pre>
And finally, I close the channel entries tag.
<pre><code>{/exp:channel:entries}
</code></pre>
If in the future I want to add channels and sections to the site that use short URLs, it’s as simple as adding another conditional line of code to detect the channel ID and redirect appropriately to the correct URL.
And that is a really simple URL shortener based on the Channel Entry ID with no template group in the url.

You're going to talk about the URL shortener again?


<blockquote>
Hands down, the best part about ExpressionEngine is the flexibility. When dealing with Drupal and other CMSes I always felt that I had to jam my design into their system. In other words, build a website that would fit their narrow structure instead of building what I wanted. I needed a CMS where I didn’t have to start with a default theme and “make it work” with my design. ExpressionEngine is great because it makes no assumptions about your design. Build the site that you want without having to worry about whether it will work in the CMS, because it will.
With ExpressionEngine there are no starter templates to deal with so there is no having to modify code or override styles. I suppose some people like having templates to start from but for me I want a clean slate to work from. Markup my css file and my index template and drop it into ExpressionEngine. There is no need to worry about putting snippets of code into the correct include file, struggling with uncommented and cryptic code, or finding the line of code in the default stylesheet to change a font color. it is all 100% your markup.
</blockquote>
Exactly.
<blockquote>
Say you build a blog with ExpressionEngine, and a year later you want to build a full website onto it. With another CMS it might be a challenge but with ExpressionEngine you can build on additional sections or added features easily and at any time. Start with a blog, add some static pages, add a second blog, add a photo gallery. Whatever, whenever, and however you want.
</blockquote>
There’s lot of good stuff in this article. I think he pretty much captures the essence of why I’m an ExpressionEngine guy and not, say, a Wordpress guy (much less Drupal or Joomla… shudder).

Tyler Herman

ExpressionEngine is Best for Web Designers

This is a follow up to <a href="/blog/2011/12/14/just-how-flexible-is-expressionengine">my previous article on creating a URL shortener with ExpressionEngine</a>. It turns out I was doing it the really complicated way. My new way uses all EE code and doesn’t require any PHP. The only thing I’m using that isn’t included by default in ExpressionEngine is a plugin called <a href="http://devot-ee.com/add-ons/http-header">HTTP Header</a>. I use this to set the header to 301.
I still use the short domain name “aurpro.us” hosted on the same server. From the original article:
<blockquote>
<h2>One ExpressionEngine install on two domains</h2>
The next step is to copy the index.php and .htaccess file from Apple User Pro’s web-root to the aupro.us web-root. But we aren’t quite done yet. Since I’m copying the index.php from the main site, the system path is already declared in the document, but there are some other variables I need to configure. Lines 89 through 93 of EE’s index.php contain some variables that are commented out.
<pre><code>// $assign_to_config['template_group'] = '';
// $assign_to_config['template'] = '';
// $assign_to_config['site_index'] = '';
// $assign_to_config['site_404'] = '';
// $assign_to_config['global_vars'] = array(); // This array must be associative
</code></pre>
For this purpose, I only need two of those. I need to declare the `template_group and “template” to override the defaults I have set in the EE control panel. That way, if someone loads up aupro.us without anything more to the URL, EE will not serve the default template, but will instead load my URL shortening template and redirect them to the Apple User Pro home page.
So I configured like so:
<pre><code>$assign_to_config['template'] = 'u';
$assign_to_config['site_index'] = 'index';
</code></pre>
</blockquote>
So that’s all the same except I changed my template group to “s”. S stands for Short URL (to me anyway). I kept the “u” template group around and simply embedded the “s/index” template for backward compatibility with older shortening URLs.
<pre><code>{embed="s/index"}
</code></pre>
So, here is my much simplified way to use short URLs with EE.
First we’ll use the HTTP Header plugin I talked about:
<pre><code>{exp:http_header status="301"}
</code></pre>
Next we’ll call the appropriate channels.
<pre><code>{exp:channel:entries channel="appleuserpro|linkedlist" limit="1" disable="categories|category_fields|custom_fields|member_data|pagination" require_entry="yes"}
</code></pre>
The require entry is very important to the next bit of code. If no entry is called when visiting aupro.us, I want it to redirect to appleuserpro.com. So I use:
<pre><code>{if no_results}{redirect="/"}{/if}
</code></pre>
Next, we need to call a redirect for the entry.
<pre><code>{if channel_id=="9"}{redirect="article/{entry_date format='%Y'}/{entry_date format='%m'}/{url_title}"}{/if}

{if channel_id=="13"}{redirect="linkedlist/{entry_date format='%Y'}/{entry_date format='%m'}/{url_title}"}{/if}
</code></pre>
Now in my case, because I’m using two Channels for my content here on Apple User Pro, one for Articles, and one for my Linked List, I have to use some “if” statements to redirect to the right URL. If you are only using one channel, you can just remove the if statements and the second redirect, change to your appropriate URL format, and you’re good to go. But as you see, in my case, I have to figure out which channel the entry being called is in, then either redirect to the Article URL, or the Linked List URL. Even so, it’s fairly straight forward.
And finally, all that’s left to do is close the Channel Entries Tag:
<pre><code>{/exp:channel:entries}
</code></pre>
And that’s it.
And one more thing I’ll reiterate from the original article. It’s very easy to add a short URL to your entries. Here’s how I do it:
<pre><code>&#x3C;a href="http://aupro.us/s/{entry_id}">Short URL&#x3C;/a>
</code></pre>
As long as that code is within the Channel Entries tag for the entry in question, <code>{entry_id}</code> will call the entry ID number.
And that’s the short URL; much easier than my first round of code. But isn’t that how things go? You always learn new, more efficient, and better ways of doing things.

ExpressionEngine URL Shortener Revisited

<blockquote>
The control panel is noticeably faster in most environments, with much snappier rendering of filterable tables. And an expanded approach to ‘Remember me’ functionality that’s optimized for multiple sites and/or devices results in a nicer frontend user experience.
</blockquote>
…
<blockquote>
File management continues to improve in this release, with a number of nice additions. The browser has been beefed up to allow sorting and filtering by keywords, greatly improving the ease with which you can find a particular file.
</blockquote>
…
<blockquote>
Improvements designed to make updating and/or moving ExpressionEngine sites were also a focus of this release. File upload paths can now be overridden via a hidden configuration variable, making updates after a move or syncing a developer site and a production site easier.
</blockquote>
…
<blockquote>
…the ability of the Channel Categories and Category Archive tags to accept multiple channels in the channel parameter
</blockquote>
…
<blockquote>
Developers will also find a number of significant additions in this release. Two new constants, URL_THEMES_THIRD and PATH_THEMES_THIRD, have been added with the goal of allowing users to fully customize the location of third party folders.
</blockquote>
This looks like an awesome update and I can’t wait to find time to start playing with it and making sure it doesn’t break any of my third party add-ons.

ExpressionEngine.com

ExpressionEngine 2.4.0 Released

I wanted to do an article on how to power a Podcast with EE, but I realized I needed to cover the basics a little better first.
When I first began work on my Church’s website, I began looking for a CMS that would be flexible enough to fit my needs. This was before I had discovered EE and I used no less then two obscure systems within the course of 6 months or so before realizing I needed something much more robust. I knew at this point that Wordpress was out (for me), I had already begun to loathe Wordpress. <a href="#fn:eebasics1">1</a> After I discovered ExpressionEngine I knew this was the system I wanted to use. Even though in ExpressionEngine 1, the concept of Channels was still somewhat confusingly called “Weblogs” that concept of data agnostic content management was definitely there and any amount of reading up on EE at the time would quickly show the flexibility of Weblogs (and how badly it was named, Channels is a far more appropriate name for what you can do with this concept).
Specifically, I needed a CMS that would let me enter data in one place, and have it propagate anywhere I needed it to. Of course this is also possible in Wordpress, but I find Wordpress conceptually flawed. There is no flexibility in terms of the type of content. There is simply no Channel concept. And there is no separation of templates. Wordpress uses a certain set of templates to render the website. Period.
EE is in many ways, the polar opposite of this approach. Let’s look at the ExpressionEngine model. I don’t feel as if I did all that great of a job explaining this in my “<a href="/blog/2011/11/16/why-expression-engine">Why ExpressionEngine</a>” article.
There are 2 basic components to understanding the EE model. Those components are:
<ol>
<li><a href="http://expressionengine.com/user_guide/templates/index.html">Templates</a></li>
<li><a href="http://expressionengine.com/user_guide/modules/channel/index.html">Channels</a></li>
</ol>
But there is of course far more to it than that. Let’s add to that.
<ol>
<li>
Templates
<ul>
<li><a href="http://expressionengine.com/user_guide/templates/globals/snippets.html">Snippets</a></li>
<li><a href="http://expressionengine.com/user_guide/templates/globals/user_defined.html">Global Variables</a></li>
</ul>
</li>
<li>
Channels
<ul>
<li><a href="http://expressionengine.com/user_guide/cp/admin/channels/custom_channel_fields.html">Field Groups</a></li>
<li><a href="http://expressionengine.com/user_guide/cp/admin/channels/custom_fields_edit.html">Field Types</a></li>
<li><a href="http://expressionengine.com/user_guide/cp/admin/channels/category_management.html">Categories</a></li>
</ul>
</li>
<li>
<a href="http://devot-ee.com/">Add-ons</a> <a href="#fn:eebasics2">2</a>
</li>
</ol>
So what are these things?
<h2>Templates, Snippets, and Global Variables</h2>
ExpressionEngine is, for better or for worse, usually considered to be best for someone that has moved beyond the beginner’s stage of website design. While this is somewhat of a mischaracterization <a href="#fn:eebasics3">3</a> , it is not unfounded. EE used to come with a very basic template structure pre-installed, but I don’t even think it does that anymore. EE is, for all intents and purposes, a blank slate when you first install it. Unlike Wordpress and other popular Content Management Systems, there is no predefined template structure. You don’t go hunting for “sidebar.phtml,” or “footer.html” or “header.php” in some template directory somewhere. You define the templates yourself. Designers like me can rejoice! Seriously, do a little jig if you were not aware that ExpressionEngine was like this because I am bringing you freedom!
<h3>Templates and Template Groups</h3>
To access Templates and Template Groups, from the EE control panel, navigate to “Design > Templates > Template Manager”. <a href="#fn:eebasics4">4</a>
Templates do just what it sounds like. You can use any HTML you want in a Template (or even PHP, though you have to enable the use of PHP, it’s disabled by default as a security feature). Templates exist in Template Groups. No Template may exist in ExpressionEngine outside of a Template Group. Every group has a Template called “index”. The “index” Template is the default Template for that group and if no Template is specified in the URL for a given Template Group, the “index” Template in that group is the one that is loaded.
Templates and Groups are called in the URL structure like this:
<pre><code>http://some-site.com/template_group/template
</code></pre>
In the case of Apple User Pro, I wanted to keep the URLs as short as possible, so for most URLs (all actually), I am only calling a Template Group, and because no Template is specified, EE loads the index Template of the group. The template structure for this site looks like:
<ul>
<li>
site
<ul>
<li>index</li>
</ul>
</li>
<li>
article
<ul>
<li>index</li>
</ul>
</li>
<li>
linked list
<ul>
<li>index</li>
</ul>
</li>
<li>
page
<ul>
<li>index</li>
</ul>
</li>
<li>
category
<ul>
<li>index</li>
</ul>
</li>
<li>
archive
<ul>
<li>index</li>
</ul>
</li>
<li>
feeds
<ul>
<li>index</li>
</ul>
</li>
<li>
404
<ul>
<li>index</li>
</ul>
</li>
</ul>
So a permalink for an article looks like this:
<pre><code>http://appleuserpro.com/article/article_permalink_url
</code></pre>
Or for a Linked List item
<pre><code>http://appleuserpro.com/linkedlist/linkedlist_permalink_url
</code></pre>
<h3>Snippets and Global Variables</h3>
So, it’s great and all that Templates can contain HTML and whatnot, but that seems sort of burdensome to have a lot of different templates with what is often the same chunks of code in each. Ahh but this is where EE helps us out again. EE never forces any particular structure on the designer. With a system like Wordpress (for instance) the header template is always the header template. But with ExpressionEngine you break the code up into chunks only as you see fit. This is where Snippets and Global Variables come in.
Global Variables are simply re-usable chunks of HTML code. For instance, my nav bar is in a Global Variable called gv-nav. <a href="#fn:eebasics5">5</a> In my template, I simply place a call for the Global Variable with:
<pre><code>[gv-nav]
</code></pre>
(Note, those brackets should actually be curly braces, but EE is trying to parse the Global Variable instead of showing the code to call the Global Varialbe)
And now if I want to change something about the nav bar, I do it in one place.
Here are the Global Variables I’m using on this site right now.
<h4>gv-ganalytics</h4>
It contains the following code and I place the call for it just before the closing body tag
<pre><code>&#x3C;script type="text/javascript">

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-7579302-6']);

_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

&#x3C;/script>
</code></pre>
<h4>gv-headrss</h4>
Goes in the head tag. It’s just in case I ever need to change the location of my RSS feed.
<pre><code>&#x3C;link rel="alternate" type="application/rss+xml" title="RSS" href="/feeds/index" />
</code></pre>
<h4>gv-nav</h4>
<pre><code>&#x3C;div id="nav">&#x3C;a href="/">&#x26;nbsp;home&#x26;nbsp;&#x3C;/a> &#x3C;div class="nav-word-spacer">&#x3C;/div> &#x3C;a href="/archive">&#x26;nbsp;archive&#x26;nbsp;&#x3C;/a> &#x3C;div class="nav-word-spacer">&#x3C;/div> &#x3C;a href="mailto:feedback@appleuserpro.com">&#x26;nbsp;comments&#x26;nbsp;&#x3C;/a> &#x3C;div class="nav-word-spacer">&#x3C;/div> &#x3C;a href="/colophon">&#x26;nbsp;colophon&#x26;nbsp;&#x3C;/a> &#x3C;div class="nav-word-spacer">&#x3C;/div> &#x3C;a href="/feeds/index">&#x26;nbsp;rss feed&#x26;nbsp;&#x3C;/a>&#x3C;/div>
</code></pre>
<h4>gv-stylesheets</h4>
<pre><code>&#x3C;!--[if !IE]>-->
&#x3C;meta name="viewport" content="width=652, user-scalable=yes" />
&#x3C;meta name="apple-mobile-web-app-capable" content="yes" />
&#x3C;link media="screen and (max-device-width: 480px)" href="/styles/iphone.css" rel="stylesheet" />
&#x3C;!--&#x3C;![endif]-->

&#x3C;link rel="stylesheet" media="screen and (min-device-width: 480px)" href="/styles/index.css" />

&#x3C;!--[if IE]>
&#x3C;link rel="stylesheet" type="text/css" href="/styles/index.css" />
&#x3C;![endif]-->
</code></pre>
Snippets are similar in concept but can do more. Unlike Global Variables, EE Template code or PHP can be used in a Snippet. The reason that both exist is because Snippets have a bit higher cost in terms of performance. But still very powerful. So you would use a Global Variable for reusable HTML that does not include EE Template code or PHP. And a Snippet if you have a need for repeating code using either one of those.
I utilize two Snippets on this site
<h4>sn-footer</h4>
The reason I use a snippet for the footer is because I have a date variable that pulls the current year from ExpressionEngine for the copyright.
<pre><code>&#x3C;div id="footer">
&#x3C;p>This site is built on modern web standards and should work with any modern web browser&#x3C;br />
This site has been tested with &#x3C;a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9&#x3C;/a>, &#x3C;a href="http://apple.com/safari/">Safari 5&#x3C;/a>, &#x3C;a href="http://mozilla.org/en-US/firefox/new/">Firefox 7&#x3C;/a> and &#x3C;a href="http://google.com/chrome">Chrome 14&#x3C;/a>&#x3C;br />
powered by &#x3C;a href="http://expressionengine.com/index.php?affiliate=tjdraper">Expression Engine&#x3C;/a> &#x26;mdash; built with &#x3C;a href="http://www.panic.com/coda/">Coda&#x3C;/a>&#x3C;/p>

&#x3C;p>copyright &#x26;copy; {current_time format="%Y"} — TJ Draper&#x3C;/p>
&#x3C;/div>
</code></pre>
<h4>sn-meta</h4>
This is the part of the code that appears on the right side of each article or linked list item
<pre><code>&#x3C;div>Posted on:&#x3C;/div>
&#x3C;div class="entry-date">{entry_date format=' %l, %F %j, %Y '}&#x3C;/div>
&#x3C;div class="categories">&#x3C;strong>category:&#x3C;/strong>&#x3C;br />{categories backspace="8"}&#x3C;a href="/category/{category_url_title}">{category_name}&#x3C;/a> &#x26;bull; {/categories}&#x3C;/div>
&#x3C;div class="permalink">{if channel_id=="9"}&#x3C;a href="/article/{url_title}">permalink&#x3C;/a>{/if}{if channel_id=="13"}&#x3C;a href="/linkedlist/{url_title}">permalink&#x3C;/a>{/if}&#x3C;/div>
&#x3C;div class="permalink">&#x3C;a href="http://aupro.us/s/{entry_id}">short url&#x3C;/a>&#x3C;/div>

{if logged_in}&#x3C;br />&#x3C;div class="permalink">&#x3C;a href="http://appleuserpro.com/admin.php?S=0&#x26;D=cp&#x26;C=content_publish&#x26;M=entry_form&#x26;channel_id={channel_id}&#x26;entry_id={entry_id}">Edit &#x26;raquo;&#x3C;/a>&#x3C;/div>{/if}
</code></pre>
<h2>Channels, Field Groups, Field Types, and Categories</h2>
Channels are the other half of ExpressionEngine. A Channel can be almost anything. To get started with a Channel, you create one, then you create a field group, add fields to it, assign it to the Channel and you’re off and running.
<h3>Fields</h3>
Every Channel entry has some default fields.
<ul>
<li>Title</li>
<li>URL Title (the permalink, this may or may not be relevant depending on how you use the Channel)</li>
<li>Entry Date</li>
</ul>
And some other default items that aren’t fields really, but are part of the channel entry
<ul>
<li>Status (usually open for closed, but you can define custom statuses too)</li>
<li>Options (make entry sticky etc.)</li>
</ul>
And there are a few more things, all of which, with the exception of the Title, URL Title and Entry Date can be hidden ore shown on a per-Channel basis. Beyond that you define custom fields for your Channel. The Fields on this site are very simple. Despite having three Channels (Article, Linked List, Page) I only have one field group which I assign to each channel. I have defined two fields in this field group.
<ol>
<li>Link URL</li>
<li>Body</li>
</ol>
Only the Body is required. This is the field that is common to all three of my Channels. On my Page and Article Channel entry page, I have hidden the Link URL field as I don’t use it. That field is only used on the Linked List items. It’s where I paste the URL of the item I’m linking to.
This site is fairly uncomplicated in it’s Channel field needs. But on the site I rolled out last week for my Church, I have 7 different field groups. And the field group I’m using for the sermons has 8 custom fields. Channels are extremely flexible.
<h3>Categories</h3>
You can do a lot with categories, or you can choose not even to use them. I don’t have a category group assigned to my Page Channel. I have the same category group assigned to my Linked List and Article Channels. Categories are most often used for blogs, but you can use them for other things too (I’m using categories as the sermons series on my Church website).
<h2>Bringing it all together.</h2>
Alright, so we have these two basic components, how do we bring it all together? That we do with the Channel Entries Tag. When you wish to call data from a Channel, you do so with this tag:
<pre><code>{exp:channel:entries channel="channel_short_name"}
</code></pre>
And there’s all kinds of parameters we could use in that tag as well such as:
<pre><code> orderby="date" sort="desc" limit="5" disable="category_fields|member_data"
</code></pre>
footnote on the disable parameter <a href="#fn:eebasics6">6</a>
There are many other parameters that can be used in that tag in the documentation.
Everything between the opening and closing of that tag can loop. For instance, if the limit is set higher than 1, and the URL is not calling a specific Channel entry with the permalink, then everything in between the open and close of the Channel tag will loop based on the number of entries shown.
Here is basically what the template code looks like to call the entries on the Apple User Pro home page (I did simplify some things for the sake of reading):
<pre><code>{exp:channel:entries channel="appleuserpro|linkedlist" orderby="date" sort="desc" limit="10" disable="category_fields|member_data"}

&#x3C;div class="entry-left-column">

 &#x3C;h1>[if channel_id == "9"]&#x3C;a href="/article/{url_title}">&#x26;diams; {title}&#x3C;/a>[/if][if channel_id == "13"]&#x3C;a href="{link-url}">&#x26;rarr; {title}&#x3C;/a>[/if]&#x3C;/h1>

 {postcontent}

&#x3C;/div>

&#x3C;div class="entry-right-column">
 &#x3C;div>Posted on:&#x3C;/div>
 &#x3C;div class="entry-date">{entry_date format=' %l, %F %j, %Y '}&#x3C;/div>
 &#x3C;div class="categories">&#x3C;strong>category:&#x3C;/strong>&#x3C;br />{categories backspace="8"}&#x3C;a href="/category/{category_url_title}">{category_name}&#x3C;/a> &#x26;bull; {/categories}&#x3C;/div>
 &#x3C;div class="permalink">[if channel_id == "9"]&#x3C;a href="/article/{url_title}">permalink&#x3C;/a>[/if][if channel_id == "13"]&#x3C;a href="/linkedlist/{url_title}">permalink&#x3C;/a>[/if]&#x3C;/div>
 &#x3C;div class="permalink">&#x3C;a href="http://aupro.us/s/{entry_id}">short url&#x3C;/a>&#x3C;/div>

 [if logged_in]&#x3C;br />&#x3C;div class="permalink">&#x3C;a href="http://appleuserpro.com/admin.php?S=0&#x26;D=cp&#x26;C=content_publish&#x26;M=entry_form&#x26;channel_id={channel_id}&#x26;entry_id={entry_id}">Edit &#x26;raquo;&#x3C;/a>&#x3C;/div>[/if]

{/exp:channel:entries}
</code></pre>
(please note that the if statements should be in curly braces, but EE is again trying to parse them so I had to switch to brackets)
And that’s it in a nutshell. I hope someone finds this useful, I love writing about it.
<hr>
<ol>
<li>
See my previous entry on this subject: <a href="/blog/2011/11/16/why-expression-engine">Why ExpressionEngine</a> <a href="#fnref:eebasics1">↩</a>
</li>
<li>
I’ve built many EE sites without add-ons, but more and more, I’m finding add-ons that make things easier, or do things that I could’t do without them. <a href="#fnref:eebasics2">↩</a>
</li>
<li>
There are templates out there for EE, but not nearly as many as there are for Wordpress. <a href="#fnref:eebasics3">↩</a>
</li>
<li>
Templates can also be set to save as files within the directory structure of your server. I always set my templates to save as files so I can use <a href="http://panic.com/coda/">Coda</a> to edit my Templates without resorting to copying and pasting all my code changes back and forth. <a href="#fnref:eebasics4">↩</a>
</li>
<li>
In case you are wondering, I prefix all my Global Variables with “gv-” and all my Snippets with “sn-”. This helps me identify which is which if I happen to be working in a template and I see that one of the two has been called. You are absolutely not required to use the prefix. <a href="#fnref:eebasics5">↩</a>
</li>
<li>
Anything not being used in the Channel Entry tag should be disabled. This will make the tag far lighter to call. If you aren’t going to call categories in this particular instance of the Channel Tag, disable to reduce overhead. Don’t need data from the member module? Disable it. I usually keep a text document of handy items and EE tags that I might use, and the things you can disable in the Channel tag are at the top. <a href="#fnref:eebasics6">↩</a>
</li>
</ol>

ExpressionEngine Basics

I just finished rolling out my latest ExpressionEngine project; a redesigned website for my Church. You can take a gander here: <a href="http://heritagecenterville.org">HeritageCenterville.org</a>
There were several things that I did, and several EE Add-ons that I used, which I’ll be writing about (because I’m geeky like that). And I’m going to start with some great Add-ons that I used.
<h2><a href="http://expressionengine.com/downloads/details/allow_ee_code">Allow EE Code</a></h2>
This wonderful little plugin allows the use of ExpressionEngine tags in Channel Entries. Normally, you can’t use EE tags in Channel Entries, only HTML (or if you’ve installed a MarkDown plugin which I’ll get to in a minute, you can use MarkDown).
This was extremely useful for one specific page I was working on. All the pages in this project that aren’t special purpose pages are served using one of two templates I created for pages, in conjunction with the Pages module that ships as a part of ExpressionEngine that let’s me set specific URLs for a page. The problem was I wanted to make a page that called for some EE code: the Contact page. Specifically, I wanted to use the tag: <code>{exp:email:contact_form recipients="someone@somesite.org"}</code>. But I wanted to do that within a channel entry since there was no need for it to exist outside my normal page structure. Google revealed this Add-on and it does exactly what you would expect. In your template, you simply wrap your channel field tag with <code>{exp:allow_eecode}</code> and you’re all set.
<h2><a href="http://devot-ee.com/add-ons/blis-download-file">Blis Download File</a></h2>
On this particular project, I needed to add the ability to download MP3s of the sermons. Of course I included a web player, and you can get the most recent 20 sermons via the podcast (also powered by EE via an RSS template), but there also needs to be the ability to directly download the MP3 file of the sermons. In the past on this website, I’ve provided a direct link to the MP3, but most browsers will simply load that MP3 and start playing it. I wanted a way to click a link and have the MP3 file download, not play in the browser. And I “could” (and have) accomplished this with PHP, but it’s not the most elegant solution. As well, I was having trouble getting the PHP to work in a single template with dynamic expression engine variables. Google again came to the rescue with this simple, but quite effective plugin.
It’s actually very simple to use. You set up a template which I elected to call “download” and put in a single line of template code:
<pre><code>{exp:download_file:serve remove_path="/path/to/file/"}
</code></pre>
footnote on <code>remove_path</code> <a href="#fn:eeaddons1">1</a>
Then you use some special template code in the “href” for the download link like so:
<pre><code>&#x3C;a href="{exp:download_file:link file='/path/to/file/{audio-name}' template='/template_group/download/'}"}
</code></pre>
<code>{audio-name}</code> is the custom field in my “Sermons” channel where I place the name of the MP3 file I’ve uploaded to the server.
So I really love that add-on.
<h2><a href="http://devot-ee.com/add-ons/http-header">HTTP Header</a></h2>
This add-on serves a single purpose. I wanted to serve the correct HTTP headers on my 404 page. Again, I “could” accomplish this with PHP, but this plugin makes this dead simple. At the top of the 404 template you use: <code>{exp:http_header status="404"}</code>
And that’s that.
<h2><a href="http://gotolow.com/addons/low-random">Low Random</a></h2>
I love Low’s EE add-ons. This one allows you to call random files or images. The EE template code for this is simple:
<pre><code>{exp:low_random:file folder="/server/path/to/folder"}
</code></pre>
That’s it. I’m using it to serve a rotation of images on the sidebar of pages that do not have sidebar content.
<h2><a href="http://gotolow.com/addons/low-seg2cat">Low Seg2Cat</a></h2>
This is something I can’t believe I lived without before now. Normally in EE, you have to use a trigger word for categories, and usually that word is “category” but it creates awkwardness in the URL structure.
For instance, most of the time, you want to have a particular template serving your categories, rather than the index template you would be using for your main entry listing. I mean you can (and I have) used the same index template for both standard listing and category listings, with some complicated variables which take a long time to debug, and have a performance cost. So normally you have something awkward like, <code>/template_group/categories/category/category_id</code>. Obviously it’s a little awkward to call the categories template, then use the category trigger word.
Seg2Cat solves this by using a simple template variable like so:
<pre><code>{exp:channel:entries channel="channel_name" category="{segment_3_category_id}"}
</code></pre>
The is the key there. That’s the Seg2Cat variable. When segment 3 of the URL is a category, it pulls the category ID into that spot. So it’s telling the Channel Entries tag to only display entries in that category ID. It’s brilliant!
And for my specific purpose, I didn’t even want the word categories to be used because I’m using categories for my Pastor’s various sermons series. So I want the language and the URLs to be reflective of that. With Low Seg2Cat, this is all completely possible.
<h2><a href="http://gotolow.com/addons/low-reorder">Low Reorder</a></h2>
Ahh, my first paid EE add-on, but soooo worth it. Often on EE sites, you want Channel Entries to be displayed by date. So normally you don’t have to worry about reordering entries. But on the Heritage site, I have several items on the homepage that are single Channel Entries that might need to be re-ordered. If I order by date, and I want to reorder, I’d have to go and manually change the date on each entry. And sorting by custom field is no better because it’s the same problem.
Low reorder creates a field type which you can add as a custom field to a Channel, which is completely hidden when editing entries, but which you call in the Channel tag in the “orderby” parameter.
<pre><code>{exp:channel:entries channel="homepageresources" orderby="resources-order" sort="desc"}
</code></pre>
This custom field has a number in it, which is determined by dragging and dropping in the Low Reorder interface. Again, brilliant.
Have I mentioned I Love Low’s plugins?
<h2><a href="http://devot-ee.com/add-ons/md-detect-page-type">MD Detect Page Type</a></h2>
I used this to detect if the URL is a pagination URL.
One of my goals was to design a really really tight website. What I mean is, if the URL isn’t part of the structure, I want it to 404. As an example:
The articles structure on the Heritage site looks like this
<ul>
<li>/articles - Lists 5 articles at a time, paginated.</li>
<li>/artciels/permalink/article_entry_url - article permalinks</li>
<li>/articles/category/category-url - lists articles in category</li>
</ul>
The problem is that without some restrictions in place, invalid URLs after a <code>/template_group</code> won’t necessarily 404. If <code>/articles/the-worship-of-god</code> is not a valid URL to an article, then the template will just default to showing all the article entires, complete with pagination. This is no good, this is just a duplicate of the /articles URL and Google penalizes search results for it. I want a 404 if the URL is invalid. So one way to accomplish this is to place code in the index template that sends anything with more than one URL segment to 404 since that template should only be used to display the the index of article listings:
(note, ExpressionEngine is not displaying the if statement below when formatted with curly braces. Somehow the templating engine is processing it as EE Code even though it shouldn’t. I should report a bug. So pretend the if statements are wrapped in curly braces instead of brackets)
<pre><code>[if segment_2 != ""]{redirect="404"}[/if]
</code></pre>
So what I am doing there is detecting if segment_2 is not empty. If it’s not then the URL is invalid and should be 404ed. But wait, there’s a problem. Segment_2 is used for pagination (/articles/P5). The problem now is that with that code, a pagination URL is 404ed. That’s no good. As much as I love ExpressionEngine, not being able to tell EE to ignore pagination in segment variables like this is a serious limitation. Thankfully MD Detect Page Type comes to the rescue:
(same deal on the curly braces/brackets thing on the if statement)
<pre><code>{exp:md_detect_page_type url_segment="{segment_2}"}{[if segment_2 != "" AND pagination_page != TRUE]{redirect="404"}[/if]{/exp:md_detect_page_type}
</code></pre>
Now we’ve added a condition that says to only 404 if the URL isn’t a pagination URL and segment_2 is not empty. Perfect. Any other URL should 404, and now it does <a href="#fn:eeaddons2">2</a> .
<h2><a href="http://www.devdemon.com/tagger/">Tagger</a></h2>
Tagger is awesome. We wanted some way to make our sermons more searchable, since it’s an audio file, you sort of need keywords… something more to search than the title. Tagger has provided this in the form of searchable, clickable keywords/tags. There are only a couple things about the way it’s implemented that make it a little harder to use than I wanted it to be, but once I understood the basics, it was fairly simple.
<h2><a href="http://utilitees.de/ee.php/trunchtml">TruncHTML</a></h2>
Very simple add-on that truncates text, but is HTML aware. I wanted to be able to display a little bit from a long article on the main articles listing, and have a click through to the permalink to read the full article. But I did not want to have two fields, one for the truncated summary that I would manually truncate, and another for the full text. There’s no reason the CMS can’t take care of that for me. And this plugin takes care of that.
<h2><a href="http://experienceinternet.co.uk/software/smartdown/">SmartDown</a></h2>
I really love <a href="http://daringfireball.net/projects/markdown/">John Gruber’s Markdown</a>. I like to write web stuff in Markdown, and Smartdown is the way to do it with ExpressionEngine. Smartdown is based on <a href="http://michelf.com/projects/php-markdown/extra/">PHP Markdown Extra</a>, which is basically just PHP Markdown with a few new tricks.
I love SmartDown. I usually only use it for myself <a href="#fn:eeaddons3">3</a> though because if I’m developing a site for someone else, they probably aren’t geeky enough to get MarkDown and want a full WYSIWYG editor <a href="#fn:eeaddons4">4</a> .
<h2>Conclusion</h2>
I think this is the most add-ons I have ever used on an EE site. I don’t like to just add a bunch of add-ons to an EE install right off that bat that I may or may not use, I add them as I need to use them.
But add-ons are definitely one of the beauties of EE. Though it will do a lot of stuff out of the box, there is also a vibrant developer community. And another nice thing is that Ellis Lab is committed to, and cultivates it’s third party dev community. In fact Ellis Lab really went out of their way to make third party add-ons better in EE 2.
<hr>
<ol>
<li>
The <code>remove_path</code> parameter simply removes that path from the name of the file, otherwise, because of the way the add-on works, it would include the path in the file name <a href="#fnref:eeaddons1">↩</a>
</li>
<li>
I have more on 404s, but I think I’m going to develop that into another article. <a href="#fnref:eeaddons2">↩</a>
</li>
<li>
I’m pretty much the only one maintaining my Church’s website right now. If I ever bring anyone else in on the development and maintenance, I’ll make them use Markdown… <a href="#fnref:eeaddons3">↩</a>
</li>
<li>
<a href="http://pixelandtonic.com/wygwam">Wygwam</a> is the best, easiest to implement, and easiest to use WYSIWYG editor and I highly recommend it if you must have WYSIWYG Channel entry formatting for like, your clients and stuff. I recently used Wygwam on a site I developed for my sister, <a href="http://frugalfarmwife.com">FrugalFarmWife.com</a>, and I was very happy with it. My only real complaint is that it does not convert inch and foot marks (as I refer to them) into proper typographic apostrophes and quotation marks. But most people don’t care as much about proper typography as I do so I live with it for client sites that need WYSIWYG editors. <a href="#fnref:eeaddons4">↩</a>
</li>
</ol>

ExpressionEngine add-ons used on my latest project

To answer the question of the headline, flexible enough to let me create a URL shortener just for this site. It should be noted I’m not a huge fan of URL shorteners. I used to use Goo.gl a lot so I could see how many people were clicking my links, but I stopped doing that. That is because I have a problem with URL shorteners in general. They hide stuff. You can’t actually see the link you are clicking on. Who knows where it's taking you.
However, having my own personal URL shortener for this site fixes that at least partly because anytime you see a URL that starts with aupro.us, you know it’s going to take you somewhere on this site. And short URLs are often necessary when sharing a link on social networking, or even in other mediums. So I decided to build one. It took me about 10 minutes.
<h2>Building the URL Shortener</h2>
So how did I build it? Obviously first of all I acquired the domain aupro.us and added it to my hosting account. It is important for the short URL domain to be on the same hosting account. Why? Because ExpressionEngine works by declaring the server path to the system files in it’s index.php file. Actually, the ExpressionEngine system files could be anywhere on the server as long as you tell ExpressionEngine the absolute server path in index.php. <a href="#fn:flexee1">1</a> You will see why this is important in a moment.
Next I created a template group called “u” which stands for URL. In the index template of the template group “u” I placed the magic code that makes the URL shortening possible.
<pre><code>&#x3C;?php

{exp:channel:entries channel="appleuserpro|linkedlist"}

{if segment_1 != ""}// Permanent redirection
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://appleuserpro.com/article/{url_title}/");
exit();{/if}

{if segment_1 == ""}// Permanent redirection
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://appleuserpro.com");
exit();{/if}

{/exp:channel:entries}
?>
</code></pre>
So what am I doing here?
<pre><code>{exp:channel:entries channel="appleuserpro|linkedlist"}
</code></pre>
This is opening the channel entries tag so that I can retrieve the URL for the entry.
Then, with the “if” statements, I’m determining whether or not someone is visiting just the URL aupro.us, or if the URL contains more.
<pre><code>{if segment_1 != ""}
</code></pre>
“segment_1” refers to the part of the URL that immediately follows the base URL of aupro.us. If segment_1 is not empty, then the code for URL re-direction will be used.
<pre><code>{if segment_1 == ""}
</code></pre>
This second “if” says that if segment_1 is empty, then we should use the code to re-direct to the home page of Apple User Pro.
<h2>One ExpressionEngine install on two domains</h2>
The next step is to copy the index.php and .htaccess file from Apple User Pro’s web-root to the aupro.us web-root. But we aren’t quite done yet. Since I’m copying the index.php from the main site, the system path is already declared in the document, but there are some other variables I need to configure. Lines 89 through 93 of EE’s index.php contain some variables that are commented out.
<pre><code>// $assign_to_config['template_group'] = '';
// $assign_to_config['template'] = '';
// $assign_to_config['site_index'] = '';
// $assign_to_config['site_404'] = '';
// $assign_to_config['global_vars'] = array(); // This array must be associative
</code></pre>
For this purpose, I only need two of those. I need to declare the “template_group” and “template” to override the defaults I have set in the EE control panel. That way, if someone loads up aupro.us without anything more to the URL, EE will not serve the default template, but will instead load my URL shortening template and redirect them to the Apple User Pro home page.
So I configured like so:
<pre><code>$assign_to_config['template'] = 'u';
$assign_to_config['site_index'] = 'index';
</code></pre>
<h2>The URL</h2>
Now the way this works is as follows. Every entry in ExpressionEngine has a text URL (this entry’s text URL is “just-how-flexible-is-expressionengine”). And so you link to an article with “template-group/optionally-declare-template-from-group/entry-URL” format. But entries also have entry ID numbers and can be called with “template-group/entry-id” format. This entry’s entry ID number is 792. So with those templates in place the url <a href="http://aupro.us/u/792">aupro.us/u/792</a> will redirect to this article’s URL of <a href="http://appleuserpro.com/article/2011/12/just-how-flexible-is-expressionengine">appleuserpro.com/article/just-how-flexible-is-expressionengine.</a>
<h2>Adding a short URL link</h2>
I then took the additional step of adding a short URL link to each entry so that I, or anyone else could easily use it. The code is as follows.
<pre><code>&#x3C;div class="permalink">&#x3C;a href="http://aupro.us/u/{entry_id}">short url ♦&#x3C;/a>&#x3C;/div>
</code></pre>
The <code>{entry_id}</code> tag does the obvious. It calls the entry ID number. And that parameter is within the <code>{exp:channel:entries}</code> tag of my template.
And that’s it. That’s how to easily build a custom URL shortener for your site with ExpressionEngine.
<hr>
<ol>
<li>One of the recommended procedures if you have an environment that supports it is to place the EE system directory one level above webroot. This provides the greatest security because the system files are entirely inaccessible from the web. I actually rearranged all my domains to employ a directory structure that is not typical for a Cpanel hosted site. I have a directory in my user root called “domains” in which there is a corresponding directory for each domain I host on the account. Inside that directory I place a directory called “html.” This is the webroot for that domain. This therefore creates a whole directory level above webroot for each domain. It is here that I place my EE system directory. <a href="#fnref:flexee1">↩</a></li>
</ol>

Posts tagged “ExpressionEngine” from the blog