Wordpress portfolio slider with Cu3er

Saturday, February 27th, 2010
Development, Tutorials, Wordpress
(33 Comments)

In this tutorial Ill be showing you how to create a simple portfolio slider for your homepage in Wordpress using Cu3er.

Wordpress Portfolio slider with Cu3er

In this quick tutorial I’ll show you how to create a simple portfolio slider in wordpress using cu3er.

Introduction

Cu3er is an excellent and visually impressive 3d flash image rotator. Credit goes to Stefan Kovac for putting it all together. You can find all the files and documentation you’ll need to familiarize yourself with the program over at http://www.progressivered.com/cu3er/

Or you can get started straight away by downloading the latest release here (currently beta 0.9.2)

In this tutorial, I’ll be showing you how to set up a simple portfolio slider in Wordpress which will allow you to automatically display your work on your homepage using cu3er (similar to my own homepage)

Let’s get started!

Step 1. Creating the portfolio category

I’m going to assume you already have a good working knowledge of how Wordpress operates. I’ll try to be as comprehensive as I can, but if you get lost,, I suggest you head over to the Wordpress forums and have a good read of the codex.

Okay. Once you’ve installed Wordpress, create a new category (posts->categories). Give the fields the following values:

Category name: Portfolio
Category slug: portfolio (keep it lowercase)
Parent: none

Step 2. Getting the category id

Once this category is created, we have to find it’s id value. We use the id instead of the name because it’s unique and stays constant. This means that we can change the name, slug, description etc but the id remains the same. (no php errors thank you)

Hover your mouse over the title of the newly created category. Right click and copy the link url. Paste it somewhere. You should get something like this

http://www.yoursite.com/wp-admin/categories.php?action=edit&cat_ID=8

Make note of the cat_ID. This is what we’ll be using.

Step 3. Adding a portfolio item

Let’s add some work for your portfolio. The portfolio items are handled as posts, so let’s add a new entry. (posts->add new)

Enter the title of your project, a small description in the excerpt and whatever body of text you want in the main content area.

Step 4. Adding the image for cu3er

Using the Wordpress upload/insert functions, upload the image you want displayed on the homepage via cu3er and copy it’s url (Link url field)

note: Make sure all your cu3er images are the same dimensions or it’ll look funky as hell.

Without inserting the new image into the post, close the upload (not the browser) window.

Step 5. Creating the custom field

Create a new custom field named slider and paste the image url as it’s value.

Step 6. Attaching it to the portfolio category

This is the tricky part :). Make sure the portfolio category is checked. Once that’s finished, update your post and close the window.

Step 7. Installing Cu3er

Upload the cu3er files to your site like so:

/wp-content/
- /themes/
  - /yourtheme/
    - /library/
      - /cu3er/
        
        cu3er.swf
        
        slideshow.php
        
        /js/
        
        /swfobject/
        
        swfobject.js
        
        expressInstall.swf

Step 8. Creating the php/xml file

Open up the slideshow.php file and add the following to the top:


    <?php

    require_once('../../../../../wp-config.php');

    header('Content-Type: text/xml');

    print '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';

    ?>

You can customize this whatever way you like, but for me I chose the following cu3er settings:


<cu3er>

<settings>



<auto_play>

<defaults symbol="circular" time="4" />

</auto_play>



<description>

<defaults 

round_corners="0, 0, 0, 0" 



heading_font="Arial"

heading_text_size="18"

heading_text_color="0xFF358B" 

heading_text_margin="10, 0, 0,10"

heading_text_letterSpacing="-1"



paragraph_font="Arial"

paragraph_text_size="12"

paragraph_text_color="0xFFFFFF"

paragraph_text_margin="3, 0, 0, 10" 

/>

<tweenIn tint="0x000000"  x="25" y="255" alpha="0.8" width="630" height="75" />

<tweenOut time=".5" x="600" />

<tweenOver tint="0x000000" alpha="1.0" />

