11

A rare event - I want to do something in WordPress but have no idea how to go about it and searching turns up literally nothing.

When you're inserting an image into a post, you get alignment options: 'none', 'left', 'right', 'center'. These result in the image being inserted with a CSS class related to alignment, like 'alignleft', 'alignright' or 'aligncenter'.

Great.

What if my theme was a little more complex and I wanted to add a couple options here that, just like the core options, would just add a new CSS class to the inserted images? For example - a 'right margin' option that I could style with some fancy CSS to get some more complex layouts?

Any pointers on where I might start?

2

4 Answers 4

2

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

1
  • This seems like the best solution proposed. I'll give it a try and let you know how it goes. Thanks so much for sharing your code with me.
    – NatalieMac
    Commented Feb 2, 2013 at 19:20
1

Good question. And this question has got it's solution. Maybe the code below is far too long, but can not be any shorter. The point is, that you can remove the wp_footer and wp_admin_footer hook for wp_print_media_templates function and replace it with your own wp_print_media_templates function with custom options. Simply placing code below into your functions.php will override the orginial function and allows you to modify classes after line with HTML comment <!-- SETUP YOUR CLASSES HERE --> Classes are inserted into gallery shortcode in this way:

value set as MyClass1 produces alignMyClass1.

remove_action( 'wp_footer', 'wp_print_media_templates' );
remove_action( 'admin_footer', 'wp_print_media_templates' );
add_action( 'admin_footer', 'my_wp_print_media_templates' );
add_action( 'wp_footer', 'my_wp_print_media_templates' );

function my_wp_print_media_templates() {
global $is_IE;
$class = 'media-modal wp-core-ui';
if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
    $class .= ' ie7';
?>
<script type="text/html" id="tmpl-media-frame">
    <div class="media-frame-menu"></div>
    <div class="media-frame-title"></div>
    <div class="media-frame-router"></div>
    <div class="media-frame-content"></div>
    <div class="media-frame-toolbar"></div>
    <div class="media-frame-uploader"></div>
</script>

<script type="text/html" id="tmpl-media-modal">
    <div class="<?php echo $class; ?>">
        <a class="media-modal-close" href="#" title="<?php esc_attr_e('Close'); ?>"><span class="media-modal-icon"></span></a>
        <div class="media-modal-content"></div>
    </div>
    <div class="media-modal-backdrop"></div>
</script>

<script type="text/html" id="tmpl-uploader-window">
    <div class="uploader-window-content">
        <h3><?php _e( 'Drop files to upload' ); ?></h3>
    </div>
</script>

<script type="text/html" id="tmpl-uploader-inline">
    <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
    <div class="uploader-inline-content {{ messageClass }}">
    <# if ( data.message ) { #>
        <h3 class="upload-message">{{ data.message }}</h3>
    <# } #>
    <?php if ( ! _device_can_upload() ) : ?>
        <h3 class="upload-instructions"><?php _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></h3>
    <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
        <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
        <?php do_action( 'upload_ui_over_quota' ); ?>

    <?php else : ?>
        <div class="upload-ui">
            <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
            <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
        </div>

        <div class="upload-inline-status"></div>

        <div class="post-upload-ui">
            <?php
            do_action( 'pre-upload-ui' );
            do_action( 'pre-plupload-upload-ui' );

            if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
                do_action( 'post-plupload-upload-ui' );
                add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
            } else {
                do_action( 'post-plupload-upload-ui' );
            }

            $upload_size_unit = $max_upload_size = wp_max_upload_size();
            $byte_sizes = array( 'KB', 'MB', 'GB' );

            for ( $u = -1; $upload_size_unit > 1024 && $u < count( $byte_sizes ) - 1; $u++ ) {
                $upload_size_unit /= 1024;
            }

            if ( $u < 0 ) {
                $upload_size_unit = 0;
                $u = 0;
            } else {
                $upload_size_unit = (int) $upload_size_unit;
            }

            ?>

            <p class="max-upload-size"><?php
                printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
            ?></p>

            <?php if ( ( $GLOBALS['is_IE'] || $GLOBALS['is_opera']) && $max_upload_size > 100 * 1024 * 1024 ) :
                $browser_uploader = admin_url( 'media-new.php?browser-uploader&post_id=' ) . '{{ data.postId }}';
                ?>
                <p class="big-file-warning"><?php printf( __( 'Your browser has some limitations uploading large files with the multi-file uploader. Please use the <a href="%1$s" target="%2$s">browser uploader</a> for files over 100MB.' ),
                    $browser_uploader, '_blank' ); ?></p>
            <?php endif; ?>

            <?php do_action( 'post-upload-ui' ); ?>
        </div>
    <?php endif; ?>
    </div>
