Pippin's Pages

Pikachoose + WordPress

Pikachoose – http://pikachoose.com/ – is a jquery gallery plugin provides a very smooth, attractive gallery system. There is only one problem: it’s static and requires manuel html editing to add or remove images.

This tutorial will walk you through how to implement Pikachoose in a wordpress blog and make it dynamic by utilizing individual wordpress posts for gallery thumbnails.

1 – Get the Gallery

The Pikachoose gallery can be downloaded from the plugin’s homepage http://pikachoose.com/. Get the latest version and extract the archive to your theme’s directory.

The image above shows the folder structure we are looking for.

2 – Edit Header.php

Place the following code into your theme’s header.php file. This will call the gallery’s style sheet and the necessary jquery and javascript files. Be sure that you paste it after <?php wp_head(); ?> and before </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<link type="text/css" href="<?php echo bloginfo('stylesheet_directory') ?>/pikachoose/styles.css" rel="stylesheet" />
 
<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/pikachoose/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/pikachoose/js/pikachoose-min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
});
 
$(document).ready(
function (){
$("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
});
 
$(document).ready(
function (){
$("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false});
});
-->
</script>

3 – Edit Functions.php file

Because we are using individual wordpress posts as the source for gallery thumbnails, we need a way for the gallery to pull the image urls from the posts.

Paste the code below into your theme’s functions.php file, or create a file by that name if it doesn’t exist. This will get the URL of the first image attached to a wordpress post. The code is based on WPRecipe’s orginal post here and republished by Fikri Rasyid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  
 
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
 
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

4 – The Gallery Code

Insert the following code into your index.php, single.php, page.php or any of your other template files. This will set up the structure for the gallery that we will style later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="pikachoose">
<ul id="pikame">
 
<?php
global $post;
$postslist = get_posts('category=#&numberposts=0');
foreach ($postslist as $post) :
setup_postdata($post);
?>
 
<li><img src="<?php getImage('1'); ?>"/></li>
 
<?php endforeach; ?>
 
</ul>
</div>

This code will set up the gallery to display the first image from every post in category ID #. It can be placed in or outside of the wordpress loop.

5 – Link each image to its post

In the case that you would like to provide a link at the base of the main image that links to original wordpress post, simply modify your code slightly.

1
2
3

<li><img src="<?php getImage('1'); ?>"/>
<span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></span>
</li>

This will provide a clickable title in the caption area that is linked to the post.

6 – Write posts with images

Create a category (and insert its ID # into the code in step 4) and fill it with posts that each contain an image. If more than one image is included in a post, only the first will be displayed as a thumbnail.

Once all is said and done, your result look something like this:

In the above example, I have modified the original CSS that is included with the download slightly. To replicate mine exactly, use this CSS:

.pikachoose{width:505px;margin:10px auto 20px auto;}
/* This is the ul you have all your images in */
.pikachoose ul{padding-left:0;width:505px;margin:0;overflow:hidden;}
.pikachoose ul li{float: left;border:1px solid #ccc;padding:2px;;margin:0 6px 4px 0;position:relative;overflow:hidden;}
.pikachoose ul li div img{position:relative;cursor:pointer;}
 
/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{width:500px;height:317px;display:block; position:relative;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:0px;left:0px; margin: 10px;}
.pika_back_img{position:relative;top:0px;}
.pika_subdiv{position:relative;border:1px solid #CCC; background: #F0F0F0; padding:10px;}
.pika_subdiv img, .pika_subdiv a img{  border: 1px solid #666;}
.pika_caption{width:498px;height:16px; margin-top: 10px; padding: 4px 0 4px 0;text-align:center;background: #F0F0F0; border: 1px solid #CCC;}
.pika_caption a{color:#666;}
 
.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat;}
 
.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline; }
.pika_navigation{padding-top:10px;clear:both;text-align:center;}
 
/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('fastf.png') top right no-repeat;}

Enjoy!

Tags: gallery, jquery, Wordpress
Posted in Tutorials | 5 Comments »