</description>



<prev_button>

<defaults round_corners="5,5,5,5"/>

<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>

<tweenOut tint="0x000000" />

</prev_button>



<prev_symbol>

<tweenOver tint="0x000000" /> 

</prev_symbol>



<next_button>

<defaults round_corners="5,5,5,5"/> 

<tweenOver tint="0xFFFFFF"  scaleX="1.1" scaleY="1.1"/>

<tweenOut tint="0x000000" />

</next_button>



<next_symbol>

<tweenOver tint="0x000000" />

</next_symbol> 



</settings> 



<slides>

Now it’s time to call the portfolio items and close <cu3er> tag


<?php 

rewind_posts();

$temp = $wp_query;

$wp_query= null;

$wp_query = new WP_Query();

$wp_query->query('showposts=4'.'&cat=1');

while ($wp_query->have_posts()) : $wp_query->the_post(); 

?>

<transition num="5" slicing="vertical" direction="down" z_multiplier="4" />

<slide>

<url><?php $key="slider"; echo get_post_meta($post->ID, $key, true); ?></url>

<link target="_self"><?php bloginfo('url'); ?>/portfolio/#portfolio_item_<?php the_ID(); ?></link>

<description> 

<heading><?php the_title(); ?></heading>

<paragraph><?php the_excerpt(); ?></paragraph>

</description> 

</slide>

<?php endwhile; $wp_query = null; $wp_query = $temp;?>



</slides>



</cu3er>

Here’s a brief explanation of what’s going on.

Reads the file as xml:


<?php

require_once('../../../../../wp-config.php');

header('Content-Type: text/xml');

print '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';

?>

Configure these to customize the amount of projects you want showing up and the category you want to pull them from. (step 2)

$wp_query->query('showposts=4'.'&cat=1');

Gets the image url from the custom field slider

<url><?php $key="slider"; echo get_post_meta($post->ID, $key, true); ?></url>

On my portfolio detail page I gave each project a specific div which related to it’s ID value. This meant that when the user clicked on the specific slide it would take them to the portfolio page along with the anchor to that div.

<link target="_self"><?php bloginfo('url'); ?>/portfolio/#portfolio_item_<?php the_ID(); ?></link>

Step 9. Adding Cu3er to the header

Add the following to the header.php file:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/cu3er/js/swfobject/swfobject.js"></script>  <script type="text/javascript"> var flashvars = {}; flashvars.xml = "<?php bloginfo('template_directory'); ?>/library/cu3er/slideshow.php"; flashvars.font = "font.swf"; var attributes = {}; attributes.wmode = "transparent"; attributes.id = "slider"; swfobject.embedSWF("<?php bloginfo('template_directory'); ?>/library/cu3er/cu3er.swf", "cu3er-container", "600", "350", "9", "expressInstall.swf", flashvars, attributes); </script>

Step 10. Adding cu3er to your template page

If you’re using Wordpress for your portfolio, it’s likely that you’re using a custom template for your landing page. Add the following where you’d like cu3er to show up:


<div id="cu3er_wrapper">

<div id="cu3er-container">

<a href="http://www.adobe.com/go/getflashplayer">

<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

</a>

</div>

</div>

Conclusion

That’s all there is to it. If you’re looking to minimize load on your server, I’d recommend that you create a condition that the cu3er settings in the header only appear on pages which require them. Even if you don’t, it’ll still work. It’ll just be redundant.

33 Comments »

Comment by Darren Moten — March 1, 2010 @ 5:00 pm

Well, I’m still trying to find out what the problem may be so I am just documenting incase someone experiences the same issue. Due to me using Wordpress MU the placement of the folders does something funky to my swf file that causes it to not work. So when I followed the tutorial and took all of the files out of the cu3er folder things worked fine for the swf file. (http://www.4everyoneelse.com/wp-content/themes/webfolio/cu3er.swf) however index page http://www.4everyoneelse.com still gives me the cu3er logo only. My troubleshooting:

replace the call with a direct path.
(no avail)

delete cache to see if they were temporary internet files still showing
(no avail)

any advice?
Comment by Rory — March 1, 2010 @ 5:07 pm

@Darren Moten

I had a look at your site and noticed that the path to your slideshow.php file is 404′ing.

http://4everyoneelse.com/wp-content/themes/webfolio/slideshow.php

Is this where you’re testing it?
Comment by Darren Moten — March 1, 2010 @ 5:32 pm

Yes, now for some reason I can not see the 404 error and when I looked at it from the FTP its in there.
Comment by Rory — March 1, 2010 @ 6:49 pm

Hi Darren,

I can see now that your php file is throwing up a blank page. Try hardcoding an xml file (you can copy mine if you’d like) and linking the head to that instead. This way, you’ll be able to narrow down the issue to the slideshow.php file (possibly a server issue?)
Comment by Darren Moten — March 1, 2010 @ 6:55 pm

I wouldn’t mind looking at yours. and it could be, but I’ve checked folder permissions so unless it could be something the server has put limitations on I have no clue what it is.
Comment by Rory — March 1, 2010 @ 7:08 pm

Here’s the output from my slideshow.php file http://www.redkingdesigns.com/wp-content/themes/Redking2/library/cu3er/slideshow.php

You can copy the source and edit as you’d like.
Comment by Darren Moten — March 1, 2010 @ 7:16 pm

There is no php in it. Just straight xml; I am looking at the correct file, right?
Comment by Rory — March 1, 2010 @ 7:32 pm

Yeah, that’s what I’m saying. You’re obviously having some php/server issues on your site, so if you test it using hardcoded xml, you can eliminate any other issue.

As for the php code, have you copied it directly from the tutorial? Throw whatever you’ve gotten into http://www.pastebin.com and I can have a look for you.
Comment by Darren Moten — March 1, 2010 @ 7:52 pm

this is the header
http://pastebin.com/HKSNCAw7

and this is the slider php
http://pastebin.com/vH9dcXUi

I switched up the category name/slug from Portfolio/portfolio to Features/features

thanks again for all of your help. Now if I switch from the php to hardcode xml wouldn’t I have to create an iframe to hold the cu3er?
Comment by Rory — March 1, 2010 @ 8:22 pm

You’re still calling the wp-config.php file as I am.

require_once('../../../../../wp-config.php');

If you have moved your slideshow.php to another directory, you’ll need to amend this. This is probably why your xml isn’t outputting.
Comment by Darren Moten — March 1, 2010 @ 8:25 pm

so since my config.php is in the root folder couldn’t I just direct link it to http://www.mywebaddress.com/wp-config.php
Comment by Rory — March 1, 2010 @ 8:34 pm

Hi Darren,

No you can’t do that. You must call the path relative to the slideshow.php file – not absolutely.
Comment by Darren Moten — March 1, 2010 @ 8:45 pm

before I say this didn’t work let me make sure I have it right.
yours points to http://www.yourwebsite.com/wp-content/themes/yourtheme/library/cu3er/slideshow.php
so the relationship to the require_once is ../../../../../wp-config.php

since is mines is http://www.mywebsite.com/wp-content/themes/yourtheme/slideshow.php its relationship should be ../../../wp-config.php

(screenshot of my messy ftp folder)
http://i47.tinypic.com/34o61c1.jpg

If so, that isn’t the answer.
http://pastebin.com/vxHkXhnT

Again, not to shower with praise but you have been immensely helpful to me. The cu3er.swf definitely pays attention to the category integration. Which is a major uphill battle, so It would seem the php portion would be the downhill coast.
Comment by Darren Moten — March 1, 2010 @ 9:08 pm

Okay, before I say this didn’t work let me make sure I got everything right. Your tutorial uses the path http://www.yourwebsite.com/wp-content/themes/yourtheme/library/cu3er/slideshow.php which in relation to the require_once would equal ../../../../../wp-config.php

If I moved mines up a couple of levels to http://mywebsite.com/wp-content/themes/mytheme/slideshow.php my require_once should be ../../../wp-config.php

if so here’s a screenshot of my server folder
http://i47.tinypic.com/34o61c1.jpg

and the new slideshow.php
http://pastebin.com/vxHkXhnT
Comment by Rory — March 1, 2010 @ 9:15 pm

Darren,

Yes, you’re right about the paths (assuming WPmu has the same directory structure). With the slideshow.php file pointing towards the wp-config file, if the php is still not outputting the proper xml, it’s one of two issues.

Server issue or WP MU differences.

The swf, header, and body information aside – focus on getting the slideshow.php file to show the xml. This is the most important part. Everything after that is a piece of cake.

It could very well be that the syntax for wpmu is different from that of the normal wp package. I wouldn’t know as I don’t use it but I’m sure the guys over at http://mu.wordpress.org/forums/ could shed some light on the issue.
Comment by Darren Moten — March 1, 2010 @ 9:43 pm

Okay, I will definitely ask about the difference in there. For a quick fix I am going to hardcode the xml into the slideshow.php So just one more question and I will be back once mu gives me some assistance (maybe the answer can help someone else down the line.)

But why would my slideshow.xml file be a php file with no php inside of it?

Since I am switching
http://pastebin.com/7ZmD6vxu

to
http://pastebin.com/KDcLng2b
Comment by Rory — March 1, 2010 @ 9:59 pm

Darren,

It wouldn’t. You would save it as an xml file instead. Best of luck.
Comment by Peter Smith — March 9, 2010 @ 2:11 am

Hi Rory,
Great article. I have a similar issue to Darren. Your full WordPress installation worked well except that the cu3er.swf gets stuck on the loading logo. I did this:
1. Hardcoded the slideshow.php – xml works fine but no pics
2. Then hardcoded everything within the flash script in the header.php and display div in the index.php – same: still no pics. Tested the following: path to xml – fine; path to js – fine; path to cu3er.swf – fine. Just gets stuck on the loading logo.
3. Put your cu3er code from these two files into a single file (http://www.internetgraphics.com.au/wp-content/themes/maimpok/library/cu3er/playFlash.php) – no code changes what-so-ever and this works perfectly!
4. Pasted this very same playFlash.php code into the index.php and then the page.php (tried with and without the existing index.php code and the page.php code) – it doesn’t work – calls the cu3er file, displays the cu3er load logo and sticks there.

So it works when invoked by a normal php page but doesn’t when it traverses the WordPress framework.

Do you think there is there something the WordPress framework does to spoil Flash playback – or have I done something monumentally stupid? Is there a possibility of a bug in cu3er causing this?

What pushes me on is that you have it working perfectly.

Interestingly, I had exact same problem placing cu3er in the DNN framework – first in a text module and then in a media module. Only solved it by calling the cu3er.swf directly via an iFrame – which works perfectly.

Any thoughts would be warmly appreciated and thanks again for the effort you put into the article?
Cheers – Peter
Comment by Adrian Yeo — March 10, 2010 @ 4:46 pm

Hi Rory,

I’ve done my configuration on localhost.

I’ve got my XML output correctly, and i suppose i have also got the correct reference from the index.php. However, instead of loading cu3er, the logo “get adobe flash player” is displayed.

FYI, this is part of the output generated from my index.php

var flashvars = {};
flashvars.xml = “http://localhost:8080/wp5/wp-content/themes/default/library/cu3er/slideshow.php”;
flashvars.font = “font.swf”;
var attributes = {};
attributes.wmode = “transparent”;
attributes.id = “slider”;
swfobject.embedSWF(“http://localhost:8080/wp5/wp-content/themes/default/library/cu3er/cu3er.swf”, “cu3er-container”, “600″, “350″, “9″, “expressInstall.swf”, flashvars, attributes);

hope you can guide me on this. tq

p/s i paste the code from step 10 into index.php
Comment by Adrian Yeo — March 10, 2010 @ 6:44 pm

I’ve managed to resolve the issue already.

Notice that there is a slight difference between step 7 and step 9 for the path of “js”.

STEP 7:

library
* cu3er
o
* js

STEP 9:

<script type="text/javascript" src="/library/cu3er/js/swfobject/swfobject.js”>

Thanx anyway for your great post. I appreciate it alot.
Comment by Rory — March 10, 2010 @ 7:07 pm

Ah, well spotted Adrian. Thank you! The directory should be like so: /library/cu3er/js not /library/js/ as I have in the tutorial.

I’ll make sure and amend this asap.

*update
I’ve amended the directory step
Comment by Wayne — March 14, 2010 @ 4:09 am

Hey im just wondering but when i get this working and it works great thank you very much! But when the description is showing is shows the and tags? How can i get ride of those??
Comment by Rory — March 16, 2010 @ 3:43 pm

Hi Wayne,

Good to hear you got it working.

Add this to your functions.php script to remove the paragraph tags from the excerpt:

remove_filter (‘the_excerpt’, ‘wpautop’);
Comment by Alaina — March 18, 2010 @ 3:43 pm

You said to open the slideshow.php file to add the code, but I have no such file in the downloaded cu3er zipped file I just installed. Did you rename your file to slideshow.php? If you did, what’s the original name of the file, because the slideshow.php file doesn’t exist in my install.
Comment by Rory — March 18, 2010 @ 4:44 pm

Hi Alaina,

You have to create the directory structure as per the tutorial. That structure is not included with cu3er. Only the cu3er files are.
Comment by Alaina — March 18, 2010 @ 5:00 pm

Okay, that’s what I figured after I searched through the included directories and didn’t see it: that I have to create it. Thanks for your quick reply and help.
Comment by Demetris — March 26, 2010 @ 5:59 pm

Ok, maybe I am missing something but exactly where is the “slideshow.php” file? When I downloaded the software and extracted it, this file was not listed.

Thanks in advance,
Demetris
Comment by David Alexander — April 23, 2010 @ 8:39 am

Hi, I have been going through multiple changes but still not having much luck. I think it may be the xml issue as it outputs an error in the browser.

Would greatly appreciate your advice, the link is

http://kismanufacturingltd.com/
Comment by Cava Mondo — May 17, 2010 @ 2:49 pm

Testing on WP3 BETA 2 and Buddypress theme .. it doesnt seem to work .. only displays a \”Download FLashplayer\” although system all updaten on flashplaer.
Comment by James — July 3, 2010 @ 4:48 am

This is a great tutorial, I was able to get the cu3er up and running in no time because of this. Could you help me on two things please:

1. How do I get the description to stay up on the screen longer, what variable is it. I have been playing with the tweenout time, but this doesn’t make the description stay in one place.

2. The description is showing the paragraph tags and other junk. I saw you replied earlier and said to add the remove_filter (‘the_excerpt’, ‘wpautop’); to the functions.php file. I did that but I still have the problem.

Your help is greatly appreciated.
Comment by MafiaKid — July 14, 2010 @ 2:55 pm

Hi, Rory.

I have found a simple plug-in.

As you mention remove_filter (‘the_excerpt’, ‘wpautop’);

http://benpartch.org/downloads/no-excerpt-p-plugin/
Comment by Adam — July 26, 2010 @ 1:57 am

Has anyone had any luck getting this to work in WP 3? It freezes on the Cu3r logo for me…

Much help is greatly appreciated!
Comment by Rory — August 16, 2010 @ 5:44 pm

I haven’t tried to get it working in WP3.0. It’s what I’ll be using in the future, so if it happens that a client requests it, I might publish an update. Or if anyone else has success with WP3 (which shouldn’t be too hard), I’d be more than happy to link to it.