Posted on 12 Comments

Automatic Highslide Integration for WordPress Images and Galleries




Highslide really makes your pictures and galleries look a lot better in WordPress. I’ve been using Lightbox, Shadowbox, and Thickbox for quite some time, but I’ve always wanted the ability for a thumbstrip like you see in Blogspot and Flickr. Highslide is an amazing image display that offers huge amounts of customization. Basically, you create your custom look over at the Highslide Editor. Then you Publish your work and download it as a ZIP.

I couldn’t find a Highslide plugin that offered customization for galleries and single images that took full advantage. I followed some instructions over at Roadrash.no to get Highslide working on WordPress and then used some code from this WordPress forum discussion to get Highslide working on single images.

Here is a sample screenshot of a Highslide gallery with thumbstrip:

How to use Highslide in WordPress

If you follow the steps below, you will have Highslide integrated into your WordPress installation and never have to use special shortcodes or do anything different than you now are for single self-linked images or the default WordPress gallery. This method or any method/plugin will most likely have issues if you try to use other image javascripts! Turn off Lightbox or any other image javascript you might be using.

Note to Woothemes users: go to the end of this post to see how to fix a potential issue.

The following tutorial looks harder than it really is. It should take about 10 minutes if you are slow. Difficulty: low-medium

Step 1: Integrate Highslide into your WordPress Template for stand-alone images and Galleries:

