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:

<?php
/**
* Hide Editor
* @author Bill Erickson
* @link http://www.billerickson.net/code/hide-editor-on-specific-page-template/
*/
function be_hide_editor() {
// Get the Post ID
$post_id = false;
if( isset( $_GET['post'] ) )
$post_id = $_GET['post'];
elseif( isset( $_POST['post_ID'] ) )
$post_id = $_POST['post_ID'];
$post_id = intval( $post_id );
if( ! $post_id )
return;
$current_template = get_page_template_slug( $post_id );
$exclude_on = array( 'group-classes.php', 'trainers.php' );
if( in_array( $current_template, $exclude_on ) )
wp_enqueue_style( 'hide-editor', get_stylesheet_directory_uri() . '/css/hide-editor.css' );
}
add_action( 'admin_enqueue_scripts', 'be_hide_editor' );
view raw functions.php hosted with ❤ by GitHub
#postdivrich{display: none;}
view raw hide-editor.css hosted with ❤ by GitHub

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.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Jeff 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

  2. Łukasz 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.

  3. sam 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

  4. 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

  5. Paul Davies 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.

  6. PAUL DAVIES 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