Digital Butter

We’ve moved our blog!

After talking about it for quite some time, we’ve soft luanched our new blog, The Churn. Tumblr is great and all, but we’re aiming to do some things that we need a bit more power for (MODx Revolution).

Visit: http://churn.butter.com.hk

A custom TV in Evo

A few months back I created a custom TV renderer for Evo that I thought was super cool, until I saw some of the things extJs will allow you to do in Revo and then forgot about it…

Still, I came back to a project I used it on and where I used the CMS as an editor (rather than developer) and really appreciated this TV so I thought I would show it and see if anyone had any ideas how this might be best employed in Revo.

It works off a very similar structure to Jeff Whitfields plugin for EvoGallery coupled with ManagerManager where jQuery is being used to improve/enhance an existing TV form field.

My requirement in this case was to have a list of resources on the homepage be displayed in a specific order, whereby the admin is supposed to be able to choose which resources are displayed as well as in which order to display them. In context, this site is an F&B portal that frequently reviews and promotes restaurants, hence the need to ‘promote’ certain resources on to the homepage.

I have seen a couple of tutorials now on how to promote resource to the homepage using TVs (on the actual resource itself) and applying a TV filter with Ditto. That can work, but in this case I want to order the resources too, so a simple TV on a resource isn’t going to work. Plus, drag and drop reordering would be pretty neat, clients have come to expect that after all.

Long story short - here’s the TV in action, I have to give most credit to the jQuery plugin developer for this one, I’ve simply applied his brilliant plugin to any multiple select field in the resource edit panel:

So behind all of that is a normal multiple select TV field, but with the enhancements that the jQuery plugin gives you, you’re now able to actually sort the list as well as see all of the items you’ve selected from the list. The quick search is pretty cool too - especially when your list starts growing past the 100 mark. It’s all done client side so this is only scalable to a certain extent.

Now to actually using the TV itself, I’ve created a custom snippet that reads the TV value and processes the ID’s of the selected resources one by one *in order*. Code looks something like this, but don’t hold me to it:

<?
//assume tvValue is passed in a snippet call
$tvValue = (isset($tvValue)) ? $tvValue : ”;
$resources = explode(“,”, $tvValue);
foreach($resources as $resourceId){
     //load your resource fields here and apply templating here
}

?>

Next up - applying this to revo using MODext!

- JB

Postmark app + MODx

We’ve got a few projects on right now where email delivery is really important (ecommerce order confirmation etc). Postmark seems to check all the boxes for features, pricing is fair, and they have a nice API for us to be able to integrate it into our own ‘app’.

I’m about 25% through these basic ‘wireframes’ for the email control panel we’re intending to use in multiple MODx Revolution projects. The panel will be a third party component (3PC), initially integrated into a shopping cart package that we’re also working on.

Early days… but so far so good, it’s crazy how quick you can go with MODext =)

Proof that using extJs for the MODx manager was a great decision

I think this is an example where we’re *really* starting to see now the power of the new MODx manager together with extJs. I can’t wait to see what else people start to come up with as more start learning MODext.

zaigham:

RT @splittingred: Updated Gallery 1.0 for #modx #revo - now adds custom TV with resizing/rotating/crop/more : http://bit.ly/8ZyHWD

Some vids of this in action:

http://assets.modxcms.com/videos/gallery-crop2.mov
http://assets.modxcms.com/videos/gal-resize.mov

I almost didn’t notice that the ‘Gallery Browser’ is not in fact the MODx Browser… but something much more streamlined for that specific TV. Looking forward to poking through Shaun’s code to see how he did that =)

Custom backgrounds on Shi Wai Yuan

One of the cool design elements of Shi Wai Yuan is the dynamically changing mood-setting background of the site. At this point the site has 6 different backgrounds (grapes, wood, leaves, sky, steel & carbon fibre), each supposed to be somewhat relevant to the section of the site being viewed; so you’ll find the background of the site is grapes when you’re viewing the wine and spirits section of the site, and greenery when you’re browsing the health section.

^ A couple of screenshots showing the different BG’s

This is actually pretty easy to do - we’re just applying different classes to the <body> tag of the site, so that different background graphics can be loaded via CSS.

body.leaf {
    background:url(“../images/background_leaf.jpg”) repeat scroll 0 0 #EFEFEF;
}

^ This loads the site with leaves in the background.

body.sky {
    background:url(“../images/background_sky.jpg”) repeat scroll 0 0 #EFEFEF;
}

^ This loads the site with clouds in the background

So the CSS is very simple, we just need to be able to define which class the page should load with, depending on the section of the site we’re in. This is also really simple using MODx Revolution, you can create a Template Variable for every template, set the type as ‘image’ so that your content editors can select images from the resource browser and you can then define your <body> tag in your templates as so:

<body class=”[[*BackgroundImage]]”>

For obvious reasons, you don’t want to have to do this to EVERY page on your site, that would be a painful chore (and your editors might forget)… So, there’s a few options, the simplest would be to use a default value for the template variable. For our needs we opted to use @INHERIT for the default value of the TV, meaning that we can define the image just once at the top level and all sub pages will inherit it’s parents’ field value (and so on up the tree). This means that by default, if we only set the field for pages at the root level of the site, then all pages beneath root level will have the same background as it’s ‘ultimate parent’.

^ TV config

(Evo is also capable of this in the same manner described above, but you should be using Revo by now =P)

The best part about this is the flexibility - it gives you the power to set a different background at the page level if you need to, but also allows you to change the background of an entire section by just setting one field (for those of us who are lazy).

More info on @INHERIT in these two links:

• http://www.gregorysmart.com/2010/04/02/modx-at-bindings-inherit/
• http://sottwell.com/tv-bindings.html
• http://svn.modxcms.com/docs/display/revolution/INHERIT+Binding

China Life Style Portal `Shi Wai Yuan` Launched using MODx Revolution

Today we’ve soft-launched a new site called ‘Shi Wai Yuan’ or ‘世外源’ in Chinese. Here’s a little intro, taken from the actual website:

Shi Wai Yuan is a luxury lifestyle website that focuses on Wine, Travel and Leisure, Luxury Goods, Health, Sports, Automobiles, Entertainment, Culture and Etiquette, Sustainability and being Green and Environmentally conscious, Cuisine and Culinary Arts, and Homes and Property. Education is one of the core elements of Shi Wai Yuan.

^ http://en.shiwaiyuan.com/about/our-philosophy.html

It’s aimed at the Chinese market primarily, and it has some interesting and unique content - I’ve enjoyed watching the tongue-in-cheek etiquette videos especially:

For a site like this we wouldn’t choose to build it in anything other than MODx Revolution.

Right now we’ve got 2 contexts setup for the site, one for each language. But we’ll be adding a third when we launch an ecommerce section of this site in a month or two.

Having launched a handful of sites making use of contexts, I have to say I think it’s my favorite addition to MODx and I think it extends its’ capabilities exponentially.

In case it’s of interest, here’s a list of the snippets we used to develop this site, accompanied by some of our own custom snippets of course:

• getResources
• FormIt
• GoogleSiteMap
• Breadcrumbs
• Gallery
• SimpleSearch

The site is built in two languages, English & Chinese. We’ve done quite a few multi-lingual sites recently, but this one has by far been the most smoothly and efficiently executed now that we have learned from our past experiences with translation management.

One of the rules we will be sticking to is quite a simple one: as a developer, you are not allowed to close a file in your IDE if even one measly bit of hard coded text is left in there… chances are, you’ll forget about it and hunting down loose hard coded language strings is not a fun job for anyone.

I’m also really impressed at how fast this whole system is running - without any specific extra work other than using the MODx caching system, the pages are rendering in around ~0.1 seconds - and that’s before we’ve even had time to do any heavy optimization work or tried out any of the advanced caching abilities (e.g. memcache).

Evo FTW!

Coffee, Kettle chips, and Evelyn Lin (NSFW). Those are just a few of the inside jokes that make the office so incredibly fun (and I’m not just being paid to say that!). All jokes and fun aside, learning MODx has been an incredible experience.

I remember back in January, when I first joined the team, I was still unaware of any CMSes. I had learned to code HTML and CSS, and then tried to read up on bits and pieces of PHP. I’m a good learner, but I’ve never had someone who’s had the patience of personally teaching me how to do it.

