tobypitman.com

On Holiday!

Toby — Wed, 10 Feb 2010 12:09:10 +0000

I’m now offically on holiday! Been about 10 years since I took a proper one so it’s well earned!

No computers, no phone (I am taking it but won’t answer!). Back on 18th of March….with a tan!

Link to ‘child pages’ in Wordpress with ‘the_post_thumbnail’

Toby — Tue, 22 Dec 2009 18:56:53 +0000

I thought I’d share this with anybody who’s interested. I’m currently developing a site based in Wordpress that has a lot of nested child pages.

I’ve used the new ‘Post Thumbnail’ feature in 2.9 to link to the child pages from the ‘Parent’ page using the Post Thumbnail as an image link. The reason for this is the client no longer has to faff about with customs fields, which are confusing to non-web savvy users.

This might be useful for people building portfolio sites for artists.

The code I’d previously been dabbling with pulled in a custom field called ‘Imagelink’ from all the child pages associated with the parent page providing an image link to that child page.

The code below uses ‘get_the_post_thumbnail()’ so all the client has to do is upload an image using the new ‘Post Thumbnail’ feature in every new page as the link image.

Insert it into a page template in wordpress called ‘childLinks’ or something like that.

$pages = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc&parent='.$post->ID);
$count = 0;
foreach($pages as $page) { $content = $page->post_content;?>

echo get_page_link($page->ID) ?>"> echo get_the_post_thumbnail($page->ID, 'full'); ?>

} ?>

Pretty handy and more CMS like.

IGF Bath 2009

Toby — Tue, 11 Aug 2009 11:16:28 +0000

Been a while since any updates here, and I mean a while! Been busy in the studio and I’ll write about what I’ve been up to soon.

Got back from my yearly stint at Bath Spa University teaching for the International Guitar Foundation. A good time was had by all as usual and great to see some old faces and catch up.

Some great gigs were provided during the week by John Wheatcroft, Stanton Moore and old BIMM friend Guthrie Govan with the Fellowship. Here’s a couple of pics of the week. Looking forward to next time!

My class - Classic Rock!

Tutors eating a well deserved curry!

Guthrie and the Fellowship rip it up!

Jim Clarke, Guthrie Govan and Martin Goulding. Guitar heaven!

New tutorial on Audiotuts

Toby — Tue, 03 Feb 2009 22:40:12 +0000

Just had another tutorial go up on audiotuts.com about using Logics automation with MIDI hardware controllers. Go check it out if your into Logic.

In other news apart from being snowed on a lot I’ve been learning Adobe After Effects and making some promos for my secret web project. Making good progress with it but knowing Photoshop animation already has really helped. VideoCopilot.com has been a real help learning After Effects and Andrew Kramer is a good coach.

Just got Stormdrum 2 for the studio rig and I’m loving it. The drum sounds are massive! Here’s a little orchestral demo I threw together while I was trying it out. It’s called Attack of the Dung Beetles as I couldn’t think of a better title! There’s a scary thought!

Till next time!

Logic tutorial on AUDIOTUTS.COM

Toby — Mon, 05 Jan 2009 17:45:17 +0000

Happy new year all! Just had my Chord Memorizer tutorial accepted by the lovely people over at audiotuts.com. It’s had some really positive feedback so far. I might do a follow up to it on this site soon. Planning to do some more for them this year and have some really solid and fun ideas lined up already.

As far as this year goes with this blog I’m planning to do loads more guitar tutorials. I have about three big topics I want to cover so they may come in a few parts each. You can expect a small tutorial pretty soon on some useful pentatonic ideas.

2008 was a bit of a strange one for me as far as guitar goes as I was doing quite a bit of web stuff but I’m going to be scaling that back and really getting back to some good old playing this year. I guess I’d just burnt out a bit on music but that seems to be over now and I’m starting to feel a lot more creative musically ( lot’s of tunes rattling round the noggin! ).

In fact the only web stuff I’m planning is the launch of a new site aimed directly at guitar players. Can’t say much at the moment but it’s going to be amazing. Most of the material is written and I’ll start building the site soon. I’m hoping it’s going to be a big hit in the world of guitar, so stay tuned!!

You can check out the Logic tutorial here.

jQuery style menu with CSS3

Toby — Sat, 20 Dec 2008 11:25:25 +0000

Here’s a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks people use. The outcome was a really simple animated sliding verticle menu.

If you want to view the demo you’ll need the lastest Safari version or even better go get the latest nightly build of webkit. This might even work in Chrome but I haven’t checked it. Oddly enough it didn’t seem to like it on OSX Tiger in Coda but in Leopard it was fine? This is all a long way off anyway but good fun to play with!

