Post Banner [Plugin]

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: https://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: https://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();
});
});

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me