And then I built my first MODx site on Evolution. Instantly, I understood the concept. What was there not to get? That should be the pagetitle? Replace it with [*pagetitle*]! You need to use another field in there? Replace it! Essentially, it was a search and replace game. Just replace everything that needed to be dynamic, and you had your original website again. Converting frontend code to a CMS was just that easy. With that, I fell in love.

This past weekend, someone made a prop bet with me. We had received a project with a client who’s from a design firm. They had already provided a “website” (I use that term loosely, because if you had seen the source code, you would’ve cried out in horror too). So the prop bet was this: build a website in a workday, and I would get a packet of Kettle chips (salt+pepper is absolutely money. Don’t let anyone tell you otherwise). Eventually, I managed to get the deal to doing it on a weekend, while getting 2 personal days in return. We shook.

So with the difficulty level only ever rising to finding hex color codes, I pretty much re-frontend coded the site, while at the same time, adding in placeholders. I woke up at 4pm. Made myself some pasta. Sat down at 5pm, and started coding. No distractions, no meetings, just a perfect work environment. I finished the whole thing by midnight.

It was amazingly fun. Beating the deadline. Being able to consolidate my knowledge of MODx without having to look up anything in the documentation. I was already well-versed, knew exactly where to start, and what my direction was. I built a website on my very own, without any questions asked. (I even had time to insert all the content too.)

Granted, it’s taken me 5 months to get to this stage, with many people supporting me along the way, being patient with me, teaching me all that I needed to know. I’m a naturally curious person, and it’s helped me learn so much. I know we’ve been getting a lot of rep for building out Revo sites, but in all honesty, the simplicity of Evo gets so much done. (Earlier today, James accidentally wrote out [[+session.lang]] on an Evo site, and I had to remind him that he was back in Evo.)

- Eve Lin

PS - Some day I’ll gush over my love for keyboard shortcuts, Reddit, Mac apps, multi-finger swipes, bacon, funny comments in source code, our inappropriate jokes, web_assets, and my hatred for screencasts.

Dynamic Right Column setup in MODx Revolution

We’re building out a large scale bilingual portal using MODx revolution (due to launch in 10 days), and because of the range of different content the site has, we’ve had to create a kind of ‘sub-templating’ strategy for our templates.

The idea is to keep the number of site templates in check - too many templates always leads to a maintenance nightmare - for us as the developers as well as the end user CMS admins.

In this particular site, we have a 3 column layout that goes as follows:

• Left sub-navigation
• Content area with resource specific content for an article, or if it is a folder, then a list of recently edited articles inside that folder.
• Right column with varying content, depending on the section of the site that you are viewing. For example, when viewing a page within the alcohol & spirits section of the site, the right column should feature a top 10 list of wines and a top 10 list of champagne. Those top 10 lists aren’t used in other sections of the site. In some scenarios, we may also want to override the content of the right column for one single page.

So we need to give CMS admins the ability to choose what sits inside the right column, and in what order it should be showing.

Internally we decided to name the right column blocks as ‘widgets’. We decided that we would be able to build everything we needed with only two templates - one for article folders, and one for articles themselves. Both templates have been assigned three template variables, where each one is intended to load a widget in the right column.

We’ve also created a category in the chunks tree that will contain all available site widgets. If we need new widgets later on, they will be inserted inside this category and will become available for selection for CMS admins.

^ How we’ve organized the elements tree.

We’ve previously used categories for organisational purposes only - but in this case there’s actual functional use (see @SELECT binding below). 

The three right widgets template variables have been setup as ‘single select dropdown lists’ where options are drawn dynamically from the right widgets chunks category using an @SELECT binding:

@SELECT name FROM modx_site_htmlsnippets WHERE category = 7

The default value of the TV has been set to @INHERIT, meaning that the choice of right column widgets will cascade down the resource tree, unless a CMS admin decides that they wish to override the configuration for any single resource.

So now that we have assigned those TVs to our two templates, here’s how it renders on the resource edit page:

Lastly, to actually render the widgets inside the right column, we have this block of code inside the template:

<div id=”ls-right-col”>   
    [[$[[*First]]]]
       
    [[$[[*Second]]]]
   
    [[$[[*Third]]]]