Menu Demo

First off in the demo you might notice the gradient which is CSS too. Really easy to do that with this….

body { background: -webkit-gradient

           (linear, left top, left bottom, from(#ccc), to(#fff));

}

Now we’ll style the un-order list with some padding and a background image to create a ridge like effect that our menu items will appear out of. The cool thing about this is by using -webkit-background-size’ the image is stretched if you add more items to it making the whole thing a bit more dynamic.

ul#nav {

    list-style: none;

    display: block;

    width: 200px;

    position: relative;

    top: 100px;

    left: 100px;

    padding: 60px 0 60px 0;

    background: url(shad2.png) no-repeat;

    -webkit-background-size: 50% 100%;

}

Everything else is pretty bog standard really. A simple un-ordered list and that’s about it. The styling for the list item anchor tags is where it all happens. The addition of the ‘-webkit-transition:’ is going to allow us to animate to the ‘:hover’ state.

ul#nav li a {

    -webkit-transition: all 0.3s ease-out;

}

It says ‘all’ animatable properties should animate over 300ms using ‘ease-out’, similar to jQuerys easing functions.

Next we’ll add the styling for the anchor tags with some fancy -webkit-border-radius and -webkit-box-shadow to give it some shape and depth and complete it with a backgroung image for each item to enhance our interface effect, making them look like their coming from underneath the ridge.

ul#nav li a {

    -webkit-transition: all 0.3s ease-out;

    background: #cbcbcb url(border.png) no-repeat;

    color: #174867;

    padding: 7px 15px 7px 15px;

    -webkit-border-top-right-radius: 10px;

    -webkit-border-bottom-right-radius: 10px;

    width: 100px;

    display: block;

    text-decoration: none;

    -webkit-box-shadow: 2px 2px 4px #888;

}

The properties we’re going to style are color, background-color and left-padding so let’s add them to the hover: state.

ul.nav li a:hover {

    background: #ebebeb url(border.png) no-repeat;

    color: #67a5cd;

    padding: 7px 15px 7px 30px;

}

That’s about it really. No javascript and exactly the same effect. Probably be easy to make this degrade nicely for “certain” browsers. Now all you have to do is wait!

Multiple collapsable panels with cookies

Toby — Thu, 18 Dec 2008 12:30:36 +0000

There’s literally nothing about on the internet about using the jQuery toogle() function on multiple collapsable panels and saving their states with cookies from one page to another. This prompted me to try and write my own script to take care of the sidebar to the left of the window. All the separate panels are ‘widgets’ in Wordpress and are loaded into an ‘li’ tag with a class name of ‘widget’ making it simple to target the items. I’d also like to say this isn’t an Accordion as such and even the scripts for them don’t deal with unique cookies!

The collapsing effect

Collapsing the panels is the easy bit and just like every other ‘accordion’ and ‘collapsing panel’ plug-in can be achived with a simple toogle() function to slide the ‘ul’ inside each of the widgets when the ‘h2′ is clicked. The jQuery for that would look like this…

$("li.widget h2").toggle(
function () {
$(this).next("ul").slideUp(500);
},
function () {
$(this).next("ul").slideDown(500);
}
);

Notice how we use .next(”ul”) to target the ‘ul’ as it immediately precedes the ‘h2′ which is the trigger for the effect. So far so good!

Next we need to add an ‘active’ class to the ‘h2′ on DOM ready so the user can see the state of the panels when the page loads, hopefully prompting them they can close it. When they click it we just remove the active ‘class’. This is really easy too by adding this….

$("li.widget h2").addClass("active"); // Add the class on page load.

$("li.widget h2").toggle(
function () {
$(this).next("ul").slideUp(500);
$(this).removeClass('active');
// Remove the class 'active' on slideUp
},
function () {
$(this).next("ul").slideDown(500);
$(this).addClass("active");
// Add the class 'active' on slideDown
}
);

Here’s the CSS for the state change….

li.widget h2 {
background:transparent url(images/yourImage.jpg) no-repeat scroll right top;
/* various styling */
}

li.widget h2.active {
background-position:right bottom;
}

Pretty standard stuff! Now comes the interesting bits!

Baking the cookies!

First off I downloaded jQuery.cookies.js. This is a great jQuery plug-in for dealing with cookie operations. The basics of it are….

$.cookie('COOKIE_NAME','COOKIE_VALUE', { path: '/', expires: 10 });
//Make a cookie

$.cookie('COOKIE_NAME','null', { path: '/'});
//Delete the cookie

$.cookie('COOKIE_NAME');
//Get the cookie. Returns cookie value.

