Slidedeck: How to Add Individual Slidedecks to page headers

If you are like me, you love Slidedeck (http://www.slidedeck.com) for the ease of use for me and my clients when I have handed over the site.

Typically I use Slidedeck for what is known as a hero slides how on the home page and very occasionally on the page itself and Slidedecks combination of methods of site integration makes this really easy.

However, what if you have a site that needs to have product slideshows in the header area? Again, it’s easy if you can have a layout for each page, but the problem comes in where you need a single say ‘products’ layout to cover a large range of products/pages. There is just no way to change the slideshows on a per page basis, if the slideshows is to be in the header.

The solution is actually much easier than you would probably think. Using a combination of Slidedeck with another plugin (Advanced Custom Fields), and a small piece of php code inserted into your theme. Using this method you should be able to:-

  • Provide a visual way to enter a Slidedeck code into an individual page
  • Allow product (or similar) pages to show slideshows in the header rather than on the page. Even if they use the same theme template

This will take the form of step by step instructions. It’s worth noting that I am no php coder, so any additional help with the code beyond what I did to ‘make it work’ would be appreciated.

  1. In your copy of WordPress, install Slidedeck and create a slideshow as an example we can use.
  2. Install the plugin “Advanced Custom Fields”. This is what will allow you to create both the visual interface and the field of information the post needs to know which slideshow it needs to display
  3. Once you have advanced custom field installed, you will see Custom Fields at the bottom of the left side menu bar in WordPress.
  4. I created a custom field called Page Sliders, and gave it the settings as follows: –
    Advanced Custom Field Setip
    Advanced Custom Fields Setup
    You can see from the above that I have a home page template where I don’t want to show this as an option, as it will use a standard template and slideshow with a slightly different layout. Selecting “Standard Metabox” ensures that there will be a box for the WordPress page editor.
    My description is probably a bit over wordy btw, but I have done this assuming it won’t be changed for a while and the user will more than likely have forgotten what to do when they need to make changes.
  5. All the above should give you is something like the below. This gives you an area in your page to add the Slidedeck shortcode, so that it will be stored with the page. At the moment, that is all that this does as we have not yet integrated the code we need into the theme.
    ACF in WordPress interface
  6. Now here comes the hard bit unfortunately! We need to edit our theme. It’s actually easier than it sounds, but I would advise you to back up the theme code before you start to edit it. You can either FTP the theme to your local machine, or even copy all the code and paste it in a text file. You do all this in <Appearance><Editor> from the WordPress sidebar.
  7. Typically when you open the editor you will see your themes CSS file. If you have set up various page templates, you will also see those listed, otherwise you will just see the one template, the header template, footer template etc.
    Which one of these you want to edit depend on your theme. I would start by looking at the header, where you will probably see, the head section of the document, then the header of the site, then the navigation, then the top of the main content area. In my case I want the slideshow under the navigation and in the main content area, so instead of the header.php I can put the code in the page template.
  8. Opening up the page template, you will see some code to get the get the header <?php get_header(); ?>, so the code is to go under that in my case (just above the main content). The code you need is: –
    <link rel=’stylesheet’ id=’slidedeck-css’ href=’http://www.webxopt.com/wp-content/plugins/slidedeck-lenses/half-moon-1a/lens.css?v=1.0′ type=’text/css’ media=’screen’ />
    <div id=”slider-custom” style=”position:relative;left:-20px;top:-24px;”>
    <?php
    $sliderdeck = get_field(‘slidedeck_shortcode’);
    ?>
    <?php echo do_shortcode($sliderdeck); ?>
    </div> <!– slider-custom –>This links to the slidedeck css files (in my case I used the half moon slidedeck style, so linked to that), creates a new div (the styles included were required for my theme, but you may need to change the numbers), then get the slidedeck shortcode from the custom field in the page, then add it into template.
  9. Hopefully that should now all be done. The only thing left to do is set up the page.
  10. You can go and get a shortcode directly from slidedecks interface, but for me the easiest way is to copy the code in the explanation, then change the number according to the slidedeck you want.
    slidedeck-shortcode
    The above shows the interface on the post page and the below in slidedeck. Note that you have to mouse over the deck you want to get the ID number.
    slidedeck-shortcode1
  11. Your end result should look something like “[SlideDeck2 id=2641]”. When you preview the page, you should now see your custom slidedeck up in the head of your page.
    slidedeck-on-page

Hopefully, this will help anyone who has been battling with this problem as I have. If you have any comments, please leave them below. PHP code suggestions would be particularly helpful!

iOS4.3 Home Sharing – How To

I have just updated my iPhone to iOS4.3 and was excited to try out Home Sharing, but it wasn’t as straightforward as I thought it might be. I had thought that you would send it from iTunes on your computer as you do with other types of sharing, but this is slightly different and has to be enabled on the phone.

Anyway, here’s how to set it up: –

1. Go into iTunes on your computer, to the preferences dialogue box, then to sharing.

2. Enable sharing as per the image below. Personally I like to add a password, and this is maybe what made setup on the iPhone more difficult.

iTunes sharing preferences for Home Sharing

3. Go to your iPhone and make sure you are on the same wifi network as your computer. Then go to Settings, then scroll down to the iPod settings, as below: –

Settings iPod Menu for Screen Sharing

4. Clicking on the iPod settings will take you into the following: –

iPod Settings Menu

5. You can see that Home Sharing needs your Apple ID and password. So enter that info: –

Home sharing settings completed in settings

6. Once this is done you can leave settings and go to your iPod and click the More button on the bottom right of the screen. You should now see a shared option with a little house icon! : –

iPod Application Showing the Shared Option

7. From now on it’s just a matter of selecting the library you want to see, then browsing your library as you normally would: –

Browsing the iTunes Library in Home Sharing

The procedure will be a bit different for iPods but if iPads are anything to go by, videos appear in a shared tab in the Videos application and in the iPod application you touch the Library in the top left of the screen, which then allows you to pick your iPad or a shared library.

So far I’ve found that streaming audio works great. Video seems to cache for a while before it starts playing, but also looks good. It looks like it will then be possible to stream to your TV with the appropriate cables although I haven’t tested that yet. If it works it will effectively allow you to use your iPhone/iPod/iPad as an AppleTV!

Very Cool!

 

Read Articles on Your iPad

I don’t know about you, but I always have 20-30 browser tabs open, mostly with things on there that I intend to read, but never do. The following video shows a really nice way to move these from your browser and onto your iPad, where you can read them at your leisure.

UPDATE: In MacOSX Lion, the pdf shortcut to add the pdf to iTunes is already set up, so you don’t have to do this any longer. It’s just a matter of hitting print, then pdf in the left side of the print dialogue box, then selecting the Add PDF to iTunes option.

Ben10 MP4 Video Watch Review

The only MP4 Video Player that doesn't play MP4's?
The only MP4 Video Player that doesn't play MP4's?

I have just bought a Ben10 MP4 Video watch from Targets sale for $99. In theory this looks like the product I promised to make my son from a video photo frame and an old Ben10 watch surround, so why bother making it? This way it has custom Ben10 animations and everything right!?

First things first. What’s in the box. The box itself says it includes Earphones, USB Cable and CD-ROM. Open it up and guess what, no USB cable. That’s not such a problem though as it’s the micro USB sort that often come with a camera, so I had a couple of those knocking around. STOP THE PRESS – I’ve just found it. It is about 2cm long and part of the strap.

One thing missing from the box…instructions. There are none. That’s right none at all. Not even a brief explanation of the buttons. I guess that might be on the CD, but it is one of those microsize CD’s and I have a slot loading drive on a Mac, so I can’t have a look to find out. So I searched the web and nothing (hence this post) the supplier Canal Toys has a website that is “Under Construction”.

Okay, so I have a few set backs here, but no problems, according to the box it will play “mp4, avi and wmv (software included)”. I can’t get to the software as it’s on the CD, but I have Quicktime Pro, Handbrake and a number of other video converters that will move things over to mp4 and avi just fine.

Plug in the watch, and up comes the disc with no problems. The file system is easy to see so I navigate into the folder and ….the file is smv, not mp4 or any other format.

I had played the video before and found that it looked a bit rough with a very low frame rate but I had put that down to some dodgy encoding but on further investigation it seems that the only thing that will play is this SMV format (which was originally designed for the Super Nintendo to give you an idea of quality). Hmm an MP4 Video Watch that doesn’t play MP4’s!! I have looked for a converter but with no luck for the Mac.

By the way the ‘speakers’ are so quiet that you can’t even hear them well in an almost silent room. Think taking ear phones out of you ears and listening to those.

The next thing I tried was putting mp4’s in there and see if it will read them. I dragged on mp4’s formatted to 160x128px and 15fps (to be safe). Then tried to unmount the watch. It unmounted, then remounted. I tried again and got the same. After multiple attempts I had no choice and just pulled to cord, which corrupted all the data despite having made sure there was no writing going on. Now I have a watch even without the free Ben10 episode included!

At this point the problems have ceased to make the device fun, and have basically crippled it to the point that it is impossible to use and the only thing I can do with it is try to take it back.

I haven’t even mention that while trying to navigate the watch I managed to crash it to a shell script 3 times!

This is a really, really disappointing product. Any Ben10 fan should love it, but instead it doesn’t include what it should do in the box (no printed instructions is unforgivable), it doesn’t work at all with a Mac (no compatibility info on the box), even if it did, the video was poor, audio via the speakers was non existent, and it crashed to a shell prompt 2 or 3 times in the few minutes I played with it.

I haven’t even mentioned the potential legal problems I’m sure the company could get into by calling the product an mp4 video watch when it won’t play mp4 videos!

What is really disappointing is this stuff isn’t that hard and for $100 ($130 rrp) you should get native mp4 support out of the box, and with a decent frame rate.

Note that there seems to be a few versions of this watch about. Others seem to have a 1.3-1.5″ screen. This one was 1.8″.

The product again is the Ben10 MP4 Video Watch officially endorsed and supplied by Canal Toys and bought at Target in Australia in July 2009.

Avoid this like the plague even if your kids beg for it!

Simons Rating 0/5

Mega Drop Down Menus

I have been doing a lot of work recently to develop a mega drop down menu that is easy to apply and code and is extremely usable. If you aren’t aware of mega drop downs I would suggest you check out the article in Jakob Nielsen’s alertbox dated 23rd March 2009.

The use of mega drop downs is an increasing trend which is sometimes applied well, and other times quite badly. At a recent barcamp in Brisbane I did a short presentation looking at mega drop downs and their use. This is available at http://www.webxopt.com/resources.html.

Over the next few weeks I will put up more info on mega drop downs including example code. This may be on the webxopt site, or I may put it on a specific URL. However I’ll make sure this blog gets updated with links.