October 22, 2014

Redbooth: Keeping Tabs on Everyone and Everything

by Keaton Taylor

September 29, 2014

ExpressionEngine Tutorial - Create a blog - Part 4: Templates

by Tad Ward

Daryl Ginn, an interface designer from the UK recently tweeted something I have felt for a long time: “How I use todo apps: 1. Write some todos. 2. Never open the app again. 3. Delete app.” Presumably the fourth step is to repeat. I’ve used nearly every todo app out there and at some point I end up ditching it - I can’t remember the last time I used Wunderlist and it’s by far my favorite stand alone. 

 

When I started with Blue Fish I had previously used Basecamp the most, with some Asana and a few others thrown in. Marcus was just starting to work with a task management web app called Teambox. I was interested in it’s features and abilities but when asked stuck to my guns and suggested Asana - which is basically a free Basecamp with limited features. As it turned out, I would live to eat those words. 

 

Fast forward several months and Teambox is now Redbooth and we wouldn’t function as a team without it. Out of the box Redbooth is pretty simple to understand - all the basic todo functionality is there with a few really great additions like task list templates, notification prefs and integration with Box, Dropbox, SignNow and others. This makes sharing files inside the actual task amazingly simple. When you update a file in dropbox, it updates in Redbooth as well - this continual syncing makes sharing documents, comps and memes a sinch. 

 

Templating

Our workflow in Redbooth is mostly automated. We have a basic task list for every web project that we try to follow to a T. Some projects are more complex than others and we have the flexibility to add or remove tasks as the project needs. Our default task template set for our web projects consists of 7 task lists:

 

Project Management:  This includes Client interactions, general housekeeping during our on boarding phase and various check ins throughout the project.

 

Design: Research, Visual Inventories and discussion points for the design are all contained in this list. 

 

Front-End Development: This list is a pretty basic front-end task list that includes things like “Create Git Repo” and “Create Remote Dev Environment.”

 

ExpressionEngine: Anyone who knows us know’s we’re primarily an ExpressionEngine shop, in this task list we have tasks pertaining to this like “Set Up SRS Document” and “Set Up Channels.” 

 

Punch List: This list is where we get QA feedback from team members, user testers and clients with hard deadlines on fixing them and getting everything set to launch. 

 

Project Launch: We have a few items here but it changes from project to project depending on hosting company and a myriad of other potential situations. The one constant here is a task called “Checklist” that is simply a link to the web developer’s checklist. 

 

Post Launch (Finally): This final task list rounds out our projects and reminds us to do things like post to Dribbble, write a blog post and have a post mortem on the project. 

 

Having these all at our fingertips when we begin a new project is awesome. It’s not a crazy leap that no one else has sorted out or anything but it makes things easy for us to click two or three times and get going with zero friction. 

 

Remote: Control

As you, dear reader, may or may not know, we are an almost fully distributed team. Marcus and Kara are both in lower Alabama but I reside in Southwest Missouri and Tad is in the Appalachian foothills being raised by wolf-people. Being that we’re literally never at the same place at the same time, having something like Redbooth that we can track pretty much everything in is a lifesaver. We could do this with other web apps, but I don’t think the experience would be as fluid. With Video Conferencing (I personally HATE Skype - buggiest thing ever) and Chat (We use Hipchat now but have begun playing with RB chat) being introduced, it’s hard to think that we would want to use anything but Redbooth if the integrated services work well. 

 

The Flip Side

Raving about Redbooth for like 10 paragraphs is awesome because we love it but  with love comes a critical eye. It’s not about pointing out things we don’t like about Redbooth but about seeing the things — as users - that could make the experience better. I’m not going to dive into UI changes or visual design stuff, we’re mostly talking wishlisty things that would be cool. 

 

Mac App - I could use Fluid or whatever and make it an app but I’d like to see a Yosemite desktop app that I can launch and love. I like native mac apps and thats a personal issue I’m addressing in a 12 step program. 

 

Master Colors - (Disclaimer: This is super nitpicky) I like to color code things and while I personally color code all our internal things green and whatever projects I’m working on blue, I wish there were a global color coding where an Admin could color code active projects correlated to who was working on them based on tasks. (Does that even make sense?) 

 