The problem is that all the tutorials for collapsing panels with cookies only dealt with one panel!..and one cookie! But I have multiple panels that need to have their states saved in multiple individual cookies! As Clay Davis from ‘The Wire’ would say,”SSSHHHIIIIIIIIIIIIIIIT!”.

Making unique cookies

So…first I needed to find the index of the widget I’d collapsed and store it’s state in an it’s own unique cookie. Finding the index or number of the widget can be done with this line…

$("li.widget h2").toggle(
function () {

var num = $("li.widget h2").index(this);
// Find the index of the widget. Starts at 0.

$(this).next("ul").slideUp(500);
$(this).removeClass('active');
},
function () {

var num = $("li.widget h2").index(this);
// Find the index of the widget. Starts at 0.

$(this).next("ul").slideDown(500);
$(this).addClass("active");
}
);

//Clicking the first widget 'h2' trigger will store 0 in the variable 'num'.

Now we can create some variables to store unique cookie names and values. Here’s how we do that….

var num = $("li.widget h2").index(this);

var cookieName = 'panel' + num;
// Returns ----> panel0, panel1, panel2 etc....
var cookieValue = 'closed' + num;
// Returns ----> closed0, closed1, closed2 etc....
code>
pre>

<h3>Create the cookiesh3>

Now for every widget clicked we can create a unique cookie with a unique value.
Let's see how we set up the cookie...
This creates a cookie for the first widget when it's clicked.

[cc lang="javascript"]
var num = $("li.widget h2").index(this); // Find index of 0.

$(this).next("ul").slideUp(500); // Slide up panel
$(this).removeClass('active'); // Remove 'active' class

var cookieName = 'panel' + num; // Returns ----> panel0
var cookieValue = 'closed' + num; // Returns ----> closed0

$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });

// Cookie is stored as panel0 with a value of closed0.

Deleting the cookies

To delete the cookie when widget one is clicked or ‘toogled’ we do this…..

var num = $("li.widget h2").index(this); // Find index of 0.

$(this).next("ul").slideDown(500); // Slide down panel
$(this).addClass("active"); // Add 'active' class

var cookieName = 'panel' + num; // Returns ----> panel0

$.cookie(cookieName, null, { path: '/', expires: 10 });

// Cookie with the name panel0 is deleted.

The whole code for this looks like this…..

$("li.widget h2.active").toggle(
function () {
var num = $("li.widget h2").index(this);
$(this).next("ul").slideUp(500);
$(this).removeClass('active');
var cookieName = 'panel' + num;
var cookieValue = 'closed' + num;
$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });

},
function () {
var num = $("li.widget h2").index(this);
$(this).next("ul").slideDown(500);
$(this).addClass("active");
var cookieName = 'panel' + num;
$.cookie(cookieName, null, { path: '/', expires: 10 });
}
);

Getting the cookie values

Now we have to retrieve the cookies and their values to set the state of the widgets when the page is reloaded. This is easily achived using a for loop with an if statement inside it.

First were going to add a line to see how many widgets we have so we know how long the loop should be. I’ve also created a variable to define the ‘ul’ as ‘panel’. If you have nested lists you may want to add :first to the selector.

var l = $('li.widget h2').length;
var panel = $("li.widget ul");

I’ve done this for any widget that has a title or ‘h2′ tag. Some widgets like ‘text’ or ‘RSS’ widgets you may want to leave out. This is optional….

Heres the loop with some comments. c=0 is important it’s the loop index.

for (c=0;c<=l;c++){
// Loop up to the number of widgets. l is the length.

var cvalue = $.cookie('panel' + c);
// Store the value of found cookie in cvalue while looping.

if ( cvalue == 'closed' + c ) {
// If values match do this...

$(panel).eq(c).css({display:"none"});
// Hide the ul if cookie is found for element.

$(panel).eq(c).prev().removeClass('active').addClass('inactive');
// Change state of effect trigger.
};
};

If the loop finds a cookie with the name ‘panel0′ it will return a value of ‘closed0′ which tells the if statement to hide the widget ‘ul’ with an index of 0 and remove the ‘active’ class and add a class of ‘inactive’ on page load.

When the page loads any widget that has an ‘h2′ with the class ‘inactive’ will be hidden as it doesn’t have the class ‘active’…….Great!

Major Problem!!!

…..or not! Just like Microsoft there is one massive flaw in this code!!! I’d like to add that up to here took about an hour, what follows took a whole day!

The toogle() function works on the premise that the first part of the code (the first ‘click’ function) will slide the element UP and the second part (the second ‘click’ on the element) will slide the element DOWN. Well what if the element is already UP on page load. Clicking the trigger returns nothing as the element is already UP…?!? You need to click it again to get it to slide down which from a UI point of veiw it pretty…well, crap!

