Adding Cu3er to a WordPress Page


I almost decided not to write this up and thought I would wait to make a project page about this when I figured out how to roll out an awesome free template that included cu3er, but knowing how busy I often suddenly find myself, I figured it would be prudent to at least document a little bit of how I did the integration into my page. I didnt really feel like tagging this as a project as it was pretty easy to do, but then again; its looks really cool. Even though I don’t want to dilute the designation of project in my portfolio, I decided to make in exception in this case. I mean just look at the picture! (above). Also I feel like having code that for this that works in nearly all the common browsers (including IE6) that support flash is pretty hard to find.

background

For a while I have maintained a little webpage. I hurriedly put it up because I needed a place where I could easily and quickly dump nearly a thousand photos so that my friends to get copies for themselves as well as view photos. Already owning a domain and some hosting, I put up a site using WordPress as a CMS and using NextGen Gallery to deliver photos. Back then, using WordPress as a CMS was not nearly as good of a choice as it is today. Back then it was a tough decision between using Joomla or Drupal and losing the ability and ease of WordPress for better functionality or choosing to depend on plugins with WordPress. Assuming that WordPress would keep improving even though 2.4 and the themes available for it were not so amazing, turned out to be a good leap of faith as WordPress 2.8 and now 2.9 are pretty amazing.

The initial goal of my site was to make my photos available as nice web resolutions as well are reproduction quality resolutions so people could grab copies for themselves. From there it kind of took a life of its own. Slowly I added pages do document the projects I did, the art that I tried to do, ways to contact me and a blog to try to keep pace with my life. Then one day I woke up and realized that while I loved my photography, the main focus of of my page should be my projects because they really show more about me than anything else. That coupled with the fact that potential employers started asking for web portfolios really drove that change. As the functionality of the site expanded, I thought it looked really quited dated and not very inviting. Its simplicity seemed to save to an extent, but it certainly was no looker (see below).

Getting the momentum I needed to make a change was hard to come by. After suggesting that someone get a website to display her photos and noticing that a friend was looking to make a website was the kick in the pants that I needed to get off my butt and implement a new theme.

After playing around with a couple of themes, I was ready to buy one when I discovered a free template that I liked. It turned out to be a little broken and needed some severe rewriting to make it do the things I wanted it do when I wanted it to do them. However, its probably better that I rewrote a theme that was free than one I paid someone for.

One of the problems with almost all the free WordPress themes is that they almost never have any of the top shelf features. Themes using jquery for awesome drop down menus and news feeds are just starting to show up; and none of the free themes had the visual pop of many of the themes of the top shelf themes. After looking through a couple dozen themes, many of which were going for ~$50 I realized that the cool visual effects were all pretty similar and were all using the same FREE (for non resale use) image slider: “cu3er.” cu3er was supposed to be easy to implement, so I took the plunge. It wasn’t too bad. Download it, Unzip it and start making it work.

the config.xml file

cu3er is pretty damn well documented which made my life pretty easy. Working off the demo, the slide show was very slick, however I wanted to utilize a few features that really make  me love cu3er. While the transitions are really slick, the thing that really puts this slide over the top is the ability to add fly in overlays that can display text. With some visual trickery like semi-opaque frames these decriptive captions make a slider more than just a piece of eye candy, they can be used to create a visually attractive introduction that summarizes the content of a site. Additional code can also be added to make both the description and the image behind it click-through-able so that they can serve as a link to whatever is being described. Suddenly, the eye candy is super useful. Of course you also want the images to also rotate to make this object live and fulfill its purpose. To make all of this happen you need to edit the config.xml file that comes with cu3er. The first step is to add the following to the settings section of the file:

The settings above set options such as rounded corners, time options on the slide show and the colors/fonts of different objects/controls. If you want to dive in and customize this, I highly suggest looking in the cu3er documentation. While they do not have nice sample code; they provide detailed descriptions of the options available.

Once the settings are programmed in, the actual descriptions, links and urls need to be included for each slide. This can be done as follows:

Then its just a matter of saving the file (the screen captures with highlighting are from notepad++). Note that I renamed the images folder images2 to prevent naming conflict with the images file in the WordPress theme I was using. Note that you MUST include paths from the content file onwards or the images will not load. This is not apparent when you run the demo.

integration with the theme

If I opted not to use a theme that auto-generates the home page via PHP, integration would have been a little more straight forward. Having unzipped the cu3er download previously,  the next step was dropping it onto my server into the folder of the theme that was planning to use, I added the following code to the index.php (it might be differently named in another theme, but we want the php file that generates the home page):

The  above code should be added in the place where you want cu3er to appear. Since I wanted mine to show just under the header, I added those lines just under the PHP code that fetches the header. There are some important items here: by using the swfobject.addLoadEvent(function(){}) call arount the swfobject.embedSWF function we are telling the slideshow to draw in a way that makes it compatible as tested with IE 6 and 7 as well as Firefox 2.0+. Without the additional load event, the slideshow will only render correctly in IE8, Firefox 3.6+ and Chrome. I feel like very small  amount of delay thats only noticeable when loading over slower connections is an acceptable trade off for that kind of backwards compatibility. Also, take note that there is an extra div wrapper in my code that is used to put the shadow graphic on the page.  (a copy of the shadow image is near the bottom of this page)

If you aren’t using a theme that generates a home page or if you just want to put cu3er on a standard page, you can just use the same code that is provided in the html file in the demo or you can use my version below:

Again you want to add this into the right place. You can see the </head> and <body> tags that indicate that it might be a good idea to the have the javascript calls in the header and the actual box in the body. You need to do this to make sure that it works right in Firefox. Also adding the line to the top of the javascript script (the second one, not the call): swfobject.switchOffAutoHideShow() supposedly also helps resolve problems with Firefox 3.5 when adding cu3er via html. I never ran into those problems, so I cannot be sure that line is needed.

Again, you can put the items where you want. Note: the only real difference between the demo and the version that I have above is that I added the wrapper with a shadow. the shadow image is below (click for full image):

The only unresolved issues have to do with CSS and they aren’t things that I care too much about. The shadow is more exposed in IE to the point where the cube looks back/top lit vs the front/top lit shadow that shows in Firefox and Chrome.

conclusion

That pretty much wraps it all up. Not too hard at all to add some amazing visual effects that can really make your page pop. Feel free to cross browser test my site. you will notice that the CSS isn’t perfect, things fly a little out of place in IE6, but then again I don’t know of too many sites that look the same in IE8 as they do in IE6.

My code for the cu3er implementation works great in Chrome, Safari, Firefox 2.0+, and IE8/IE7/IE6.

I still am thinking about rolling this into a free theme as soon as I get the hang of using PHP to generate XML. Hopefully that will happen soon! UPDATE: Due to the cu3er license, I will not be doing this. :(

Any code on this specific page, people are free to use. Project was completed started Feb 26th, 2010 completed Feb 27th, 2010.

12 Responses

  1. Duquesa says:

    hi, i want to know if someone knows how to change the link that appears when you clicked on the right button of the mouse, because it link to the cu3er site and i want to delete it… thanks

  2. aisaku says:

    @Duquesa Are you talking about the right click menu?nI do not recall a setting in the cu3er docs to change the right click settings. You can however add javascript to remove right clicking from that section of your webpage. You can do this pretty easily. In the section that contains the cu3er code, use the right click disable script located here: http://www.hypergurl.com/norightclick.html
    Users then wont be able to right click on the cu3er object.

  3. Mermadale says:

    The line swfobject.addloadEvent(function(){}) in the text needs to have the L of Load capitalised as in swfobject.addLoadEvent(function(){})or if cut and pasted it causes the whole CU3ER to fail to load.

    Thanks for the item it saved me heaps of work with IE6 etc.

  4. aisaku says:

    Mermadale, thanks for the catch. I fixed the line in the code. I am glad people are finding this writeup to be useful!

  5. Dustin says:

    Shouldn’t ‘expressInstall.swf’ be changed to “/js/swfobject/expressInstall.swf” if the theme generates the home page.?

    Also, I set this up at budgetaudiovideo.com, but there seems to be some conflict with the redirect. If http://www.budgetaudiovideo.com is input, the images do not load.

    Any advice/fix for this.?

  6. aisaku says:

    Regarding the question on the path. You are right that you do need the longer path unless you specify the location of the swf object relative to the script. I did that on the line previous, so the longer path is not needed if you use my code as a template. Furthermore if you do specify the source for the script and include a long path, your object will not work properly.

    Since you get the cu3er logo, I do not think that is the problem in this case. I would check the path to the images first. You need to have the paths coming from the root of your WordPress install and make sure you have the right permissions set. Most likely, the file paths to the images are incorrect.

  7. Thanks for this. I think your documentation is better than the Cu3er developer’s.

    Worked perfectly once I figured out the correct path for the images.

  8. Ben says:

    I was having trouble having cu3er work on my WordPress site.

    The solution, thanks to your article, was to change those urls pertaining to the .js, cu3er, swf, etc. in the header.

    Everything works now.

    I have bookmarked your site.

    Thank you so much!

Leave a Reply

%d bloggers like this: