[supercategories startcategory=first.parent categoriesToShow=2 postsBeneathEachCategoryToShow=2 showThumbnails=true template=default]
Renaming this series, if you can get it done in 5 minutes or less it’s a quickie.
Ever seen those links at the top of sites like:?
Home > Products > Hardware > Hammers
Then you’ve seen what is called Breadcrumb Navigation (wiki). It’s good for users, good for SEO and good for you and quick to get on your site. So why don’t you have it?
Bread Crumb navigation (sometimes wrongly called cooke crumb) greatly reduces confusion in deeply nested pages or categories, both for end-users and search engine bots, and if you’ve got WordPress and Thesis it can be yours in less than 5 minutes. (you can probably do it without Thesis in the same time, you just have to be geekier)
How To add bread crumbs navigation in 10 steps.
- make sure you have WordPress and Thesis 1.5 or higher installed.
- make sure you have the plugins Thesis OpenHook and Breadcrumb-navxt installed.
- create a few pages, in the right side of each page, choose from the attributes panel what parent page you want, this will form the heirarchy for the trail.
- In the WordPress Admin section open Appearance Panel>Thesis OpenHook.
- Take a look at this visual guide to which slot you want to place the bread crumb. I recommend the After Title hook, find the matching slot in ThesisOpenHook’s dropdown.
- Paste the code in the installation section here
- Checkmark “Execute Php on this Hook”
- Click the blue “Little Ass Save Button” below it.
- Preview the site, you should see it below the Title.
- Think about ways to clean up the hierarchy or style it better with CSS+graphics (which is how we got the breadcrumb above).
UPDATE The excellent developer of that breadcrumb plugin sent me to these pages, which cover how to do it (with graphics). I turns out that the original of this style of graphics was Apple.com
There are several tweaks that have to happen to get the rich graphics and CSS to work with Thesis, which is what shows up above. Once we figure out some compatibility issues with Thesis 1.6, I’ll look into making it available.
Put a splash image before your video
In the prior post we showed you how to get video onto S3 and onto your webpage using free tools in under 5 minutes. That was so fast, we didn’t cover a great feature that gets more clicks on your video.
To show an image before your video loads (aka a splash or poster image) is great to get more clicks by helping users know what the video is about, the result is more people will click to watch the video and that is the point of putting them up on the web in the first place! The alternative is a rather unattractive black box.
Of the various free media players, there is several that support splash images. Note this is built into a few different media players, but the following code only works with FlowPlayer (an open source and free player), which we covered in the first episode.
FlowPlayer makes adding images in front easy..it actually supports whole playlists in it’s configuration!, basically a splash image will be just a playlist of 2 items, the splash image and then your video. The first will autoplay, the second will not, so it will pause on the image. FlowControl has a nice fade effect to add polish.
If you’re using wordpress formatting it with the Visual Editor, can make it slightly finicky, your best bet is to copy the code below (stripped of whitespace) update it with the values you need and paste it instead where the 2nd “<script” block begins. If you’re doing a normal webpage this step is optional.
To Get an splash image here are a few options.
- Use any image you have lying around…I like ones of dead relatives, they always get attention.
- Create a title slide using PowerPoint, or a simple text editor and
- Open up your video in a media player and capture a frame from it using a screen capture utility (built in to most Operating System with the “prt sc” button.
- Create it from scratch to be all fancy pants.
It’s a good idea to get your splash image like your video on the CDN,to keep it from clogging up your webserver.
To be safe, once up on the CDN, test the url to the image in the browser directly (to make sure the ACL is setup) then try it in the playlist.
If it doesn’t work in wordpress, create a simple text file and paste the flowplayer embed code into it ,save that text file as *.html, and test that in a browser till that’s working. Then strip out any unnecessary whitespace to put it into the wordpress blog.
Save that working code into a place you won’t forget, odds are you’ll use it over and over again…especially if your successful.
Coming soon, what CDN’s are, the pros and cons of S3 as a video provider, higher end alteratives. Be sure to subscribe to hear about those and future episodes.
You want video on your site, and are confused by all the options, jargon, technical issues and shady expensive stuff. I feel your pain, I get a LOT of questions about video from my clients with the same questions and confusion…especially when they are getting charged for things that are free. So I created this short video to clear things up.
Video can be easy, 5-10 minutes is all it takes, and in this video I’ll show you how to take a video on your desktop and get it onto your S3/Cloudfront and then into your website or blog in under 5 minutes.
Here’s what you need to get started
- A website or blog (duh!)
- A video you want to get up…(make it good else noone will watch it)
- To be signed up with Amazon S3 and CloudFront (the latter is especially important for video..both free signup)
- A tool for uploading to S3 (e.g. S3Fox, CloudBerry (windows only))
- About 10 minutes
Note: this video was uploaded in the exact same way as shown in the video. One thing we didn’t cover in this is how to get that pretty image at the very beginning, that’s covered in part 2.
NOTE: if this is your first video, and you play the video from a media player somewhere else, you’ll need to upload a crossdomain.xml file, you’ll only have to do that one time per ‘bucket’ (where you can have more than one bucket per your amazon account, for different companies). The one I use is here (but becareful, this is “wide open” access).
There’s lots more to know about doing high quality video that streams nicely and cheaply. Be sure to opt-in on the right to get notified on new episodes.
Oh and Mr. Pine says hi.