I tried so many different things from ‘if else’ statements to ‘click’ functions, the list goes on. It seemed if one thing worked something else wouldn’t. It was like a dream that you’re chasing something but can never catch up with it. At one point I thought I was losing my mind!

The answer turned out to be really simple in the end (Doh!) an lay in something I’d added to the code but never thought of using… the ‘inactive’ class. I discovered that if I duplicated the toggle() function and reversed the functions so the first click performed a DOWN slide and assigned that to $(’li.widget h2.inactive’) it produced the desired result. Not very elegant but then neither am I!

The whole thing looks like this….

$(document).ready(function(){

$("li.widget h2").addClass("active");

var l = $('li.widget h2').length;

var panel = $("li.widget ul");

for (c=0;c<=l;c++){

var cvalue = $.cookie('panel' + c);

if ( cvalue == 'closed' + c ) {

$(panel).eq(c).css({display:"none"});
$(panel).eq(c).prev().removeClass('active').addClass('inactive');
};
};

$("li.widget h2.active").toggle(
function () {
var num = $("li.widget h2").index(this);
var cookieName = 'panel' + num;
var cookieValue = 'closed' + num;
$(this).next("ul").slideUp(500);
$(this).removeClass('active');
$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });

},
function () {
var num = $("li.widget h2").index(this);
var cookieName = 'panel' + num;
$(this).next("ul").slideDown(500);
$(this).addClass("active");
$.cookie(cookieName, null, { path: '/', expires: 10 });
}
);

$("li.widget h2.inactive").toggle(
function () {
var num = $("li.widget h2").index(this);
var cookieName = 'panel' + num;
$(this).next("ul").slideDown(500);
$(this).addClass("active");
$(this).removeClass('inactive');
$.cookie(cookieName, null, { path: '/', expires: 10 });

},
function () {
var num = $("li.widget h2").index(this);
var cookieName = 'panel' + num;
var cookieValue = 'closed' + num;
$(this).next("ul").slideUp(500);
$(this).removeClass('active');
$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });
}
);

});

Conclusion

Multiple collapsable panels with cookie states for every unique panel. Awesome!!!

I hope somebody finds this useful and is spared the brain ache I went through. To coolest thing is as the demo relies on Wordpress’ markup you can drop it straight into a theme your developing. I’m going to turn it into a plugin soon too (once I’ve figured out how to do that!). I’d love to hear if any knows of a better and more elegant way of doing this, so leave a comment if you do!

For a demo, look no further than the sidebar menu at the top of this page. Close some widgets and reload the page!

My Top 5 albums of 2008

Toby — Mon, 15 Dec 2008 22:51:07 +0000

Well, I know it’s not over just yet but unless Van Halen release a new album in the next two weeks this will be my list favorite longplayers for 2008. There’s a lot of good music out there and some you just don’t get to hear unless you want to trawl though lots of shit on MySpace till you find a gem!

Infact that’s what the fine folk over at augasm.us do so you don’t have to! Came across this site a little while ago and if your into indie/alternative music with a slightly offbeat flavour this could be the site for you. I recommend checking it out!

So here we go….At

No5: Pendulum – In Silico

Great production and kickass drums! Two vital ingredients to a great record for me. This quasi Drum & Bass/Punk/Pop album has some great songwiting and arranging as well as being a really interesting and polished programming/production masterpiece! Did I mention the kickass beats!

The Other Side

No 4: Goldfrapp – Seventh Tree

Goldfrapp have always been a favorite of mine. The combination of Alison Goldfrapp’s smooth vocals and Will Gregory’s production and arranging are a match made in heaven. Nuff said!

Caravan Girl

No 3: Paul Gilbert – Silence followed by a Deafening Roar

Former Racer X and Mr Big guitarist Paul Gilbert returns without the singing and just does what he does best. Play amazing, over the top guitar! A lot more funky with some 70’s rock flavours this is a great guitar record. And a bloody nice chap with it!

Norwegian Cowbell

No 2: Wallis Bird – Spoons

Wallis Bird from Ireland plays guitar left-handed not because she’s left-handed but because she got all her fingers chopped off on her left hand ( she got them put back on! ). It doesn’t seem to have stopped her though as she’s one of the tightest acoustic rhythm guitarists I’ve heard in a while. That aside, she has the knack of writing really catchy songs and an awesome voice too! ‘Spoons’ is so infectious as an album with it’s mixture of folk and pop ( and even a hint of prog! ) it’s hard to stop listening to it! A breathe of fresh air! 5 Stars!!! Thanks Aurgasm!!!

