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 the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

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

  2. Achintha 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’);

  3. Tamlyn says

    Thanks for this. I was just about to start making something like this myself. You saved me some valuable time.

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

  5. Michel says

    oh I’ll check it now thanks!

    what you want to add is basically a bit of ajax code for real time feedback, right?
    I’ll see if I can help

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

  6. 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: https://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.

  7. Jesse Overright 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

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

    • Bill Erickson says

      I’m sorry, I’m not sure what issue you’re having. You shouldn’t need any code in your functions file to use this plugin. The code snippet you provided didn’t give me enough information to know what you’re doing.

  9. 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…?