Photospace Responsive

Created Mar 6, 2013 Made on the Gold Coast 128 Responses


A simplified version of Photospace featuring a responsive only layout.

Based on the Galleriffic gallery, Photospace takes advantage of the built in gallery features of WordPress. Simply use the WordPress admin to create a gallery and insert it in the page. You may need to adjust the size of the gallery to suit your theme in the settings.

The Photospace gallery plugin allows you to:

  • Upload multiple images at once
  • Easily order images via drag and drop
  • Add a title, caption and description

Via the options panel you can modify:

  • Thumbnail number, size and shape
  • Size of the main image
  • The width of the gallery columns and the size of the main image
  • Create a basic slide show

Some other features include:

  • Keyboard control
  • Pagination
  • Slideshow controls option available
  • Supports multiple galleries on a page or post
  • Supports WordPress multi-site
  • Supports shortcode attributes

Here is a demo

download the plugin

There is also an admin panel with some options. Settings > Photospace Responsive. The gallery should work with the default settings.

Loading gifs 

Create your own colour coded loading gifs here or

Template tag

If you want to hard code this gallery into a page template you can do so with this code.

echo do_shortcode('<p data-wpview-marker="%5Bgallery%5D">.</p>');

Conditionally remove header scripts and styles from a page

remove_action('wp_enqueue_scripts', 'photospace_responsive_scripts_method');
remove_action('wp_enqueue_scripts', 'photospace_res_scripts_method_history');
remove_action('wp_head', 'photospace_responsive_wp_headers');

Conditional tag info here
Add just before wp_head() in header.php – Thanks to Dario Zadro

Alternate vertical thumbnail column in wide view. Add this to your theme css.

