Adding more slideshow images to your GraphPaperPress Modularity WordPress theme

You will see that I updated my blog recently to use GraphPaperPress’ modularity theme – following Gavin Gough’s and Matt Brandon’s articles pointing out the options open to photographers with these excellent templates, especially the SEO capabilities and the integration with Photoshelter. The standard out of the box themes work really well, but inevitably I wanted to tweak or change a few things, so I thought it might be helpful to spend a couple of posts sharing with others what I have done.The first of these is on adding images to the slideshow, the second will be on an amazing eCommerce integration option I have unearthed.

This post tells you how to to increase the number of images that are in the slideshow.

The good news is it is pretty simple. It does require  you to edit some code, but providing that you are careful and follow what I have done below, you can do this without any technical knowledge whatsoever. Before you start, just back-up a copy of your modularity theme, which you can find under your wordpress directory, eg ../wordpress/wp-content/themes/.

Okay, there are two php files that you will need to change, and we are going to make the changes using the built-in text editor within wordpress. From your wordpress dashboard, go to “Appearance” and select the “Editor” option. This will open up a screen with a box containing the file “customs.css” open and ready for editing. On the right there will be a list of all the files that are contained in the modularity theme. Go over to that list and double click on slideshow.php.

The page  will refresh and the text box will now contain the the php code that makes up  the slideshow.php file. Scroll down towards the bottom until you find the following Les the [code] tag which I have put in there so that is displays correctly and you can cut and paste it easily) :

[code]<li><img src="<?php if ( get_option('gpp_slideshow_image_5') <> "" ) { echo get_option('gpp_slideshow_image_5'); } else { bloginfo('template_directory'); ?>/images/slideshow/image5.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li>[code]

This is the code that displays your images into the slideshow - in this case in the 5th slot. The first thing we need to do is create some more slots in the slideshow to display how ever many more images you want to show. Effectively you need to copy this block  of code that refers to image number 5 and replicate it by the number images you want to add, ensuring that you change the numbers each time. Or you can copy and paste the code I have posted below to add another 5 images.

Here is the code for another 5 image (remember to strip out the two {code} tags):

[code]<li><img src="<?php if ( get_option('gpp_slideshow_image_6') <> "" ) { echo get_option('gpp_slideshow_image_6'); } else { bloginfo('template_directory'); ?>/images/slideshow/image6.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_7') <> "" ) { echo get_option('gpp_slideshow_image_7'); } else { bloginfo('template_directory'); ?>/images/slideshow/image7.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_8') <> "" ) { echo get_option('gpp_slideshow_image_8'); } else { bloginfo('template_directory'); ?>/images/slideshow/image8.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_9') <> "" ) { echo get_option('gpp_slideshow_image_9'); } else { bloginfo('template_directory'); ?>/images/slideshow/image9.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_10') <> "" ) { echo get_option('gpp_slideshow_image_10'); } else { bloginfo('template_directory'); ?>/images/slideshow/image10.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li>[code]

Now click on the "Update" button underneath the box. Okay part one done and you are about half way through!

Now we need to update the Homepage slideshow section of the modularity interface, to add the ability for us to upload the images and assign them to each of the slots that you have just created. In the editor, go back to the right hand side of the page and now open up theme_options.php

Scroll down until you find:

$options[] = array( "name" => "Slideshow image 5",
"desc" => "Upload your fifth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_5",
"std" => "",
"type" => "upload");

Between the end of that code and the next block (that begins:
$options[] = array( "name" => "Slideshow height",
"desc" => "Enter the height, in pixels, that you want your slideshow to be.")

Insert the following:

[code]$options[] = array( "name" => "Slideshow image 6",
"desc" => "Upload your sixth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_6",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 7",
"desc" => "Upload your seventh slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_7",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 8",
"desc" => "Upload your eighth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_8",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 9",
"desc" => "Upload your ninth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_9",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 10",
"desc" => "Upload your tenth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_10",
"std" => "",
"type" => "upload");[code]

Now press the "Update" button below the text box to save and update the changes to the theme_options.php file.

That's it - all done!  To check everything is ok, go back to the modularity section, open up the Homepage slideshow section, and you will now find that you can upload another 5 images

Good luck

This entry was posted on Sunday, December 27th, 2009 at 4:59 pm. It is filed under Wordpress and tagged with GraphPaperPress, Modularity, Slideshow, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed.