Post Banner [Plugin]

Date Posted: January 7, 2015, 5:46 am


post_banner_1

Usage:

Within post editor, use:

1
[post-banner]

Within WordPress loop, use:

1
<?php echo do_shortcode( '[post-banner]' ); ?>

Plugin Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<?php

/*
    Plugin Name: Post Banner
    Plugin URI: http://carlofontanos.com/post-banner-plugin/
    Description: Add a simple banner image to your posts and pages
    Author: Carl Victor Fontanos.
    Version: 1.0
    Author URI: http://carlofontanos.com/
*/


add_action('add_meta_boxes', array('CVF_Post_Banner', 'cvf_post_banner_image_meta') );
add_action('save_post', array('CVF_Post_Banner', 'cvf_post_banner_meta_save') );
add_action('admin_enqueue_scripts', array('CVF_Post_Banner', 'cvf_post_banner_image_enqueue') );

add_shortcode('post-banner', array('CVF_Post_Banner', 'cvf_post_banner_shortcode') );

class CVF_Post_Banner {

    public static function cvf_post_banner_image_meta() {
       
        $screens = array( 'post', 'page' );

        foreach ( $screens as $screen ) {

            add_meta_box(
                'cvf_post_banner_meta',
                __( 'Banner Image', 'cvf-post-banner' ),
                'CVF_Post_Banner::cvf_post_banner_meta_callback',
                $screen, 'normal', 'core', ''
            );
        }
    }
   
    public static function cvf_post_banner_meta_callback( $post ) {
       
        wp_nonce_field( basename( __FILE__ ), 'cvf_post_banner_nonce' );
       
        $banner_image_url = get_post_meta( $post->ID, '_post_banner_image', true );
       
        $meta_box = '';
       
        $meta_box .= '
        <p>
            <label for="banner-image" class="cvf_post_banner-row-title">Select Image</label>
            <input type="text" name="banner-image" id="banner-image" value="'
;
           
            if (isset($banner_image_url)){ $meta_box .= $banner_image_url; }
           
            $meta_box .= '"/>  
            <input type="button" id="banner-image-button" class="button" value="Choose or Upload an Image" />
            <div id = "image-display">'
;
           
            if($banner_image_url){
                $meta_box .= '<img src = "' . $banner_image_url . '" width = "100%" />';
            }
           
            $meta_box .= '
            </div>
        </p>'
;
       
        echo $meta_box;
       
    }

    public static function cvf_post_banner_meta_save( $post_id ) {
     
        $is_autosave = wp_is_post_autosave( $post_id );
        $is_revision = wp_is_post_revision( $post_id );
        $is_valid_nonce = ( isset( $_POST[ 'cvf_post_banner_nonce' ] ) && wp_verify_nonce( $_POST[ 'cvf_post_banner_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
     
        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
            return;
        }
       
        if( isset( $_POST[ 'banner-image' ] ) ) {
            update_post_meta( $post_id, '_post_banner_image', $_POST[ 'banner-image' ] );
        }

    }
   

    public static function cvf_post_banner_image_enqueue() {
   
        global $typenow;
       
        if( $typenow == 'post' || $typenow == 'page' ) {
       
            wp_enqueue_media();
     
            wp_register_script( 'meta-box-image', plugin_dir_url( __FILE__ ) . 'js/meta-box-image.js', array( 'jquery' ) );
            wp_localize_script( 'meta-box-image', 'meta_image',
                array(
                    'title' => __( 'Choose or Upload an Image', 'cvf-post-banner' ),
                    'button' => __( 'Use this image', 'cvf-post-banner' ),
                )
            );
            wp_enqueue_script( 'meta-box-image' );
           
        }
    }
   
    public static function cvf_post_banner_shortcode(){
       
        global $post;
       
        $banner_image = get_post_meta($post->ID, '_post_banner_image', true);
       
        if($banner_image){
            return '<img src = "' . $banner_image . '" width = "100%" />';
        }
               
    }
       
}

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/*
 * Attaches the image uploader to the input field
 */

jQuery(document).ready(function($){

    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked.
    $('#banner-image-button').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            meta_image_frame.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
            title: meta_image.title,
            button: { text:  meta_image.button },
            library: { type: 'image' }
        });

        // Runs when an image is selected.
        meta_image_frame.on('select', function(){

            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

            // Sends the attachment URL to our custom image input field.
            $('#banner-image').val(media_attachment.url);
           
            // Appends the image to our custom Div field.
            $('#image-display').html('<img src = "' + media_attachment.url + '" width = "100%" />');
        });

        // Opens the media library frame.
        meta_image_frame.open();
    });
});

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me