.photospace_res .gal_content {
  float: left;
  width: 75%;

.photospace_res .thumbs_wrap2 {
  float: left;
  width: 25%;

@media screen and (max-width: 750px) {

.photospace_res .gal_content {
  float: none;
  width: 100%;

.photospace_res .thumbs_wrap2 {
  float: none;
  width: 100%;

Shortcode attributes

You can set the following attributes you control your gallery per instance:

  • id – Set the post to read the attached images from
  • num_thumb – Set the Number of thumbnails on each page
  • num_preload – Set the number of images to be preloaded
  • show_captions
  • show_controls
  • auto_play – Start slideshow automatically
  • delay – Between each slide in milliseconds
  • hide_thumbs
  • horizontal_thumb
  • include – Only includes a new list, comma separated attachment IDs (include=”24,30,43″)
  • exclude – Comma separated attachment IDs (exclude=”24,30,43″)

Like so

[gallery horizontal_thumb=1 num_thumb=7]

Help! The gallery doesn’t load the large image?

This is usually caused by a Javascript conflict. The easiest way to track down the problem is to remove or disable other scripts.

  1. Try to disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  2. Switch to the Twenty Eleven theme to rule out any theme-specific problems
  3. Use firebug to find the error. This may help you track down the conflict
  4. [advanced] You may have some scripts embedded in your theme. To disable these look inside the header.php and footer.php

If you find a conflict please mention it in the comments for other users.


  1. Tatsuquito says:

    This is a great plugin. Thanks! The vertical image is extended to the width of the theme I use. That would be better if the width is set to “auto”.

    .photospace_res .slideshow img {
    width: auto;
    height: auto;

  2. Hi Dean,
    Is there a way to also use the standard WP gallery in a site that uses this plugin? Is it possible to override photospace responsive for select galleries?

  3. It isn’t responding and resizing in my browser or mobile phone. Is it responsive.

  4. Hi guys!

    Looks like a great plugin! However, I was trying to use it, and I don’t see the nice thumbnails on top of the large image, as it’s in the demo. What can be possibly wrong?

    Thank yoU!

  5. Thanks, Dean for response.

    Here’s the link:

  6. Is possible to add the lightbox function?

  7. Hi, the images are being insterted as 600px no matter what max-width is specified in the options – is there a way to get images over 600px wide?

  8. great plugin… i really need this… thanks dean… keep it up.

  9. can you please tell us that how to set thumbs at bottom of slider…
    thanks in advancd

    • I don’t think that is a good idea as they would move depending on the image height.

      • actually i have a requirement that thumbs should be at bottom of slider… thats why i am asking… if there is any option, or if we can set from code then tell me please…

        • No option sorry.

          • i have done… from your plugin file… “photospace-responsive.php”
            and i drag the thumbs code and move it after slider code…now its working… :)

            • Hi, could you tell me what part of the code, as in where did you start to where did you finish copying, to make the thumbnails appear at the bottom please? I don’t want to end up messing the coding too much! Thanks.

              • Hi Clare. I’ll try to make this an option soon. It might be a bit tricky but you need to move the div’s

                <div class="thumbs_wrap2"> under <div class="gal_content">

                • Hi Dean, that would be fantastic if you can. I love the gallery, I’ve spent ages trying to find one, and this fits the bill!

                  Also, is it possible to change the way the next page and previous page looks, as it just comes up with white boxes, and I’d like to have arrows if possible, or is it suppose to be arrows and it’s just not appearing for me properly?

                • Hi. Thank you for your awesome plugin! I´ve tried to change div´s order, but didn´t work. Im not a code expert. What exactly do I have to select and move under?
                  I really apreciate your help.

  10. Hi Dean,
    Could you look at my web link on mobile/iphone? It seems the slider’s left side is cut off on the left.

  11. Hi, this looks like an awesome plugin, but it does not work with Roots theme ( – would you have any idea why? You can use the following link as an example:

    I have tried the 2012 theme and it appears to work fine.

    Thanks in advance for your help.

    PS: have also posted in the plugins support .forum

  12. hi dave, tell me please how to upload multiple galleries…

  13. Hi Dean,

    Beautiful plugin. Is there a way to incorporate the ‘crossfade’ thats incorporated in ‘photospace2’ into ‘photospace responsive?

  14. Is there a way to enable swiping between photos on mobile?

  15. Is the next/previous image not available in photospace responsive?

  16. Once Photospace plug-in installed still no option to set the template to gallery.

  17. Hey Dean, just wanted to say thanks for the plugin! This is an awesome iteration of a classic.

  18. Hi I am working on revising my website and the Photospace Responsive plug-in is a perfect solution for displaying some of my portfolio items! Thank you for your work on this. I am seeing a very odd behavior on IE (not on any other browser) — on IE if you hover over the first thumbnail of the second row (little dog in circle) – it disappears and shifts the row. When the next slide advances, it comes back – but on hover it goes away. I have no idea how to fix this…If you have any suggestions it would be appreciated. You can see using IE at this link: thank you in advance for any suggestions. thx, Laura

    • Seems to be resolved by unchecking the option for “Try to clear current theme image css / formatting”. Odd…but happy it is working!

  19. Hey, a great plugin. Thanks!
    i try to put a hyperlink into caption (to open image with fancybox) Is it possible to do it ?
    ps: simple link works fine with external target but not to showin image popup , i tried ( responsive lightbox plugin with prettyphoto, swipebox,fancybox and nivo lighbox script)
    any solution to disable photospace script when i click on link image into caption / description section to enable fancybox script ?

  20. plugin is not working for me, below is the post link, could you please check and advise what’s the problem.

  21. Driano Chesque says:

    Hello, I want to add images in the slideshow transition, is possible?
    Similar advertising images on this website:

  22. Hey Dean,

    I just started using your plug-in for a few galleries I have. I changed the option for the maximum width and height for the images in the admin panel, but they are still showing up with the default values. How do I rebuild the gallery without deleting the images and re-uploading them?


  23. Can this be used on PAGES too? Or will it only work on POSTS?

    I got it to work on one of my POSTS, but I can’t get it to work on a PAGE.

    I am NOT trying to use it in a template for a page. I am trying to use it in the content area of a page (how you would normally insert a regular wordpress gallery into the content area of a page). But, no dice.

    NOTE; I am using WP 3.8.1, with Genesis Framework, using the Agency 2 Child theme.

    Thanks in advance.

  24. I have this running well in WP 2013 theme pages, but the Next and Previous images for don’t download, so it’s 2 blank squares. At first I thought the Next was for the next image in the thumbnails, but now I see it goes to the next set of thumbnails, so the buttons are working correctly.

    I can see the link in the css file to arrow-right.svg, but it says it can’t download the file.

    Overall, a very nice plug-in and it has been easy to set up. I hope you can help with the image download.


    • I got some help solving the problem, adding the following code to my child css:

      .photospace_res .thumnail_row {
      background-image: url(‘’);

      .photospace_res .thumnail_row a.prev {
      background-image: url(‘’);

      the gsv files wouldn’t download, but the png ones do.

      Hope this helps, if anyone else has the same problem.


  25. Hi, I would like to put the thumb on the bottom of the image.
    I read the Dean comment but in the
    photospace-responsive.php i dont found the
    There are any think I can do for that?
    Than you

  26. the line i don t found it s this

  27. Why I can t add the line
    div class=”thumbs_wrap2

  28. Great Plugin, of course.
    But when it is in use with Auto Thickbox ( it is open up the thumbnails of the gallery in an auto thickbox first and then it opens up the same site in a small window.

    Possiblities to manage this without having this error?
    Greetings Christian

  29. Hi Dean,
    have you got any news for put the miniature below tha picture??

    Thank you

  30. I have gone into the plugin css and centered the caption and made it black (for better contrast).
    But I should like to make the background white and not grey.
    Perhaps this is in WP css and not Photospace.

    Thanks for your efforts.

  31. Hi Dean, I’m having a problem with my slideshow images looking slightly blurry can you tell me the best upload settings? Should I resize before uploading?

  32. Hi Dean, thanks for creating such a great free plugin. I think it is the best one after trying more than 20 different plugins. I have a little question, is it possible to add navigation controls to it? (Like ‘Next’, ‘Prev’). Many thanks! :)

    • Hi Mohamed. Not as yet, I’ve tried to keep the controls minimal as there isn’t much room in the responsive mobile view. I may add this as an option in future version.

  33. Hi :) I love this plugin so much! I’ve noticed that two of my main images showing on my page aren’t quite the full width, but others are?

    I’ve tried regenerating thumbnails and haven’t changed the thumbnail dimensions at all so I’m not sure what’s causing this :( please help? Thank you!

  34. Hi

    I would like to use Photospace Responsive with Woocommerce, but I am a bit stumped how to get it properly hooked up. Can you help?

    • Hi Tim. I’m not sure how well this would work in this situation. This plugin output the gallery from the content area. I normally use Advanced Custom Fields to integrate a custom gallery in shopping carts.

  35. The code above to remove the function from a single page or so, is not complete. This is my solution

    if (function_exists(‘photospace_responsive_scripts_method’) &&
    function_exists(‘photospace_res_scripts_method_history’) &&
    function_exists(‘photospace_responsive_wp_headers’) ) {

    remove_action(‘wp_enqueue_scripts’, ‘photospace_responsive_scripts_method’);
    remove_action(‘wp_enqueue_scripts’, ‘photospace_res_scripts_method_history’);
    remove_action(‘wp_head’, ‘photospace_responsive_wp_headers’);
    add_shortcode( ‘gallery’, ‘gallery_shortcode’ );


  36. Hi Dean.

    Did you have any luck yet making an option for thumbnails to go underneath?

    Great plugin!


  37. Hi Dean, thank you for creating this great plugin. How can I get the images to load in fancybox like on the previous version?

  38. Hi Dean,
    Great plugin, simple and easy to manage.
    Just what i looking for.
    Thans for develop it! :)

  39. Hi, can you please let me know why the main project image isn’t resizing fully on mobile? It keeps spilling off the page.

    Also, how do I make the main image centered? Example url:

    Thank you for your help.

    • Hi Vanja.

      You just need to increase the size of you max image size in the settings. Then rebuild your thumbs.

      See this comment:
      It seems to be a common problem. I will try to fix this in the next version.

      • Hey thanks for the reply.

        I did what you said – increased max size of images in the plugin and regenerated the thumbs – but still I have the same problem where the main image isn’t resizing to mobile/device screens….

        Centering the image also isn’t working – I have the ‘clear image options’ on and I put this code (below) in the style.css in the theme and the gallery.css in the plugin and the main image still won’t center…

        .photospace_res .slideshow img {
        float: none !important;


        Any other ideas? Sorry to be a pain, your help is much appreciated. Thank you.

        • OK looks like you have a different issue. Please add this:

          .photospace_res .slideshow img {

  40. THANK YOU!!!!

  41. Hi!

    When we installed the plugin the arrows in the boxes don’t show up. Do you have any idea why? I’ve uninstalled and reinstalled the plugin and it still doesn’t show up.

    Here’s a direct link:

    Also, is it possible to align the caption to the left instead of the right?

  42. Hi Dean,

    I used your plugin on an old job last year (you might remember, I came up with a really ugly preg_match statement to make the output of the shortcode match the output of a gallery inserted into a post – )

    I just today discovered your responsive gallery (awesome!). However I discovered a strange bug where it displays the first photo’s description twice. It only does this on page load, if you click the 2nd photo then click the 1st photo again the 2nd description vanishes.

    Examples here:

    Any ideas? :-)




  43. Argh again. Some spammer already had the dean account :(

    Can you try deantest / dean123

  44. Thanks, Dean, for a nice plug-in. My favorite gallery so far because it looks clean. I can’t center my captions below the image, however. I’ve opened the CSS file and changed the alignment to center, but it didn’t seem to have any effect. i ticked the box “try to clear theme css” too. Not sure I edited the code correctly … so then I changed the ‘padding right 0″ to 20 or so, so at least it isn’t jammed all the way right, and that didn’t work, either. This is what it now shows … and I’d prefer it just be fully centered. Thank you!

    .photospace_res span.image-caption {
    display: block;
    position: center;
    .photospace_res .caption {
    color: #000000;
    text-align: center;
    padding-right: 20;

    • Can you post a link to the issue? Thanks.

      • Thanks but I figured it out a few days later and forgot to report back. Darn if I can reply what I changed, but I finally “got it” and it’s now centered and bold. Much thanks.

  45. san diego hills says:

    Hi :) I love this plugin so much!

  46. What would it take to make the gallery plugin display the gallery like it does on this website?

  47. Hi there!
    This plugin looks like just what I need, there’s only one problem:
    The thumbnails won’t align horizontally like by default shown in all the demos, and I can’t for the life of me figure out how to get them. I just want it to look like in the demo above, but instead it looks like this:

    This is the gallery insert shortcode in my WP-post:
    [gallery horizontal_thumb=1 num_thumb=9 ids="117,118,119,120,121,122"]

    It again is placed inside a div floating left with 615px width inside the post.

    I tried all kinds of adaptations with the “.photospace .thumbs_wrap2” and “.photospace .thumbs_wrap” CSS-commands, but nothing that changed the alignment. I also set the “horizontal_thumb” to 0 or kicked it out entirely, no changes. Do you have any idea what could cause the problem? Thanks in advance, Philipp!

    • Hi Phillip. Looks like you got it working?

      • Philipp says:

        Yes, I found the mistake. The “.thumb” class of the style.css of the theme I use (widely) was set to a certain with, which was overwriting the thumb-class of the Photospace-CSS. Thanks for replying anyway!

  48. does yoyr pmugin work with any ‘pinterest’ pinning ability? we have installed a few and the main poto still does not show the pin. since pinterest is so huge this is an important feature we’d like to use for our clients.. any help is appreciated

  49. Will this plugin work with retinal display images? Would there be anything I’d need to know to make this server up the higher def images? I’m afraid I’m not very code savvy : /

  50. I’ve been looking for a while for a good free ‘responsive wp native gallery plugin’, that is similar to Simpleviewer gallery. Untill I finally found your plugin, that does exactly what I was looking for! First I found the non responsive version, I’m very happy to find there’s also a responsive one! Many people look for ‘wp native gallery plugin’, maybe you can include it as a keyword, so it’s easyer to find ;).

  51. Is there a way to turn the gallery off on a particular page. I need the core WP gallery on one page and cannot turn off Photospace.

    • Hi Anita. Not simply. You would need to edit the plugin and make Photospace use only the [photospace_res] short code. See line 375. You would also then need to manually add the short code.

Leave a Reply

Our other lab productions


WooCommerce Gallery


A brand new JavaScript popup gallery


A responsive WordPress gallery plugin


A free responsive WordPress theme


A WordPress banner / slideshow plugin


Pure CSS to Style Contact Form 7


WordPress gallery plugin


'CMS' your WordPress sites


WordPress gallery plugin


A free WordPress gallery theme