Add an alignment option for images

Question

I agree with david-binda – great question! I’ve run in to this problem on a number of occasions and come up with a solution that works pretty well. While I do like the idea of adding a shortcode to insert the image with classes as suggested by pavlos-bizimis I don’t think it really solves the issue as elegantly as adding options to the image edit popup (for example you would probably have to wrap the image in your shortcode unless you prefer having to enter an image ID manually). Also, for some of my clients even a shortcode is too complicated (in which case you could bind it to a TinyMCE button off course).

Anyway, ~~without~~ with further ado – here’s my five cents. I use this solution in a slideshow plugin which gives me the options to include/exclude the image from slideshow and set a background color for an overlay showing contents of some image meta fields. Basically it hooks into attachment_fields_to_edit and attachment_fields_to_save in order to add the input fields and save the form data respectively. This data will be available as standard post meta for the attachment post (i.e. the image you are editing). This is great since it’s easy to retrieve using get_post_meta() as usual. And you should also add a filter to wp_get_attachment_image_attributes or image_send_to_editor which will allow you to add the appropriate class automatically each time the image is being output.

I’ve modified the code slightly for readability, so some parts might be incomplete/erroneous.

/**
 * Adds a form field for excluding images from slideshow
 *
 * @param array $form_fields Array of form fields
 * @param object $post The post to show
 * @return array Array of form fields
 * @author Simon Fransson
 **/
function hs_attachment_fields_to_edit($form_fields, $post = null)
{

    $val = (boolean)get_post_meta($post->ID, SLIDESHOW_EXCLUDE_IMAGE_KEY, true);
    $id = SLIDESHOW_EXCLUDE_IMAGE_KEY . "-" . $post->ID;
    $markup = sprintf('<label for="%s"><input type="checkbox" class="checkbox" id="%s" name="attachments[%s][%s]" value="true" %s /> %s</label>', $id, $id, $post->ID, SLIDESHOW_EXCLUDE_IMAGE_KEY, checked($val, true, false), __('Exclude from slideshow', 'slideshow'));

    $form_field = array(
        'label' => __('Slideshow', 'slideshow'),
        'input' => 'html',
        'html' => $markup,
        'value' => $val,
        'helps' => __('Excludes the image from slideshows.', 'slideshow'),
    );

    $form_fields[SLIDESHOW_EXCLUDE_IMAGE_KEY] = $form_field; // See update notice below code block!

    return $form_fields;
}
add_filter('attachment_fields_to_edit', 'hs_attachment_fields_to_edit', 10, 2);



/**
 * Save the images exclude status meta value when saving attachment data
 *
 * @param object $post Post object
 * @param  array $attachment Field values
 * @return object Post object
 * @author Simon Fransson
 **/
function hs_attachment_fields_to_save($post, $attachment = null)
{
    update_post_meta($post['ID'], SLIDESHOW_EXCLUDE_IMAGE_KEY, intval(isset($attachment[SLIDESHOW_EXCLUDE_IMAGE_KEY])));

    return $post;
}
add_filter('attachment_fields_to_save', 'hs_attachment_fields_to_save', 10, 2);


/**
 * Generate metadata for newly uploaded attachment.
 * This is here simply because we are dealing with a boolean,
 * which means that for SQL related reasons a value NEEDS to
 * exist even when noting has been specified in the options 
 *
 * @param  array $metadata Array of meta data
 * @param int $attachment_id ID of attachment post
 * @return array Array of meta data
 * @author Simon Fransson
 **/
function hs_generate_attachment_metadata($metadata, $attachment_id = null)
{
    $exclude = intval(get_post_meta($attachment_id, SLIDESHOW_EXCLUDE_IMAGE_KEY, true));
    update_post_meta($attachment_id, SLIDESHOW_EXCLUDE_IMAGE_KEY, $exclude);

    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'hs_generate_attachment_metadata', 10, 2);

UPDATE: I just copied this code to use it as boilerplate in a project I’m working on. As you can probably tell from looking at the code I like to store my post meta keys in defined constants. When I do this I always prepend the value with _ to prevent it from showing in the meta fields editor, but this practice might cause some problems with attachment_fields_to_save. Keys in the $form_fields array cannot start with _, so be careful to use different keys for the array and meta values or trim any underscores when dealing with attachment fields. Since SLIDESHOW_EXCLUDE_IMAGE_KEY is not even defined in my example this is probably not a big deal when copying the code, but I thought I’d mention it anyway. It took me a while to figure this out (and for the second time, at that).

Leave a Comment Cancel reply