Close and Go BackBack to Viget

Building Viget.com In EE (Part 1)

Doug Avery
Doug Avery, ON THE TOPIC OF Development and Tips and Tricks
Apr22 11

When we decided on the new strategy for Viget.com, a few technology options were considered for the relaunch. We needed a platform that:

  • Could accommodate the types of content (five blogs, five blogrolls, Flickr feeds, team member pages, work pages, careers) we wanted to add to the site
  • A designer could build without in-depth programming knowledge
  • Allowed us to manage the structure of the four sub-blogs

ExpressionEngine was the clear choice, with powerful customization options and a great community behind the scenes. Still, with EE's depth of possibilities, we had to figure out a few tricks along the way in order to get what we wanted out of it. In this post, I'll talk about creating multiple blogs with common structures through variables, losing the nefarious /comments URL, and setting up a preview option so your bloggers can see how their posts look before publishing them.

Four Blogs, One Structure

Setting up RSS, comments, sidebars, and authors on one blog is enough work, but doing it on four could potentially be a huge pain. Thankfully, we found a workaround: Reusing most of the structures by cascading variables down through the templates. This is done through keeping separate template groups for each blog, as well as a “blogs_global” template group that houses all the structural pieces.  Example: We start the index page by assigning variables like blog_name (which is the URL, folder for the stylesheet/images, and the weblog name).


{assign_variable:blog_name="inspire"}
{assign_variable:root_path="http://www.viget.com/"}
{assign_variable:image_path="/images/inspire"}
{assign_variable:weblog_title="Web Design Blog: Web Design & Innovation in web standards : Viget Labs"} 

Now, we can pull in the blog-wide header from the “blogs_global” template group:


{embed="{blog_name}/partial_header" blog_name="{blog_name}" root_path="{root_path}" image_path="{image_path}"  weblog_title="{weblog_title}"}

At the top of that template, we re-assign those variables using the same code, only with “embed:blog_name” where variables like “inspire” would go. Using this approach, we can put in more structural pieces, stylesheets, and other information just by making sure to carry the variables down into each new template we include.  A twist on this is to not just use global includes, but entire page, like with our Search Results page. We wanted standard behavior for this across all four blogs, but we needed the results to appear in the blog template the user searched from. The solution was to set up a dummy page in the Inspire group, with the assigned variables (like on the index page) and the following embed:


{embed="blogs_global/page_search_results" blog_name="{blog_name}" root_path="{root_path}" image_path="{image_path}" weblog_title="{weblog_title}" subpage_title="Search"}

A search redirects users to inspire/search, which simply pulls the full structure of the search page from blogs_global and passes in the correct variables. The global version of search gets all the header and footer includes based on the blog_name variable (which matches the template group name):


{embed="{blog_name}/partial_header" blog_name="{blog_name}" root_path="{root_path}" image_path="{image_path}" weblog_title="{weblog_title}" }

Surprisingly, the RSS even worked this way, which allows us to tweak our RSS setup without needing to copy/paste it across all four template groups for testing. (An even easier way to do this would have been using segment_1, which produces the same string as “blog_name” on our site. We didn’t do this because we might move the blogs to addresses like inspire.viget.com, which might produce some issues with the segments)


Saying Goodbye To /comments

By default, EE blogs have a template called “comments” that a) shows comments and b) allows users to comment. If users want to do these things, they have to go to (site.com)/comments/(your_entry_name). The downside of the /comments URL? You end up with mixed-up entry URLs that are a pain to link to and track correctly. So, let’s get rid of it!  We need to do two things to remove /comments from the URL structure. The first is getting the index template to display full entriss and comments when a user is viewing a single entry. We can pull this off by matching the url_title of the current entry against segment_2 (from within the weblog tag).




Inside each entry, we’re now testing to see if the URL a user is viewing matches this specific entry. If so, we know that EE is only showing one single entry, so we can roll out the comments and comment form.  We’re not done yet: You’ll still see the occasional /comments show up in your analytics if you stop here. That’s because when users comment, EE redirects them to /comments. This isn’t so bad, but let’s fix it anyway. Go into the path settings of the blog and just trim the comments/ off of the “comment page URL.” After commenting, users will get redirected to the current post in the current blog, and anchored down to the top of the comment list. Hooray, no more /comments! (thanks for the tip, Jacob!

)


