Nav for mobile
The Mechanism


We are building a site in which we are using taxonomy term page templates to display some content. One of the requirements is to include a section at the bottom of the page with tabbed content which is related to the current term.
The page path will look like this: site.com/topics/topic-name. Where topic-name is a taxonomy term name. For this project, we’re using the excellent Quicktabs module.

First we create the view which provides the Quicktabs content. The view will display content based on the taxonomy term being viewed, so we add a contextual filter (‘arguments’ in D6) based on the Term ID. Normally, the contextual filter will get its parameters from the URL, but we’re using pathauto to make the URL look nice and so the taxonomy term name as represented in the path will not translate to an argument that the view can use.

Add contextual filter

Add contextual filter

At this point, the view won’t work correctly, since it is expecting a term Id and the path arguments will be text. But that is ok, we’re not done yet.

What we need is a way to pass the taxonomy term id to the view, but we must do so through the Quicktabs object.
Quicktabs is very cool, but as you can see in this screenshot, there is no way to pass the term id to the view with this form when the term is not in the URL.

Quicktabs settings

Quicktabs settings

As with the view we created earlier, we’ll set this up and move on to the next step which will tie all of these parts together.

We created a taxonomy term template to theme the display of our terms, and that gives us access to the term id, $tid, and that is precisely what we need to feed to our view! In our term template file we print out the terms fields like we want and then at the bottom, we add a few lines of code that will send the term id to the view through the Quicktabs object and then render it.

Here’s the code:

//Load the Quicktab instance and assign it to a variable we can manipulate
$qtabs = quicktabs_load('topic_tabs');
foreach($qtabs->tabs AS $item => $id) {
// Here we pass the $tid to the 'args' element of the each tab
$qtabs->tabs[$item]['args'] = $tid;
}
// Create a render array of the newly modified Quicktabs instance.
$quicktabs = quicktabs_build_quicktabs('topic_tabs', $overrides = array(), $other = array());
print render($quicktabs);

And here is the resulting themed and tid aware Quicktab:

Quicktabs with filtered view content

Quicktabs with filtered view content

Now, when we visit any term page, we will see the content and at the bottom will be the Quicktabs with the relevant content.
This can be extend in several ways. You can alter the tab titles, default active tab, the tab order, etc. all on the fly based on any number of variables.

References:

June 10th, 2011  |  

The Thinking Mechanism is a series of weekly posts, published on Fridays, covering the ideas The Mechanism is thinking and talking about with our peers and clients.

This one is going to be short.

On Monday, at the WWDC, Steve Jobs introduced to the world Apple’s vision for the future of computing by revealing what Mac OS X Lion, iOS5 and iCloud will be like. It was a relentless, software-focused 2 hours of demo after demo showcasing improvements, enhancements, new features and computing innovations in what most tech followers have agreed was an overwhelming show of forward thinking. Those looking for new hardware announcements had to settle for the new massive data center, not what they had in mind but hardware nonetheless. When taken as a whole, what is coming out from Apple, Google, Amazon and Facebook (The Gang of Four) is defining what the future of technology is going to be. Apple’s announcements on Monday will certainly change how we work day to day, but also the kinds of work we can produce. We are at the threshold of a very exciting future.

• If you can, you should watch the keynote via stream or podcast.
Listen to John Gruber’s reaction for insight from an Apple commentator.
Listen to Marco Arment’s perspective as a developer affected by some of the new features announced.
• Do you agree with Bob Cringely’s assessment that iCloud’s real purpose is to kill Windows?
• Has the PC really been demoted?

• If you don’t have much time, here is everything you need to know about WWDC 2011 in one handy list.

December 03rd, 2008  |  

theMechanism has been using Subversion for just over a month now. The following is a quick guide to installing and working with Apache, Subversion and SvnX on Mac OS X:

Apache, Subversion and SvnX on Mac OS X

Apache is the local web server (used to view and test files in the working copy), Subversion is the version control software and SvnX is a GUI-client for Subversion.

Before we can use Apache, Subversion and SvnX, we need to check:

  1. Is Apache running?
  2. Is Subversion installed?
  3. Is SvnX installed?

Apache

To test Apache, fire up the browser of your choice and enter

http://localhost/

into the address bar. If you do not see an "Unable to connect," "Can’t connect to server," or "Error! Connection closed by remote server" screen, Apache is running.

If it is not running, open System Preferences. Under "Internet & Network," choose "Sharing." Make sure "Web Sharing" is checked ("Personal Web Sharing" in Tiger).

Mac OS X Internet & Network Sharing window screen grab

Note that

localhost

is pointed at

/Library/WebServer/Documents/

.

Subversion

To see if Subversion is installed, launch Terminal (Applications | Utilities | Terminal). At the prompt, type:

svn --version

Some information on the version and build should appear. If not, Subversion is not installed.

Mac OS X Terminal screen grab showing results of running svn --version.

If Subversion is not installed, download and install the latest version from http://www.collab.net/downloads/community/

SvnX

To see if SvnX is installed, check for svnX.app in the Applications directory.

If it is not there, download and install the latest version from
http://www.lachoseinteractive.net/en/community/subversion/svnx/download/

Working with Subversion via SvnX

Standard Subversion workflow:

  1. Check out a working copy
  2. Make edits to the working copy
  3. Commit the edits to the repository

Checking out a repository

Screen grab of SvnX's Repositories window.

Launch SvnX and set the focus on the "Repositories" window.

Click the "+" button to add a repository.

  • Change the name to something descriptive.
  • Enter the path to the repository.
  • If required, enter your user name and password for the repository.

Once a repository has been added, it will appear in the top half of SvnX's Repositories window. Double-click on the repository to open it:

An open repository in SvnX.

Click the "svn checkout" button at the top of the window and navigate to a directory below

/Library/WebServer/Documents

. Click the open button and SvnX will download the repository to your local machine.

Close the current window and the SvnX "Repositories" window.

The Working Copy

Set the focus on the SvnX "Working Copies" window. Note that SvnX has added a working copy after check out. Change the name to match the descriptive name in the previous step.

Screen grab of the SvnX Working Copies window.

Double-click on the working copy in the top half of the "Working Copies" window. The main thing to be aware of here is the "Update" button. Click this to refresh your local working copy with any changes made to the repository by any other team member.

In Finder, navigate to the working copy, open index.html in your favorite HTML editor, make some small change and save index.html.

Switch back to the active working copy window and click the "Refresh" button at the top of the window. You’ll see that index.html is added with a "M" (modified).

Screen grab of an open working copy in SvnX.

If you're happy with the change and have previewed it to make sure everything is working, press the "Commit" button on the right side of the screen.

Add a meaningful commit message and press commit.

Version control principles

  1. Update often!
    1. Keep your working copy up-to-date by updating often.
  2. Commit early and often!
    1. Early and often means make atomic changes. Change one thing, test and then commit with comments.
  3. Never commit broken code!
  4. Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.

July 15th, 2008  |  

Version 2.6 "Tyner," named for jazz pianist McCoy Tyner, contains a number of new features that make WordPress a more powerful CMS: you can now track changes to every post and page and easily post from wherever you are on the web, plus there are dozens of incremental improvements to the features introduced in version 2.5.

Read about all the updates at the WordPress blog and download 2.6 here.