</script>

<script type="text/html" id="tmpl-uploader-status">
    <h3><?php _e( 'Uploading' ); ?></h3>
    <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>

    <div class="media-progress-bar"><div></div></div>
    <div class="upload-details">
        <span class="upload-count">
            <span class="upload-index"></span> / <span class="upload-total"></span>
        </span>
        <span class="upload-detail-separator">&ndash;</span>
        <span class="upload-filename"></span>
    </div>
    <div class="upload-errors"></div>
</script>

<script type="text/html" id="tmpl-uploader-status-error">
    <span class="upload-error-label"><?php _e('Error'); ?></span>
    <span class="upload-error-filename">{{{ data.filename }}}</span>
    <span class="upload-error-message">{{ data.message }}</span>
</script>

<script type="text/html" id="tmpl-attachment">
    <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
        <# if ( data.uploading ) { #>
            <div class="media-progress-bar"><div></div></div>
        <# } else if ( 'image' === data.type ) { #>
            <div class="thumbnail">
                <div class="centered">
                    <img src="{{ data.size.url }}" draggable="false" />
                </div>
            </div>
        <# } else { #>
            <img src="{{ data.icon }}" class="icon" draggable="false" />
            <div class="filename">
                <div>{{ data.filename }}</div>
            </div>
        <# } #>

        <# if ( data.buttons.close ) { #>
            <a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
        <# } #>

        <# if ( data.buttons.check ) { #>
            <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
        <# } #>
    </div>
    <#
    var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
    if ( data.describe ) { #>
        <# if ( 'image' === data.type ) { #>
            <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
                placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
        <# } else { #>
            <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
                <# if ( 'video' === data.type ) { #>
                    placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
                <# } else if ( 'audio' === data.type ) { #>
                    placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
                <# } else { #>
                    placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
                <# } #> {{ maybeReadOnly }} />
        <# } #>
    <# } #>
</script>

<script type="text/html" id="tmpl-attachment-details">
    <h3>
        <?php _e('Attachment Details'); ?>

        <span class="settings-save-status">
            <span class="spinner"></span>
            <span class="saved"><?php esc_html_e('Saved.'); ?></span>
        </span>
    </h3>
    <div class="attachment-info">
        <div class="thumbnail">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( 'image' === data.type ) { #>
                <img src="{{ data.size.url }}" draggable="false" />
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
            <# } #>
        </div>
        <div class="details">
            <div class="filename">{{ data.filename }}</div>
            <div class="uploaded">{{ data.dateFormatted }}</div>

            <# if ( 'image' === data.type && ! data.uploading ) { #>
                <# if ( data.width && data.height ) { #>
                    <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
                <# } #>

                <# if ( data.can.save ) { #>
                    <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
                    <a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
                <# } #>
            <# } #>

            <# if ( ! data.uploading && data.can.remove ) { #>
                <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
            <# } #>

            <div class="compat-meta">
                <# if ( data.compat && data.compat.meta ) { #>
                    {{{ data.compat.meta }}}
                <# } #>
            </div>
        </div>
    </div>

    <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
        <label class="setting" data-setting="title">
            <span><?php _e('Title'); ?></span>
            <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
        </label>
        <label class="setting" data-setting="caption">
            <span><?php _e('Caption'); ?></span>
            <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
        </label>
    <# if ( 'image' === data.type ) { #>
        <label class="setting" data-setting="alt">
            <span><?php _e('Alt Text'); ?></span>
            <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
        </label>
    <# } #>
        <label class="setting" data-setting="description">
            <span><?php _e('Description'); ?></span>
            <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
        </label>
</script>

<script type="text/html" id="tmpl-media-selection">
    <div class="selection-info">
        <span class="count"></span>
        <# if ( data.editable ) { #>
            <a class="edit-selection" href="#"><?php _e('Edit'); ?></a>
        <# } #>
        <# if ( data.clearable ) { #>
            <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
        <# } #>
    </div>
    <div class="selection-view"></div>
</script>

<script type="text/html" id="tmpl-attachment-display-settings">
    <h3><?php _e('Attachment Display Settings'); ?></h3>

    <# if ( 'image' === data.type ) { #>
        <label class="setting">
            <span><?php _e('Alignment'); ?></span>
            <select class="alignment"
                data-setting="align"
                <# if ( data.userSettings ) { #>
                    data-user-setting="align"
                <# } #>>

                <option value="left">
                    <?php esc_attr_e('Left'); ?>
                </option>
                <option value="center">
                    <?php esc_attr_e('Center'); ?>
                </option>
                <option value="right">
                    <?php esc_attr_e('Right'); ?>
                </option>
                <option value="none" selected>
                    <?php esc_attr_e('None'); ?>
                </option>
                <!-- SETUP YOUR CLASSES HERE -->
                <option value="MyClass1"> <!-- set value produces class alignMyClass1 -->
                    <?php esc_attr_e('My class 1'); ?> <!-- label for your Class -->
                </option>
            </select>
        </label>
    <# } #>

    <div class="setting">
        <label>
            <span><?php _e('Link To'); ?></span>
            <select class="link-to"
                data-setting="link"
                <# if ( data.userSettings ) { #>
                    data-user-setting="urlbutton"
                <# } #>>

                <option value="custom">
                    <?php esc_attr_e('Custom URL'); ?>
                </option>
                <option value="file" selected>
                    <?php esc_attr_e('Media File'); ?>
                </option>
                <option value="post">
                    <?php esc_attr_e('Attachment Page'); ?>
                </option>
                <option value="none">
                    <?php esc_attr_e('None'); ?>
                </option>                   
            </select>
        </label>
        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    </div>

    <# if ( 'undefined' !== typeof data.sizes ) { #>
        <label class="setting">
            <span><?php _e('Size'); ?></span>
            <select class="size" name="size"
                data-setting="size"
                <# if ( data.userSettings ) { #>
                    data-user-setting="imgsize"
                <# } #>>
                <?php

                $sizes = apply_filters( 'image_size_names_choose', array(
                    'thumbnail' => __('Thumbnail'),
                    'medium'    => __('Medium'),
                    'large'     => __('Large'),
                    'full'      => __('Full Size'),
                ) );

                foreach ( $sizes as $value => $name ) : ?>
                    <#
                    var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                    if ( size ) { #>
                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
                            <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                        </option>
                    <# } #>
                <?php endforeach; ?>
            </select>
        </label>
    <# } #>
</script>

<script type="text/html" id="tmpl-gallery-settings">
    <h3><?php _e('Gallery Settings'); ?></h3>

    <label class="setting">
        <span><?php _e('Link To'); ?></span>
        <select class="link-to"
            data-setting="link"
            <# if ( data.userSettings ) { #>
                data-user-setting="urlbutton"
            <# } #>>

            <option value="file" selected>
                <?php esc_attr_e('Media File'); ?>
            </option>
            <option value="post">
                <?php esc_attr_e('Attachment Page'); ?>
            </option>
        </select>
    </label>

    <label class="setting">
        <span><?php _e('Columns'); ?></span>
        <select class="columns" name="columns"
            data-setting="columns">
            <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
                <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
                    <?php echo esc_html( $i ); ?>
                </option>
            <?php endfor; ?>
        </select>
    </label>

    <label class="setting">
        <span><?php _e( 'Random Order' ); ?></span>
        <input type="checkbox" data-setting="_orderbyRandom" />
    </label>
</script>

<script type="text/html" id="tmpl-embed-link-settings">
    <label class="setting">
        <span><?php _e('Title'); ?></span>
        <input type="text" class="alignment" data-setting="title" />
    </label>
</script>

<script type="text/html" id="tmpl-embed-image-settings">
    <div class="thumbnail">
        <img src="{{ data.model.url }}" draggable="false" />
    </div>

    <?php if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
        <label class="setting caption">
            <span><?php _e('Caption'); ?></span>
            <textarea data-setting="caption" />
        </label>
    <?php endif; ?>

    <label class="setting alt-text">
        <span><?php _e('Alt Text'); ?></span>
        <input type="text" data-setting="alt" />
    </label>

    <div class="setting align">
        <span><?php _e('Align'); ?></span>
        <div class="button-group button-large" data-setting="align">
            <button class="button" value="left">
                <?php esc_attr_e('Left'); ?>
            </button>
            <button class="button" value="center">
                <?php esc_attr_e('Center'); ?>
            </button>
            <button class="button" value="right">
                <?php esc_attr_e('Right'); ?>
            </button>
            <button class="button active" value="none">
                <?php esc_attr_e('None'); ?>
            </button>
        </div>
    </div>

    <div class="setting link-to">
        <span><?php _e('Link To'); ?></span>
        <div class="button-group button-large" data-setting="link">
            <button class="button" value="file">
                <?php esc_attr_e('Image URL'); ?>
            </button>
            <button class="button" value="custom">
                <?php esc_attr_e('Custom URL'); ?>
            </button>
            <button class="button active" value="none">
                <?php esc_attr_e('None'); ?>
            </button>
        </div>
        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    </div>
</script>

<script type="text/html" id="tmpl-attachments-css">
    <style type="text/css" id="{{ data.id }}-css">
        #{{ data.id }} {
            padding: 0 {{ data.gutter }}px;
        }

        #{{ data.id }} .attachment {
            margin: {{ data.gutter }}px;
            width: {{ data.edge }}px;
        }

        #{{ data.id }} .attachment-preview,
        #{{ data.id }} .attachment-preview .thumbnail {
            width: {{ data.edge }}px;
            height: {{ data.edge }}px;
        }

        #{{ data.id }} .portrait .thumbnail img {
            max-width: {{ data.edge }}px;
            height: auto;
        }

        #{{ data.id }} .landscape .thumbnail img {
            width: auto;
            max-height: {{ data.edge }}px;
        }
    </style>