SubTask Headers or Separators or Something -  Within a task there is the ability to create sub-tasks and that’s awesome, but with a project that’s quite intricate it might be nice to have separators inside the sub-tasks to denote the minutiae of the things that need to be done. 

 

The Wrap Up

Redbooth has been a Godsend to our tiny team. It’s the epitome of a good web app: It just works. There is a minimal amount of set up out of the box and the learning curve is super mellow. Blue Fish gives Redbooth a stamp of approval for sure. We recommend Redbooth for any team trying to get a handle on tasks, communicate better with a distributed team or just generally keep track of what the heck you’re doing. 

 

Want to talk more about our work or what we do with Redbooth? Drop me a line, keaton@bluefishds.com or on twitter @keaton_taylor.

Learn more about Keaton Taylor

Welcome back to the Blue Fish ExpressionEngine Tutorial - Create a blog series. Part 4 is about templates. Before we begin, if you haven't read Part 1: Installation, you can do so here, Part 2: Channel Fields, Categories, Channels, you can do so here and Part 3: Publishing Entries, here.

We are now ready to setup the templates and make our blog ready for viewing.

This part of the series is going to be diving into some basics of ExpressionEngine Template creation, so having a basic understanding of how EE and its templating works please check out the Ellislab docs here.

First thing we are going to do is setup our templates to be saved as files on our server. This allows for editing of the templates straight from the server rather than the ExpressionEngine Control Panel. This step is completely optional. This way is a personal preference for us at Blue Fish. There are two ways to set templates to save as files; one is via the Control Panel (see image below), two is through the config.php file.

IMAGE OF PATH TO GLOBAL TEMPLATE PREFS

via Control Panel

On the Global Template Preferences page you'll be presented with a number of preferences. At this time we are solely worried about the last two preferences, Save Templates as Files and Server path to site's templates. The Save Templates as Files is set to 'No' as default, lets change that to 'Yes'. Next is the Server path to site's templates preference, here we want to put the direct server path to where we want to store our templates. We like to keep ours in an templates directory under an assets directory, see below for example.

1
/var/www/public/assets/templates/

via config.php file

Open the config.php file (located under sys > expressionengine > config > config.php) and directly underneath the settings for themes (we add in Part 1), add the following lines:

1
2
$config['save_tmpl_files'] = 'y';
$config['tmpl_file_basepath'] = $config['site_path'] . 'assets/templates/';

Save the file and you're set. You are now saving ExpressionEngine Templates as files.

The benefits to saving templates as files is being able to work from the server in your favorite editor, version control and it's just plain easier to maintain code

Now we have our templates saved as files, lets create our templates. Templates are arranged in Template Groups and within each group are individual templates. You can read more about ExpressionEngine's template structure here.

The first group we are going to create is our blog main page. So in the control panel go to the Template Manager (see image below).

IMAGE OF TEMPLATE MANAGER PATH

You see there are no template groups and templates. To create our blog template group click the button title New Group. After doing so you'll be presented with 3 fields, the Group name which we will title blog, duplicate existing template group leave as is and make sure to check the box for making the index template in this group the blog's main page. Once that is complete hit the pink submit button and you'll be taken back to the template manager page.

You should now see a new template called index is in the newly created group and we are now ready to actually start putting code into this template. To begin open the index template in your favorite editor or simply click the index template use the default EE editor.

Note since we started creating templates, a new directory titled default_site has been created in the templates folder. Under that folder you'll see your template groups which will contain your templates.

Template Code

Lets start our template with you basic skelton of html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-us"> <!--<![endif]-->
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0">
 
  <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
	<![endif]-->
 
  <link rel="stylesheet" href="http://bluefishds.com/assets/css/default.css">
 
  <title>Blog/Article</title>
	<meta name="description" content="Sample blog article from the Blue Fish ExpressionEngine Tutorial - Create a Blog Series">
 
</head>
 
<body>
  <div class="grid-container">
 
  </div>  
</body>
</html>

In the code above you'll see a css file, this is pulling in the styling from our in-house, responsive framework; but that is blog post for another day. We also have a default title tag and description meta tag in place. We address customizing those for individual blog entries shortly.

In version 2.8.0 of ExpressionExpression, shared layouts for templates was introduced. Most common use of this is to provide a skeleton structure to our site. We won't be using that for this basic tutorial but feel free to check out the previous link and learn more.

Once you have the above code within the template go ahead and save.

Lets create another template in the blog template group. You can either do it the server or within the EE control panel by clicking the Create a New Template button to the far right. Following the same procedure as before let's call this template article, leave the template type and duplicate an exisiting template as is. If doing this on server name the file article.html.

IMAGE OF TEMPLATE GROUP, SERVER AND CP

In the article template, copy the above html into it as well. Now we have both our blog index or listing page and our individual blog article templates ready. Both are very bare bones and now need EE code to make them work. Now lets build out the actual blog, both the listing and individual article pages, starting with the index/listing page first.

The index or listing page will be a list of the blog articles we published in Part 3. The following code below will create this list along with a category sidebar.

  <aside class="sidebar grid-20">
    <ul>
      &#123;exp:channel:categories channel="blog" style="linear" show_empty="no"&#125;   
      <li><a href="http://bluefishds.com/site">{category_name}</a></li>          
      &#123;/exp:channel:categories&#125;
    </ul>
  </aside>
 
  <section class="grid-80">
    &#123;exp:channel:entries channel="blog" limit="4" paginate="bottom"&#125;
    <article class="entry">
      <h2><a href="{url_title_path='site/article'}" title="{title}">{title}</a></h2>
      &#123;exp:trunchtml chars="100" inline="..."&#125;{cf_blog_content}&#123;/exp:trunchtml&#125;
    </article>
 
    {paginate}
    <p class="paginate">Page {current_page} of {total_pages} pages {pagination_links}</p>
    {/paginate}
    &#123;/exp:channel:entries&#125;
  </section>

First ExpressionEngine specific code you'll see is the Channel Categories tag:

&#123;exp:channel:categories channel="blog" style="linear" show_empty="no"&#125;

A few things about this tag. It'll allow you show your channels categories in a list. The channel parameter is pulling from our blog channel, the style parameter is set to linear, this doesn't insert any html and last is the show_empty parameter. This parameter hides categories that don't have any entries within it.

Next tag is the Channel Entries tag. This is the primary tag to display content you've published. You'll the channel parameter, same as the Channel Categories tag, that will pull in entries from the blog channel. There is a limit parameter which limits how many entries are displayed and a paginate parameter which is set to bottom, this setting determines where the pagination code will appear within the channel entries code. We will cover pagination shortly.

Within the Channel Entries tag you see a number of other tags such as the url_title_path. This little variable inserts the url title to the specified template url, for example the code above will render the following:

<a href="http://domain.com/index.php/blog/article/2014-mlb-playoffs-set">2014 MLB Playoffs Set</a>

Next tag you'll notice is for the TruncHTML add-on we installed in Part 1. This allows us to truncate the content you have with the cf_blog_content} field.

Last is the pagination variable pair. This will create the pagination for our blog which will only appear if there are more entries than the limit we set in the Channel Entries tag. Read more about ExpressionEngines here.

After placing the above code into the index template, save.

Let's move onto the article template. The code for this will be very much teh same but with a few slight differences. Copy, paste and Save the following into the article template:

  <aside class="sidebar grid-20">
    <ul>
      &#123;exp:channel:categories channel="blog" style="linear" show_empty="no"&#125;   
      <li><a href="http://bluefishds.com/blog">{category_name}</a></li>          
      &#123;/exp:channel:categories&#125;
    </ul>
  </aside>
 
  <section class="grid-80">
    &#123;exp:channel:entries channel="blog" url_title="{segment_3&#125;"}
    <article class="entry">
      <h2>{title}</h2>
      {cf_blog_content}
 
      &#123;if cf_blog_images != ""}
      <aside class="gallery">
        <ul>
          {cf_blog_images}
          <li><a href="{image:url}" class="fancybox" data-fancybox-group="gallery"><img src="{image:url:small}" /></a></li>
          {/cf_blog_images}
        </ul>
      </aside>
      &#123;/if}
    </article>
    &#123;/exp:channel:entries&#125;
  </section>

Again the code is very similar except here the Channel Entries tag is set to pull in a single entry from the blog channel. This specification is done via the url_title parameter. In our setup the url title for our blog entries will be in segment 3. You can read more about ExpressionEngines URL segments here.

Other differences is the removal of the TruncHTML code, having just {cf_blog_content} will display the content in the field in its entirety. There is also the inclusion of the {cf_blog_images} custom field. This a Channel Images field so some of the variables are related to that add-on. We are putting each image within a li tag and making it dispaly the small or thumbnail size we set in part 2. We also wrap this field in a conditional. This gallery aside will only appear on the page if the {cf_blog_images} field isn't empty. You can read more about ExpressionEngine Conditionals here. We will using conditionals again later on for this template.

Note that for our gallery we are also using a lightbox called Fancybox to display original sizes of the images. Additional javascript, css and images will accompany the template, all of which are included in Fancybox.

Now that we have both our templates created, let's check out the site. Head to your site; domain.com/blog, and you should see a list of 3 categories on the left, 4 blog entries and if more than 4 entries, pagination will appear at the bottom.

IMAGE OF BLOG LIST

Clicking on the categories will then filter the list with entries belonging to that category. Clicking on the entry title will take us to the individual article page (our second template).

A final step is to add some code to our article template to increase our SEO capabilities. The following code contains a couple of conditionals that will make use of the Title Tag and Meta Description custom fields. It also adds in some Open Graph metadata that some of the social networks use when pulling in information. So when you paste in a link on Facebook the Open Graph Metadata tells Facebook which images are available and what description should be used.

  &#123;exp:channel:entries channel="blog" url_title="{segment_3&#125;"}
  <meta property="og:image" content="http://bluefishds.com/assets/images/logo.png">
  <meta property="og:title" content="{title} - Blue Fish Sample Site">
  <meta property="og:url" content="{url_title_path='blog/article'}">
  &#123;if cf_title_tag == ""}
    <title>&#123;exp:trunchtml chars="36" inline="..."&#125;{title}&#123;/exp:trunchtml&#125; - Blue Fish Sample Site</title>
  &#123;if:else}
    <title>{cf_title_tag}</title>
  &#123;/if}
  
  &#123;if cf_meta_description == ""}
    <meta name="description" content='&#123;exp:trunchtml chars="36"&#125;{title}&#123;/exp:trunchtml&#125; - Blue Fish Sample Site'>
  &#123;if:else}
    <meta name="description" content="{cf_meta_description}">
  &#123;/if}
  &#123;/exp:channel:entries&#125;

The code above you want to place in your article template before the closing </head> tag. All the metadata is enclosed within a Channel Entries tag. Here we use the url_title parameter to only pull in the content for the currently viewed individual article. For the Open Graph or og meta tags we use some basic info, the logo of our site, the title of the article followed by the name of the site and the url of the article. Next is a conditional for the cf_title_tag custom field. If field is empty display the entries default title otherwise display what is contained in the custom field. The second conditional is for the cf_meta_description custom field. Same method as the title tag above, if empty show default description otherwise show what is in the custom field.

This is just some extra steps we like to take on even the simplest of sites to increase our search optimization capabilities.

This is just a basic blog setup and not the only way a blog can be setup within ExpressionEngine. A wonderful add-on called Switchee developed by Mark Croxton. This add-on is a big part of the Blue Fish Design Studio ExpressionEngine toolbox, so check it out!

Following the instructions above will allow you to setup a basic Blog section for you website. This will also help you get started with ExpressionEngine and lead you in the right direction for building more parts to your site. If you have any questions or you&'re in need of ExpressionEngine help, hit us up.

Please note that this is a simple example of how we setup blog/news sections on sites we develop. We are again using our own in-house, responsive framework for the html/css and the code samples provided throughout this tutorial are basic and can be changed accordingly to your own html/css framework or code. We are also not providing any real styling to this.

Learn more about Tad Ward

These Entries are like brother and sister