Gallery Metabox

I’ve been building a lot of galleries using WordPress’ built-in gallery feature. The biggest issue is that the gallery feature is rather hidden. You have to click the “Upload Image” icon (which itself is hard for people new to WordPress to find), then click the “Gallery” tab.

To make it easier for my clients, I’ve written a simple plugin called Gallery Metabox. This adds a metabox below the post editor that displays all the attached images. It also has a lot of filters in place for a developer to customize it specifically to the project (see the plugin page for more information).

For instance, if you’re adding a custom field to the uploader to specify which images are in a rotator, you can make the metabox only show these images.

I just built a site for a client that has a photo gallery.

I created a page template called “Photos” which replaces the content area with a photo rotator. But if you edit the page, the edit screen was pretty useless. There’s a big empty wysiwyg, and to get to the actual images in the gallery you have to click a small icon, then go to the Gallery tab.

I’ve added the plugin, along with some code that limits the metabox to this page template. I’ve also added the following code to the theme’s functions.php file to remove the post editor on this page template:

So now this is what they see when editing that page:

This is by far a much easier user interface for this specific page template. And even if your page isn’t solely a gallery, I think this is a useful plugin for quickly seeing which images you have attached to the page or displaying in a gallery/rotator.

chat48 Comments

  1. says

    This is fantastic!! I do have a lot of Galleries for clients, and just accepted that the interface was a bit difficult to use at this point. I suppose I’ll have to look into that admin_init!!

    Thank you!

  2. Pothi Kalimuthu says

    Awesome work. I was in a similar situation too where I had to deal with tons of images with no way to insert or delete a bunch of images of a post directly and easily. This plugin would be big time saver when I get into such projects. I really appreciate your time creating this plugin. Thanks.

    • Bill Erickson says

      Yes you can, using the be_gallery_metabox_post_types filter.


      add_filter( 'be_gallery_metabox_post_types', 'be_show_on_events' );
      function be_show_on_events( $post_types ) {
      $post_types = array( 'events' );
      return $post_types;
      }

      By default $post_types = array( ‘post’, ‘page’ ). You can overwrite it like in the above example, or add to it: $post_types[] = ‘event'; That would make it apply to posts, pages, and events.

  3. Jez says

    Thanks Bill.

    So i install the plugin, add your above code to functions.php and it shows up in the appropriate custom post type?

    I’ll give it a go. :)

  4. Cor van Noorloos says

    Hello Bill,

    I was just wondering on how to best/you would explain the WordPress gallery/WordPress image upload feature to your clients?

    In example, which is WordPress default, an image can be removed from the post, but can still be listed (and shown by your plugin) in the WordPress (post-)gallery.

    • Bill Erickson says

      I would say something along these lines:

      For every post and page, WordPress automatically builds a gallery of attached images. These are any images you’ve uploaded while editing the post. They might be in the post, but they might also be stored in metadata (like the Featured Image), or might not even be in use at all. If you use the gallery shortcode, or if I build a custom gallery for you, they will all appear in it.

      If I added an “Include in Rotator” option to their media gallery, I’d then include a note that their custom gallery only shows images marked appropriately.

    • Bill Erickson says

      I’m not sure what you’re asking. This simply adds a box to the “Edit Post” screen that lists all attached images.

  5. Jon says

    Great plugin. Could be really useful. Just a few questions.

    The Gallery Images meta box only shows up after the page/post has been saved. Is there a way to get it to show up before the page/post is saved?

    Is there a way to prevent the “Gallery Block” from being displayed in the editor (after you click “Insert Gallery”?

    Would there be any way to set a sort order for the images?

    Thanks

    • Bill Erickson says

      1. While it might be possible, it is outside my skillset. You’ll need to use AJAX to check for updates. Right now it’s built like a standard metabox where, when the page loads, it checks the post information.

      2. When you say “gallery block”, do you mean the visual layout of the gallery shortcode in the editor? I’m sure you could hide this by adding an editor stylesheet. I personally don’t use the shortcode. In my themes I’ll often automatically display a gallery if there’s images marked for “include in rotator”.

      3. Yes, you can filter the query args using be_gallery_metabox_args. It’s currently set to order by menu_order and order ASC. Here’s an example: http://www.billerickson.net/code/gallery-metabox-sort-by-title/

  6. Den says

    Thanks for a great solution, but can you tell me, how to attach this meta box for specific post (for example with ID 10, all other pages will not need to use the meta box, so it doesn’t need to be visible for those pages).

  7. chrismccoy says

    maybe add it not just on edit, on new post too, that way you can add images via the post without going to the media manager at the top.

    • Bill Erickson says

      The problem is that when you click “Post > Add New”, there isn’t a post ID in the URL. I haven’t figured out a way to find out the new post’s ID, and the ID is needed to load the appropriate upload window (wrong ID sends images to wrong post).

      If you can dig through WP core and find out how the upload image button gets an ID on the new post screen and can submit a patch, I’d happily update the plugin.

  8. Jez says

    Been using your plugin Bill, brilliant it is a real help.

    I was wondering is there anyway to display a gallery with the full size images in a list and no link?

    So looks like so..

    Great work.

  9. says

    Tip: Please load the Tickbox in the plugin. Otherwise in custom post if didn’t load the description field the plugin doesn’t work.

    wp_enqueue_script(‘thickbox’,null,array(‘jquery’));
    wp_enqueue_style(‘thickbox.css’, ‘/’.WPINC.’/js/thickbox/thickbox.css’, null, ‘1.0’);

  10. says

    HI Bill, Thanks for this! I’m really looking for this function on a wordpress site I’m building.
    However, the fact that it works only on “edit post” and not on “new post” kinda let me down.
    I read in your comments above that you need to know the general ID of new posts and while digging wordpress core files (I was trying to modify the text editor) I found these lines of code in the “edit-form-advanced-page.php”
    /**
    * Post ID global
    * @name $post_ID
    * @var int
    */
    $post_ID = isset($post_ID) ? (int) $post_ID : 0;
    $temp_ID = isset($temp_ID) ? (int) $temp_ID : 0;
    $user_ID = isset($user_ID) ? (int) $user_ID : 0;
    $action = isset($action) ? $action : ”;

    (line 20-28)

    I don’t know squat of coding beyond html and css, but I saw that edit-form-advanced.php is called by post-new.php to include the page elements.
    those lines of code and the comment makes me think that it may be the formula you look for to add your “gallery box” to every new post.

    Let me know if I helped and if you can now implement it in the plugin. it would be super useful for me :)

    Bye,
    Michel

    • Bill Erickson says

      I actually think I fixed this in the most recent version. Have you tried it yet? I just activated the plugin on this site, then went to Pages > Add New and the gallery metabox was there. I then uploaded images to it and clicked Publish and it worked.

      One feature I would like to add would be updating the metabox when you click “Save all changes” in the media gallery. That way you don’t have to publish or update the post to see the changes.

    • Bill Erickson says

      Thanks for taking a look! Yeah, I basically want to re-run the image query when you make changes to the gallery, so that when the media uploader closes the gallery metabox reflects any changes you’ve already made.

      AJAX isn’t my specialty, so any help is definitely appreciated.

  11. Damian says

    Hi Bill! Thank you for this great plugin!
    Could you please provide an example for changing/translating the words the user can see (“Upload images” and “Manage gallery”) via the filter (instead of having to change it inside the plugin)?

    • Bill Erickson says

      There’s two ways to do it:
      – Filter
      – Translate string

      If you want to change the content of the intro area, use the be_gallery_metabox_intro filter. Ex: http://www.billerickson.net/code/gallery-metabox-change-intro-text/

      But since the text is internationalized, you can create a language file (or I think there’s functions to drop this in the theme) to translate those words differently. I don’t have any experience with this so can’t give a code example, but I’m sure you could find a tutorial online somewhere.

  12. says

    I love the gallery metabox plugin! It’s been a real help.

    However, I did notice a quirk I wanted to get your take on. I added gallery metabox to a custom content type and it has worked great. But custom metaboxes that are rendered after the gallery metabox do not access global $post correctly. I took a var_dump and noticed that gallery metabox seems to replace the global $post variable with the last attachment displayed.

    My work around for this was to edit the be_gallery_metabox function and add “global $post;” on line 63, before $post = $original_post; Can you think of any reason why this wouldn’t be a sustainable solution? Any other concerns for making this change?

    Thanks!
    Jesse

  13. Jez says

    Hi Bill.

    I’ve come across a problem with your Gallery Plugin and wondered if you could help?
    I’ve recently re-organised my functions.php into various sections for ease of use essentially.
    So my functions.php looks like this.. https://gist.github.com/2368269
    This results in your gallery metabox not showing up on a page in the admin.
    Move everything back to functions.php and it shows up again fine.

    Any ideas why it does this, will i not be able to organise everything like the above if i want to use the plugin?

    Thanks for you time.

  14. Jez says

    There is no code to do with your plugin in my functions, its just normal functions.php re-organised.

    However, when i do the re-organisation with the above code, it breaks your plugin. Move all the functions out of their folders and put back into functions.php and it works again.

    Just wondered if you knew of a way i could keep the organisation and still have it working…?

  15. says

    Thanks for the great plugin. I did have an issue though if there were any metaboxes after the Gallery metabox – any meta data that followed seemed to get cleared. As an alternative, I tried using get_posts instead of WP_Query to gather image info in the be_gallery_metabox_html() function and it seems to fix my issue. Wondering if there are any pitfalls to going the get_posts route.

    See my modified function here: https://gist.github.com/2493068

  16. says

    is it possible to exclude a custom meta box (namely a “custom featured image”) value? I have looked all over and found this when I was looking for it. would be great if this could somehow be implemented.

  17. says

    hi sir

    M installed meatbox plugin for gallery and uploded some images but I dont know code to retrive the gallery imges..pls say…how

  18. Dave says

    Hey Bill.

    i’m wondering if I can wrap each image shown in your plugin with a link tag so I can have each image open up Post Thumbnail Editor. Is there a hook for wrapping each tag with a tag?

    Thanks pal.

    Dave

  19. says

    I am using the gallery plugin and loving it, so good and it just works.

    I did encounter one issue. This issue being that if i add a thumbnail to the post, the thumbnail seems to get inserted inside of the gallery automatically. Personally i would say to the client “first add your thumbnail, delete it from the gallery box, then start adding your images”.

    I was wondering if there is a better way that automatically ignores the thumbnail of the post the editor added. That would be awesome.

    • Bill Erickson says

      By default the gallery shows all images attached to the current post. Removing the image “detaches” it from the post (it removes post_parent postmeta).

      In the past what I’ve done is add an additional field to the media uploader that allowed you to mark it as in the gallery, then some code to only show those in the metabox. But with the latest rebuild of the media uploader, that doesn’t work anymore. Now for these instances I use Advanced Custom Fields’ Gallery field option to allow them to upload images specifically to a gallery metabox.

      This plugin is really designed to show what images were uploaded to this post.

  20. says

    Hi Bill. Still loving the gallery.

    Im also wondering how you add a second or third gallery, im thinking that its not possible and i did do some research concerning multiple galleries per post. The thing is, i just love the appearance of the gallery plugin you did, its so simple, you see the images.

    • Bill Erickson says

      I typically use this plugin ( https://github.com/billerickson/Gallery-Rotator ) . It uses the new WordPress gallery system and adds a “display as rotator” checkbox. So you click “Add Media”, then “Add Gallery”, add images to the gallery, and then before inserting check “display as rotator”. This adds the gallery shortcode to the post and displays it as a rotator.

Leave a Reply

If you'd like to include code in your post, please post it to http://gist.github.com and include a link.