There is an extremely detailed process with images over at Roadrash.no. I recommend you read that if the instructions below aren’t clear enough.

  1. Go to Highslide.com/editor and customize your look for galleries (tip: check box next to Enable Galleries on the Gallery tab)
  2. When you’re done, click the green Publish button and accept the License (you may not use the plugin commercially if you don’t pay)
  3. Click the “Download a zip archive” link. Once downloaded, move the folder “Highslide” to your desktop and delete 2 folders: “highslide-custom” and “sample-images”
  4. Open “highslide.config.js” in a text editor (NOT Microsoft Word) and change hs.graphicsDir = 'highslide/graphics/'; to hs.graphicsDir = 'http://yourwebsite.com/highslide/graphics/';
  5. Change slideshowGroup: 'group1', to
    slideshowGroup: (function() {
    var groups = [];
    $('.gallery').each(function(i, $item) {
    groups.push($item.id);
    });
    return groups;
    })(),
  6. Delete the following lines at the end of the file:
    // gallery config object
    var config1 = {
    slideshowGroup: 'group1',

    and then delete the }; at the end of the file.
  7. Change any remaining lines at the bottom from:
    numberPosition: 'caption',
    to the following format with hs. and = and  ; (add the even if there is no , ):
    hs.numberPosition = 'caption';.
  8. Add the following above hs.graphicsDir:
    $(document).ready(function() {
    Add the following at the very end (if you want single images background to match galleries with darkening background, change the line below starting with dimmingOpacity: 0 to 0.75 or whatever value you chose in the Highslide Editor for galleries):
    // for gallery
    $('.gallery-item a').addClass('highslide');
    $('.gallery-item a').each(function() {
    this.onclick = function() {
    return hs.expand(this, {
    slideshowGroup: this.parentNode.parentNode.parentNode.id
    });
    };
    });

    // For single images
    hs.onSetClickEvent = function(sender, e) {
    e.element.onclick = function() {
    return hs.expand(this, singleConfig);
    }
    return false;
    };

    var singleConfig = {
    slideshowGroup: 'single-image',
    outlineType: 'drop-shadow',
    wrapperClassName: 'borderless',
    numberPosition: null,
    dimmingOpacity: 0
    };

    hs.registerOverlay({
    slideshowGroup: 'single-image',
    html: ' <div onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    fade: 2
    });

    });.
  9. Put the following in your WordPress header.php for CSS and the Javascript (DON’T forget to change “yourwebsite”) :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://www.yourwebsite.com/highslide/highslide-full.packed.js"></script>
    <script type="text/javascript" src="http://www.yourwebsite.com/highslide/highslide.config.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.yourwebsite.com/highslide/highslide.css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="http://www.yourwebsite.com/highslide/highslide-ie6.css" />
    <![endif]-->
  10. Last but not least: Upload the folder “highslide” to the root of your website (ex: http://yourwebsite.com/highslide)

Step 2: Automatically add Highslide to all Self-Linked Images:

Insert the following code into your Functions.php template file before your closing PHP tag (?>):
define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function addhighsliderel_replace($string) {
$pattern = '/<a(.*?)href="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?)>/i';
$replacement = '<a$1href="$2.$3" rel='highslide' class='highslide'$4>' ;
return preg_replace($pattern, $replacement, $string);
}
add_filter('the_content', 'addhighsliderel_replace');

Fix Woothemes Conflict

I originally tried this method on the Royalle theme. Woothemes had setup the featured image in the post to self-link and rel=lightbox. This made Highslide not work for these featured images. For Highslide to work correctly, it needs to make both the class and rel highslide.
Here’s how to fix it (its probably similar with other Woothemes): Open admin-functions.php in your theme editor. On line 471 or about, look for
} else { // Default - output with link
if ( ( is_single() OR is_page() ) AND $single == false ) {
$rel = 'rel="lightbox"';

Replace $rel = 'rel="lightbox"'; with $rel = 'rel="highslide" class="highslide"';
To be safe you can also do CTRL+F to find the 2 other instances of “lightbox” and change it to “highslide”.

Credits:
http://roadrash.no/wp-highslide/how-to-highslide-gallery/
http://wordpress.org/support/topic/automatic-adding-lightbox-rel-and-group-to-images-in-posts

12 thoughts on “Automatic Highslide Integration for WordPress Images and Galleries

  1.  Thank you!

  2. I just add to your code for function.php this line class=”highslide” onclick=”return hs.expand(this)” and it work now.

  3. Great write-up, thanks!  I plan to implement most of your solution on my blog soon.  A couple questions/notes:
    1) There apparently is another solution for implementing the highslide effect on old post images here: http://highslide.com/forum/viewtopic.php?t=3263
    It’s handled by the highslide script file instead of the WordPress system.  I’m not sure which would be more efficient, but there you go.

    2) Does your implementation allow you to apply the effect on individual attached images on a post, keeping them separate from each other? In other words, I want to disable the next/prev toolbar on certain single images on a post, preventing a user from skipping around between photos.  I only want to give them the enlargement capability.  But elsewhere in that same post, I want to enable the control bar.

    I’ve tried using various Highslide-based plugins, but they don’t seem to have the capability to turn this things on and off within a single post.

    1. both the method you referenced in question #1 are very similar. they both call the JS and CSS. The method you referenced installed highslide with a plugin.

      I chose the method in this post because I had more control in the implementation of single images and galleries.

      WordPress associates images with a post/page when you upload FROM the post/page. This allows WordPress to know which images should be part of a gallery. 
      If you upload using the media manager and then insert the image using standard IMG HTML markup, the image will not be associated with the post. This means the single images will not be part of the post/page gallery. NOTE: this only applies if you are trying to use galleries AND single images in the same post/page.

      1. Thanks, spoon.  I tried implementing your functions.php code for inserting the rel tag on all images.  For some reason, this breaks my site, like there’s a syntax error or something.  I put this in my child-theme functions.php, double checked the copy/paste.  Odd.  If I comment out the pasted code, all is well again.

        With some commenting trial and error, I found that the problem is in the two regex lines, $pattern and $replacement.

        Does this sound familiar?

        1. Spoon, I got it fixed.  I found a similar solution here.: http://wordpress.stackexchange.com/questions/14802/apply-a-tag-to-every-images-link-rel

          I’m not real savvy on PHP syntax, but this other solution has mostly double quotes instead of single.  Could this be part of the problem?  Whatever the case, this other solution is working for me.

          Just fyi.

          1. glad to hear you fixed it. if this post doesn’t work for some people, hopefully they can follow your suggestions.

            the code in this post is exactly what is in my theme files. I am using this on a woothemes theme.

  4. Hi,
    thanks for this, its great!
    I had the same problem as Rob, I tried implementing your functions.php code and it broke my site. After I changed the quotes to this it was ok.

    define(“IMAGE_FILETYPE”, “(bmp|gif|jpeg|jpg|png)”, true); function addhighsliderel_replace($string) { $pattern = “//i”; $replacement = ‘‘ ; return preg_replace($pattern, $replacement, $string); }add_filter(‘the_content’, ‘addhighsliderel_replace’);

    However, I can’t get it work! Galleries work fine, but single imiges don’t 🙁 I guess there is some mistake in this code? Any suggestions? 
    Thank you:)

    1. sorry. i’m not a php expert and was able to hack the 2 source codes together. I’m sure its an easy fix if you have someone that can read php

  5. Hi,
    thanks for this, its great!
    I had the same problem as Rob, I tried implementing your functions.php code and it broke my site. After I changed the quotes to this it was ok.

    define(“IMAGE_FILETYPE”, “(bmp|gif|jpeg|jpg|png)”, true); function addhighsliderel_replace($string) { $pattern = “//i”; $replacement = ‘‘ ; return preg_replace($pattern, $replacement, $string); }add_filter(‘the_content’, ‘addhighsliderel_replace’);

    However, I can’t get it work! Galleries work fine, but single imiges don’t 🙁 I guess there is some mistake in this code? Any suggestions? 
    Thank you:)

  6. hi
    I use chameleon theme from elegant theme, and if I add the script at step 2, it make my theme error

  7. Does it still work with the last WP update? 3.5? I’ve followed the instructions, but I can’t seem to get it to work on a highslide custom pack as your directions indicate. I can build the individual pages from the generic highslide pack, but I have to upload images and write the code directly into the page as opposed to using the WP interface to automatically create galleries. I’d like it to work automatically as this promises.

Leave a Reply

Your email address will not be published.