Building Viget.com In EE (Part 1)

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="https://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).

{if segment_2 == url_title} {embed="blogs_global/partial_comments" blog_name="{blog_name}" root_path="{root_path}" image_path="{image_path}"} {embed="blogs_global/partial_comment_form" blog_name="{blog_name}" root_path="{root_path}" image_path="{image_path}"} {/if}

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.