</script>
<?php

do_action( 'print_media_templates' );
}

If you would like to set classes without "align" prefix, you'd have to modify javascript inserting shortcode into post's content textarea and it may be too complicated comparing to renaming your classes in CSS. Enyoj!

4
  • 3
    I'm worried that completely replacing a core function with my own version isn't going to be very maintainable going forward. What if there's some kind of major overhaul or rewrite of the core function?
    – NatalieMac
    Commented Feb 2, 2013 at 19:20
  • You're right, and I hope there will be - with filters and action hooks. But till than, I wouldn't be afraid as my clients can allways contact me and I'll provide a quick fix. Commented Feb 2, 2013 at 19:35
  • Yes, but what if another plugin is customizing this code in the same way? The way you're describing could only be done by one plugin, without conflict.
    – NoBugs
    Commented Feb 10, 2013 at 3:01
  • Any idea if this is now possible in modern versions of WordPress? Been trying to figure out how to add a "full-width" alignment option, and as @NatalieMac said, I'd prefer not to override the entire function. Commented Aug 3, 2016 at 14:04
0

Maybe you should create a shortcode for inserting the image with class attributes. I´ve seen this in a lot of commercial themes.

3
  • 2
    More detail would make this a better answer.. perhaps an example shortcode.
    – s_ha_dum
    Commented Jan 29, 2013 at 20:34
  • Themes shouldn't add post_content shortcodes. When the user switches Themes, those shortcodes will no longer get parsed, and will result in broken/unintended post content output. Commented Jan 29, 2013 at 21:06
  • Agree with Chip - I don't want to go down the shortcode route because they'll all be broken if he changes themes. At least if I just add a CSS class to the images, the worst that can happen is it will be ignored if he changes themes.
    – NatalieMac
    Commented Feb 2, 2013 at 19:18
-3

You can use the unique image I.D to style specific images individually.

2
  • 1
    I am not sure this answers the question. @NatalieMac does not seem to be looking for a way to style images individually, which is very labor intensive, but to add more classes to the markup.
    – s_ha_dum
    Commented Feb 6, 2013 at 1:04
  • True, that I could, but this isn't very flexible. I need something the client can easily update on their own.
    – NatalieMac
    Commented Feb 8, 2013 at 1:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.