"Where do I edit this &%*# page content?!". It's a question (i.e. panic) that no designer wants to hear from their client - especially when this content is quite nested in a site's architecture. Creating a positive admin experience can often times be difficult when working on robust platforms, NationBuilder being no exception.
Luckily, with a little bit of Liquid and a creative disposition, we can make editing theme content more intuitive and accessible from the client-side. Here are a couple of great examples from the Architect-certified Wire Media:
Direct links on the client-side using Liquid outputs
The team at Wire Media has made control panel navigation from the site itself a cornerstone of their NationBuilder theme designs. Here we'll take a look at their design and implementation for Big Up Kidz.
The subtle "Edit" copy is what the user sees if they're logged into the control panel and have admin permissions (i.e. ability to edit site content). This is achieved simply by running a Liquid conditional that checks for admin status and dynamically outputs the page links if said conditional is satisfied.
You'll notice there is a parent-to-child relationship in place. On the client-side view, this code snippet represents a main (parent) content block and four calls to action (children). Each one of these action items is actually its own subpage of the "4_ways_to_get_involved" parent page and, thus, each has its own unique URL and WYSIWYG editor in the control panel.
This allows us to run three different outputs:
{{ child.basic.content }}{{ child.admin_edit_url }}{{ child.name }}
These outputs generate the main WYSIWYG content, the control panel link, and the title of the page respectively. So instead of admins having to hunt through layers of page structure in the control panel, the links are visually portrayed per their placement on the site. Wire Media also does a nice job of commenting on the start/end points of what the code actually does for new designers coming to the party.
If the user is not logged in nor an admin, the "Edit" copy will render invisible.
Multiple elements from the same page
A similar method applies to content accompanied by an image, like a blog post, that is displayed on the homepage. On the #GreenForAll site, Wire Media achieves this by outputting the most recent image uploaded to the blog post's files area.
{{ blogpost.attachments.first.url }}
This, in conjunction with its associated outputs, creates a fully customizable element that is much easier to update when viewed from the client-side as a logged-in admin. With a touch of explanatory copy, admins can also read explicit instruction on how to manage files.
It's also important to note how these template files are structured - which is really at the designer's discretion. Though all of this custom Liquid could theoretically live in the broad layout.html file, it can make for a tedious task of finding the snippet you need.
Instead, these code blocks can be partitioned out into their own partial HTML templates and aggregated in a single template through the use of {% include %}
or {% subpage %}
tags. This allows for a lot more brevity in templates and makes code adjustments a breeze when an effective file naming convention is adopted.
Taking this to the next level...
Like site maps? Great! Next week we'll dive into how to generate comprehensive site maps and zoom out on the admin editing experience.