I’m not a great programmer. In fact, at this point in my career I wouldn’t advise paying me to write any complex code. But I’m an excellent hacker. I love to chip away at things with my limited programming knowledge and get something working.
I wrote the working prototype for Barley. Which Jeff immediately threw out and re-wrote during his first week of working at Plain. Thank goodness! The code was pretty bad. But I can take an idea and get it to work.
A feature that I’m looking forward to seeing in Barley is the ability to drag and drop just about any elements on the page and re-order them in certain contexts. But I didn’t want to wait for it. So I hacked it.
Barley is really flexible. The site template, which anyone can provide via Dropbox syncing, dictates how Barley is to be used. From a simple blogging "application" using Red Oak (like this site) to a professional profile using Juniper (like Josh Long’s site) – Barley molds itself to how the template wants to display.
Using the same tools available to third-party template authors I hacked together a way to drag and drop paintings on the home page of The Watercolor Gallery. I then took what I learned and put that into Cypress for all Barley customers to learn from and use. Here is how I did it.
Step 1: Create an _order key
In Barley’s content types documentation you’ll see this…
You are not limited in the number of custom content type variables you would like to use. To add another one, just prepend it with the name of the content type – such as photo_album_cover, music_track, menu_item, etc.
This means that a content type can have any number of data keys. So the normal title, body, date, etc. are always there. But you can use any other data keys you need. So, my first move was to add an _order key to keep track of the order of the paintings on the home page. I did this by adding an order key to my post.html page.
So let’s assume that using that key now we’ve gone in and typed in some numbers for the paintings on the home page of, perhaps, 0-5. This can be done for blog posts or paintings, or photo albums, or events so long as you add an _order key.
Step 2: Re-ordering the home page using JavaScript
I’m using jQuery for all of the following hacks.
By updating my "repeat template tag" and adding a data-order attribute to my home page I can then know in which order to display the paintings. This is as simple as adding %ORDER% where I need the value. You can see that in this snippet here.
With a little JavaScript function called sortChildrenByDataKey (which I’ve highlighted right here) I can reorder the page based on that data-order attribute. When the page loads on The Watercolor Gallery the paintings on the top and bottom re-ordered themselves based on the blogpost_order Barley ID. Pretty slick.
But we can do better.
Step 3: Adding drag and drop re-ordering
Rather than going to the painting’s post page and updating the number manually I wanted to be able to pick a painting up and move it around on the home page using my mouse. For this, I used jQuery UI’s Sortable method.
The JavaScript for this might be a little scary to non-JavaScript gurus but essentially every time a painting is dragged and dropped on the page the data-attribute number is changed, the blogpost_order key for Barley is changed, and Barley’s internal API for saving data is called. Which is all a lot of geek to say we hacked it to work! Here is the code highlighted.
That’s it!
I cleaned up a few things by hiding the ordering number on the home page and post page using a little CSS. So all it took were a few lines of JavaScript and a few updates to Cypress’s HTML it and I can now manually curate the front page of my gallery.
I hope this post can encourage others to hack something up using Barley. Its a lot of fun and free to try it out.