Add custom Attachment Display Setting for images

I’ve been doing a lot of research and I’ve yet to work this out. Can you add in a custom option in the Attachment Display Settings (part of Insert Media dialog in post editor)?

What I’m after is the ability to add an anchor with a class around all images in posts.

Related posts

2 comments

  1. This will add a field in the attachment edit screen for applying a class to the img tag.

    function IMGattachment_fields($form_fields, $post) {
        $form_fields["imageClass"]["label"] = __("Image Class");
        $form_fields["imageClass"]["value"] = get_post_meta($post->ID, "_imageClass", true);
        return $form_fields;
    }
    add_filter("attachment_fields_to_edit", "IMGattachment_fields", null, 2);
    function my_image_attachment_fields_save($post, $attachment) {
        if ( isset($attachment['imageClass']) )
        update_post_meta($post['ID'], '_imageClass', $attachment['imageClass']);
        return $post;
    }
    add_filter("attachment_fields_to_save", "my_image_attachment_fields_save", null, 2);
    
  2. You just need to add this to your theme’s functions.php file:

    /**
    * Attach a class to linked images' parent anchors
    * e.g. a img => a.img img
    */
    function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
        $classes = 'img'; // separated by spaces, e.g. 'img image-link'
    
        // check if there are already classes assigned to the anchor
        if ( preg_match('/<a.*? class=".*?">/', $html) ) {
        $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
        } else {
         $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
        }
        return $html;
    }
    
    add_filter('image_send_to_editor','give_linked_images_class',10,8);
    

Comments are closed.