How I hacked Barley and made paintings on The Watercolor Gallery re-orderdable on the home page
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.
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.
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.
I hope this post can encourage others to hack something up using Barley. Its a lot of fun and free to try it out.