Blossoms in the Street
Interview

No 1: Everything by The Bird and the Bee….ever!

When I first heard ‘Again & Again’ by The Bird and the Bee I thought it was the catchiest song I’d ever heard. I immediatly bought all their records and they’ve been on loop ever since. Consisting of Inara George ( I only found out after that Inara is the daughter of one of my all time heroes Lowell George from ‘Little Feat’ ) and pianist and producer Greg Kurstin. A totally magical mix of Jazz/Electro/Pop meets Burt Bacharach the Bird and the Bee just couldn’t be any cooler if they tried. Do yourself a favour and have a listen. If you like great pop music then the Bird and the Bee have it all!!!

Again & Again (2007)
Polite Dance Song
La La La

Honorable Mentions….

The Racontuers – Consolers of the Lonely

Jack White and co provide some kickass grooves and some of the best guitar sounds ever put to tape. He really is a very talented bloke!

Greg Howe – Sound Proof

Took a while to get into but now I’m there. Served as a reminder that you’ll never be as good as Greg Howe!

Brent and Randy Mason – Smoking Section

….Unless your Brent Mason! Nashvilles top session guitarist more than delivers with a mix of Western Swing/Country/Jazz and Blues. Totally baffling!!!

Dan Le Sac vs Scroobius Pip – Angles

Left field british Electro/Hip Hop. Totally mental but really inventive production and lyrics. Stand out track ‘Look for the Woman’

Dan Le Sac Vs Scroobius Pip Look For The X-Factor Hilarious…!!!

JQuery: Fade elements sequencially without chaining

Toby — Sat, 13 Dec 2008 20:07:13 +0000

Here’s a useful trick for fading similar elements sequencially without having to chain the effects. In the first example I have 5 divs that I want to fade in one after the other. Instead of giving them all unique ID’s and chaining the fade effects like this….

$("#box1").fadeIn("slow", function(){

  $("#box2").fadeIn("slow", function(){

    $("#box3").fadeIn("slow", function(){

      $("#box4").fadeIn("slow", function(){

        $("#box5").fadeIn("slow");

      });

     });

   });

});

…… you can instead give them a class of ‘box’ and find the amount using .length; and use an if statement to loop through the until all the relevant elements are visible using a callback function.

var i = 0

var n = $(".box").length;

        

function showbox() {

        

    if(i <= n){ 

            

    $(".box").eq(i).fadeIn(600, function(){ i++; showbox(); });

              

            }        

        } showbox();

It’s a lot more efficient code wise and produces the same effect. Here’s the same thing but using a ‘click’ event to trigger the function.

var j = 0

var a = $(".list").length;

        

    $("#trigger").click(function showlist(){

                

        if(j <= a){             

        $(".list").eq(j).fadeIn(200, function(){ j++; showlist(); });

              

         }       

    });

Might be a nice effect for a menu? I was going to use it to fade in the posts on the blog homepage but IE7 can’t render one transparent PNG over another when faded. It comes out looking like a jaged GIF with the top PNG’s transparent pixel looking black instead. Once again IE ruins everything!!!

View Demo

Producing Johnny Borrell’s ‘Carrickfergus’

Toby — Thu, 04 Dec 2008 18:16:16 +0000

Completely forgot about this one! In August Air Studios engineer Nick Cervonaro asked me if I would help him out with a charity project Bruce Parry ( from the BBC’s brilliant ‘Tribe’ series ) was putting together for Survival International.

I was asked to do some arranging on the Johnny Borrell ( Razorlight ) track ‘Carrickfurgus’ which was in the demo stage at the time. Nick had the files which were in a pretty basic state with some loops and a vocal track and a rough sketch of the chords.

We eventually decided to re-record the entire track and just keep the vocal and ended up co-producing the track together. Nick took care of the engineering and mixing duties and I arranged the music and eventually ended up playing or programming all the instrumentation!

The whole thing was done in one day from start to finish in Studio 2 at Air.

It was only the fact I saw the track in my inbox that I remembered it. I went on iTunes and sure enough there it was. The album features tracks from KT Tunstall, Yusif Islam, Hot Chip, The Go! Team and Will.i.am to name a few. It’s called Amazon Tribe – Songs for Survival and is available from all good music retailers.

On a guitar note, I used my fantastic Atkin ‘Dreadnought’ for the acoustics ( and percussion! ) and my Telecaster though an old Vox AC30 with a Custom Audio Electronics boost pedal by MXR for the electrics.

Go out and buy it, it’s for a good cause! Did I mention we all did it for free!