“Previewing" Entries

The Viget team has really tested the limits of the platform in the past month, throwing in photos and javascript and code blocks to really get their points across on the blogs. The downside of all this has been that they often needed to test live: By default, the site didn’t have a way to “preview” entries before publishing them.  No longer! Due to popular demand, we whipped up a two-part solution using some helpful tips from the EE message boards. The first is making the Preview template: We set up a duplicate of the index template called “preview,” and embedded two extra variables in to the partial_posts include (partial_posts is what we contain the main weblog tag in).


{embed="{blog_name}/partial_posts" blog_name="{blog_name}" root_path="{root_path}" image_path="{image_path}" weblog_title="{weblog_title}" subpage_title="Blog" status="open|closed"  show_future_entries="yes"}

Next, we need to get those variables into the weblog tag itself. We assign/embed them at the top of partial_posts, like so:


{assign_variable:status="{embed:status}"}
{assign_variable:show_future_entries="{embed:show_future_entries}"}

and in the weblog tag like so:


{exp:weblog:entries weblog="{blog_name}_blog" orderby="date" sort="desc" limit="5" status="{status}" disable="member_data" show_future_entries="{embed:show_future_entries}"}

Finally, we had to go into each weblog under Admin and change the Live Look Template under the Path settings, and change the “access” of all the preview templates (under Templates) so users can’t get sneak peeks of unfinished articles. Now, the team can try out new ideas without the fear of the entries showing up on the live site.


N00b Alert.

While Viget as a whole has a lot of EE experience, working on Viget.com has been my first real attempt at building out a site on the platform. If there’s anything I could do better, anything I messed up, or anything you’d like me to take a look at in your setup, let me know in the comments.

Jacob Fentress said on 04/23 at 10:46 AM

Doug,

Very nice article. It’s been a while since I set it up on a site, but I believe you can change where the comment form returns a user without adding your (very clever) hidden input to the form.

There is a field for comment path on the same page in the admin where you changed the Live Look Template settings. You’ll have to do it for every weblog, but it should fix your redirect issue without extra code in your forms.

Doug Avery said on 04/23 at 11:03 AM

I can’t believe how many times I’ve seen that path and not understood what it was for. Thanks for for the tip, I’ll update the article to reflect it.

Michael Sigler said on 04/23 at 12:18 PM

I love seeing behind the scenes looks at how people are building their sites. I’m a large fan of EE and have been building sites on it for a while now. These are some very useful tips that I hope to use in the future. :) Well done and thanks.

Alex said on 04/23 at 01:02 PM

I thought http://b2evolution.net/ could do a lot of it, no?

Jindou said on 04/25 at 10:00 PM

Hi, great article!

I agree that EE falls short in that there is no staging platform.
Do you guys use EE much then for your other sites?

Doug Avery said on 04/26 at 11:58 AM

Jindou, we’ve had the same problem, and we’re slowly working through a solution that allows us to stage a site and use a kind of Subversion system on it.

Most of our sites are built in Rails, but EE is a valuable platform that allows the design team to build less interaction-heavy sites without requiring much developer time.

scl said on 04/30 at 01:54 PM

hi, great artticle, and really great blog :).
sorry if i’m OT but i dunno where to ask this question…
how can i make an effect like ur avatars in my photos? ty in advance.

Doug Avery said on 04/30 at 01:56 PM

scl, I’d have fun explaining that...maybe I’ll finish up this series with a post about some of the design techniques.

scl said on 04/30 at 03:15 PM

ok. i’ll be watching the blog ;)

Kelly said on 08/06 at 01:21 AM

I agree that avatar effect is pretty cool, was it done is PS?

Doug Avery said on 08/06 at 08:00 AM

@Kelly yeah, it’s mostly done in Photoshop. You can read a full tutorial here.

We're The Designers

at Viget Labs. We write about design news, trends, techniques, buildout, inspiration, CSS, and our projects.

Know Someone?

Viget's hiring a Senior Ruby on Rails (RoR) Developer. Find out more »

Recent Comments

Hi Doug!

I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....

Subscribe to Comments RSS RSS

Contact Us

Have any questions, comments, ideas, or secrets to share? Let us know.


Sorry, you need to have Javascript enabled to use this form. (Don't blame us, blame the spammers!) If you'd like to contact us, please visit our Contact page.