</div>

The MODx parser will evaluate each of those tags as follows (in the example that Top 10 Wines has been chosen):

1. [[$[[*First]]]]
2. [[$Top 10 Wines]]
3. Contents of the Top 10 Wines chunk, which can contain any content you like.

More to come on this new portal soon =)

You know it’s time to change hosting companies when…

Recently, we’ve been planning on consolidating the various hosting plans that we’ve collected onto a single (new) server, but as is often the case in this industry, it’s difficult to find time for these in-house things. This month, we’ve had a lot of trouble with one of our providers, who happen to be hosting the main bulk of our DNS records. After the 3rd instance this week of the DNS being down (not to mention the entire server being down for 48 hours a couple of weeks ago), we made the decision to go through with the migration ASAP when we received this, very enlightening response to our support ticket.

Support Ticket #1940 has been updated

Description:
Hello,

Please check now.

Thanks

So, I’ve spent the last few days setting up a shiny new cloud server to host all of our projects. Once set up, the only major issue was the lack of fancy control panel to manage the virtual hosts. While this may suit the developers down to the ground, our interns and office staff, who often get the pleasure of this grunt work, would struggle with the Linux CLI. After exploring the existing options and being unable to find anything suitable we decided to build one.

I started by setting up a basic control panel that would store these sites and the full virtual host entries, based on a template, in a MySQL database. I then wrote a PHP CLI script to pull the entry from MySQL, and if necessary create a vhost file and the document root/log directories. I modified Apache’s init script to call my PHP script on start/reload. Perfect!

Next, came the issue of being able to reload Apache’s configuration after adding one of these sites. I created another script that would reload Apache if a certain file existed (created by my control panel), then delete it. Finally, I set up a cron job to run this check every minute.

…Just like a bought one.

- Jude.

New Blog coming soon

I can’t resist showing some kind of teaser - following in the footsteps of Jason & Shaun, we’re in the middle of building out our shiny new (MODx Revolution powered) blog to showcase some of the more technical & intimate details of what goes on here.

We’re planning to start by blogging about building the blog itself - as well as the basics, it’s going to have a couple of ‘experimental’ cool features and we’ve given ourselves an excuse to build 3PC’s, custom TV input types and custom TV output types.

Looking forward to launching it after we’ve skinned it =)

 ^ Wireframes for the blog - to be passed onto our designers.

^ Backend in development…

The first thing that struck me was how many *good* packages are already available for MODx in a short space of time since we started building sites in Revolution (most coming out of Shaun McCormick’s underground lab). You can build a blog very very easily now using a few core snippets and even through drag and drop from the elements tree.

Adding special touches isn’t hard either - I installed Shaun’s Gallery package and was amazed when I turned on the gallerific plugin, dragged the Gallery element into a document and it just worked - even without adding my own css.

zaigham:

RT @splittingred: New: SimpleSearch, a simple search Extra for #modx #revolution http://bit.ly/dAnSub

I heard from Jason and Ryan that Shaun is known for pumping out quality code in a 10th of the time a normal human being would be - now I’m starting to see they weren’t lying as this stream of amazing packages keeps coming and coming.

I have no idea how he keeps this up but it’s amazing to watch…

Wufoo + FormIt + Lexicons = Time saved =)

Wufoo is a pretty neat tool - the UI is awesome and the service itself is brilliant. We’ll be using it for a Fortune 500 company website that we’re building at the moment.

In the meantime I’ve started to use it to help me export multilingual forms to be used externally with FormIt in MODx revolution. Saves a few important minutes here and there.

2 new revolution sites coming soon

This week we’ve been working on getting two new MODx revolution sites close to completion. After learning lots with a couple of recently launched large scale sites our workflow is becoming more and more efficient. Will share more on that later =)

These two sites we’re building are both bi-lingual (english + chinese) and both have ecommerce sections. One in particular will be getting quite a bit of press up in China, and we’ll be excitedly blogging about it as that date approaches.

I’m really starting to appreciate the power of using contexts in Revolution, the screenshot below shows 3 contexts for one of the sites, using this tutorial we’ll be launching the site with subdomains for each context:

store.domain.com, en.domain.com and domain.com - elegant and tidy =)