|
1
|
|
|
<?php |
|
2
|
|
|
/** |
|
3
|
|
|
* Module Name: Image Widget |
|
4
|
|
|
* Module Description: Easily add images to your theme's sidebar. |
|
5
|
|
|
* Sort Order: 20 |
|
6
|
|
|
* First Introduced: 1.2 |
|
7
|
|
|
*/ |
|
8
|
|
|
|
|
9
|
|
|
/** |
|
10
|
|
|
* Register the widget for use in Appearance -> Widgets |
|
11
|
|
|
*/ |
|
12
|
|
|
add_action( 'widgets_init', 'jetpack_image_widget_init' ); |
|
13
|
|
|
function jetpack_image_widget_init() { |
|
14
|
|
|
register_widget( 'Jetpack_Image_Widget' ); |
|
15
|
|
|
} |
|
16
|
|
|
|
|
17
|
|
|
class Jetpack_Image_Widget extends WP_Widget { |
|
18
|
|
|
/** |
|
19
|
|
|
* Register widget with WordPress. |
|
20
|
|
|
*/ |
|
21
|
|
View Code Duplication |
public function __construct() { |
|
22
|
|
|
parent::__construct( |
|
23
|
|
|
'image', |
|
24
|
|
|
/** This filter is documented in modules/widgets/facebook-likebox.php */ |
|
25
|
|
|
apply_filters( 'jetpack_widget_name', esc_html__( 'Image', 'jetpack' ) ), |
|
26
|
|
|
array( |
|
27
|
|
|
'classname' => 'widget_image', |
|
28
|
|
|
'description' => __( 'Display an image in your sidebar', 'jetpack' ), |
|
29
|
|
|
'customize_selective_refresh' => true, |
|
30
|
|
|
) |
|
31
|
|
|
); |
|
32
|
|
|
|
|
33
|
|
|
if ( is_active_widget( false, false, $this->id_base ) || is_active_widget( false, false, 'monster' ) || is_customize_preview() ) { |
|
34
|
|
|
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_style' ) ); |
|
35
|
|
|
} |
|
36
|
|
|
} |
|
37
|
|
|
|
|
38
|
|
|
/** |
|
39
|
|
|
* Loads file for front-end widget style. |
|
40
|
|
|
* |
|
41
|
|
|
* @uses wp_enqueue_style(), plugins_url() |
|
42
|
|
|
*/ |
|
43
|
|
|
public function enqueue_style() { |
|
44
|
|
|
wp_enqueue_style( 'jetpack_image_widget', plugins_url( 'image-widget/style.css', __FILE__ ), array(), '20140808' ); |
|
45
|
|
|
} |
|
46
|
|
|
|
|
47
|
|
|
/** |
|
48
|
|
|
* Front-end display of widget. |
|
49
|
|
|
* |
|
50
|
|
|
* @see WP_Widget::widget() |
|
51
|
|
|
* |
|
52
|
|
|
* @param array $args Widget arguments. |
|
53
|
|
|
* @param array $instance Saved values from database. |
|
54
|
|
|
*/ |
|
55
|
|
|
public function widget( $args, $instance ) { |
|
56
|
|
|
|
|
57
|
|
|
echo $args['before_widget']; |
|
58
|
|
|
|
|
59
|
|
|
$instance = wp_parse_args( $instance, array( |
|
60
|
|
|
'title' => '', |
|
61
|
|
|
'img_url' => '' |
|
62
|
|
|
) ); |
|
63
|
|
|
|
|
64
|
|
|
/** This filter is documented in core/src/wp-includes/default-widgets.php */ |
|
65
|
|
|
$title = apply_filters( 'widget_title', $instance['title'] ); |
|
66
|
|
|
|
|
67
|
|
|
if ( $title ) { |
|
68
|
|
|
echo $args['before_title'] . esc_html( $title ) . $args['after_title']; |
|
69
|
|
|
} |
|
70
|
|
|
|
|
71
|
|
|
if ( '' != $instance['img_url'] ) { |
|
72
|
|
|
|
|
73
|
|
|
$output = '<img src="' . esc_attr( $instance['img_url'] ) .'" '; |
|
74
|
|
|
|
|
75
|
|
|
if ( '' != $instance['alt_text'] ) { |
|
76
|
|
|
$output .= 'alt="' . esc_attr( $instance['alt_text'] ) .'" '; |
|
77
|
|
|
} |
|
78
|
|
|
if ( '' != $instance['img_title'] ) { |
|
79
|
|
|
$output .= 'title="' . esc_attr( $instance['img_title'] ) .'" '; |
|
80
|
|
|
} |
|
81
|
|
|
if ( '' == $instance['caption'] ) { |
|
82
|
|
|
$output .= 'class="align' . esc_attr( $instance['align'] ) . '" '; |
|
83
|
|
|
} |
|
84
|
|
|
if ( '' != $instance['img_width'] ) { |
|
85
|
|
|
$output .= 'width="' . esc_attr( $instance['img_width'] ) .'" '; |
|
86
|
|
|
} |
|
87
|
|
|
if ( '' != $instance['img_height'] ) { |
|
88
|
|
|
$output .= 'height="' . esc_attr( $instance['img_height'] ) .'" '; |
|
89
|
|
|
} |
|
90
|
|
|
$output .= '/>'; |
|
91
|
|
View Code Duplication |
if ( '' != $instance['link'] && ! empty( $instance['link_target_blank'] ) ) { |
|
92
|
|
|
$output = '<a target="_blank" href="' . esc_attr( $instance['link'] ) . '">' . $output . '</a>'; |
|
93
|
|
|
} |
|
94
|
|
View Code Duplication |
if ( '' != $instance['link'] && empty( $instance['link_target_blank'] ) ) { |
|
95
|
|
|
$output = '<a href="' . esc_attr( $instance['link'] ) . '">' . $output . '</a>'; |
|
96
|
|
|
} |
|
97
|
|
|
if ( '' != $instance['caption'] ) { |
|
98
|
|
|
/** This filter is documented in core/src/wp-includes/default-widgets.php */ |
|
99
|
|
|
$caption = apply_filters( 'widget_text', $instance['caption'] ); |
|
100
|
|
|
$img_width = ( ! empty( $instance['img_width'] ) ? 'style="width: ' . esc_attr( $instance['img_width'] ) .'px"' : '' ); |
|
101
|
|
|
$output = '<figure ' . $img_width .' class="wp-caption align' . esc_attr( $instance['align'] ) . '"> |
|
102
|
|
|
' . $output . ' |
|
103
|
|
|
<figcaption class="wp-caption-text">' . $caption . '</figcaption> |
|
104
|
|
|
</figure>'; // wp_kses_post caption on update |
|
105
|
|
|
} |
|
106
|
|
|
echo '<div class="jetpack-image-container">' . do_shortcode( $output ) . '</div>'; |
|
107
|
|
|
} |
|
108
|
|
|
|
|
109
|
|
|
echo "\n" . $args['after_widget']; |
|
110
|
|
|
} |
|
111
|
|
|
|
|
112
|
|
|
/** |
|
113
|
|
|
* Sanitize widget form values as they are saved. |
|
114
|
|
|
* |
|
115
|
|
|
* @see WP_Widget::update() |
|
116
|
|
|
* |
|
117
|
|
|
* @param array $new_instance Values just sent to be saved. |
|
118
|
|
|
* @param array $old_instance Previously saved values from database. |
|
119
|
|
|
* |
|
120
|
|
|
* @return array Updated safe values to be saved. |
|
121
|
|
|
*/ |
|
122
|
|
|
public function update( $new_instance, $old_instance ) { |
|
123
|
|
|
$allowed_caption_html = array( |
|
124
|
|
|
'a' => array( |
|
125
|
|
|
'href' => array(), |
|
126
|
|
|
'title' => array(), |
|
127
|
|
|
), |
|
128
|
|
|
'b' => array(), |
|
129
|
|
|
'em' => array(), |
|
130
|
|
|
'i' => array(), |
|
131
|
|
|
'p' => array(), |
|
132
|
|
|
'strong' => array() |
|
133
|
|
|
); |
|
134
|
|
|
|
|
135
|
|
|
$instance = $old_instance; |
|
136
|
|
|
|
|
137
|
|
|
$instance['title'] = strip_tags( $new_instance['title'] ); |
|
138
|
|
|
$instance['img_url'] = esc_url( $new_instance['img_url'], null, 'display' ); |
|
139
|
|
|
$instance['alt_text'] = strip_tags( $new_instance['alt_text'] ); |
|
140
|
|
|
$instance['img_title'] = strip_tags( $new_instance['img_title'] ); |
|
141
|
|
|
$instance['caption'] = wp_kses( stripslashes($new_instance['caption'] ), $allowed_caption_html ); |
|
142
|
|
|
$instance['align'] = $new_instance['align']; |
|
143
|
|
|
$instance['link'] = esc_url( $new_instance['link'], null, 'display' ); |
|
144
|
|
|
$instance['link_target_blank'] = isset( $new_instance['link_target_blank'] ) ? (bool) $new_instance['link_target_blank'] : false; |
|
145
|
|
|
|
|
146
|
|
|
$new_img_width = absint( $new_instance['img_width'] ); |
|
147
|
|
|
$new_img_height = absint( $new_instance['img_height'] ); |
|
148
|
|
|
|
|
149
|
|
|
if ( ! empty( $instance['img_url'] ) && '' == $new_img_width && '' == $new_img_height ) { |
|
150
|
|
|
// Download the url to a local temp file and then process it with getimagesize so we can optimize browser layout |
|
151
|
|
|
$tmp_file = download_url( $instance['img_url'], 10 ); |
|
152
|
|
|
if ( ! is_wp_error( $tmp_file ) ) { |
|
153
|
|
|
$size = getimagesize( $tmp_file ); |
|
154
|
|
|
|
|
155
|
|
|
$width = $size[0]; |
|
156
|
|
|
$instance['img_width'] = absint( $width ); |
|
157
|
|
|
|
|
158
|
|
|
$height = $size[1]; |
|
159
|
|
|
$instance['img_height'] = absint( $height ); |
|
160
|
|
|
|
|
161
|
|
|
unlink( $tmp_file ); |
|
162
|
|
|
} else { |
|
163
|
|
|
$instance['img_width'] = $new_img_width; |
|
164
|
|
|
$instance['img_height'] = $new_img_height; |
|
165
|
|
|
} |
|
166
|
|
|
} else { |
|
167
|
|
|
$instance['img_width'] = $new_img_width; |
|
168
|
|
|
$instance['img_height'] = $new_img_height; |
|
169
|
|
|
} |
|
170
|
|
|
|
|
171
|
|
|
return $instance; |
|
172
|
|
|
} |
|
173
|
|
|
|
|
174
|
|
|
/** |
|
175
|
|
|
* Back-end widget form. |
|
176
|
|
|
* |
|
177
|
|
|
* @see WP_Widget::form() |
|
178
|
|
|
* |
|
179
|
|
|
* @param array $instance Previously saved values from database. |
|
180
|
|
|
*/ |
|
181
|
|
|
public function form( $instance ) { |
|
182
|
|
|
// Defaults |
|
183
|
|
|
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'img_url' => '', 'alt_text' => '', 'img_title' => '', 'caption' => '', 'align' => 'none', 'img_width' => '', 'img_height' => '', 'link' => '', 'link_target_blank' => false ) ); |
|
184
|
|
|
|
|
185
|
|
|
$title = esc_attr( $instance['title'] ); |
|
186
|
|
|
$img_url = esc_url( $instance['img_url'], null, 'display' ); |
|
187
|
|
|
$alt_text = esc_attr( $instance['alt_text'] ); |
|
188
|
|
|
$img_title = esc_attr( $instance['img_title'] ); |
|
189
|
|
|
$caption = esc_textarea( $instance['caption'] ); |
|
190
|
|
|
$align = esc_attr( $instance['align'] ); |
|
191
|
|
|
$img_width = esc_attr( $instance['img_width'] ); |
|
192
|
|
|
$img_height = esc_attr( $instance['img_height'] ); |
|
193
|
|
|
$link_target_blank = checked( $instance['link_target_blank'], true, false ); |
|
194
|
|
|
|
|
195
|
|
|
$link = esc_url( $instance['link'], null, 'display' ); |
|
196
|
|
|
|
|
197
|
|
|
echo '<p><label for="' . $this->get_field_id( 'title' ) . '">' . esc_html__( 'Widget title:', 'jetpack' ) . ' |
|
198
|
|
|
<input class="widefat" id="' . $this->get_field_id( 'title' ) . '" name="' . $this->get_field_name( 'title' ) . '" type="text" value="' . $title . '" /> |
|
199
|
|
|
</label></p> |
|
200
|
|
|
<p><label for="' . $this->get_field_id( 'img_url' ) . '">' . esc_html__( 'Image URL:', 'jetpack' ) . ' |
|
201
|
|
|
<input class="widefat" id="' . $this->get_field_id( 'img_url' ) . '" name="' . $this->get_field_name( 'img_url' ) . '" type="text" value="' . $img_url . '" /> |
|
202
|
|
|
</label></p> |
|
203
|
|
|
<p><label for="' . $this->get_field_id( 'alt_text' ) . '">' . esc_html__( 'Alternate text:', 'jetpack' ) . ' <a href="http://support.wordpress.com/widgets/image-widget/#image-widget-alt-text" target="_blank">( ? )</a> |
|
204
|
|
|
<input class="widefat" id="' . $this->get_field_id( 'alt_text' ) . '" name="' . $this->get_field_name( 'alt_text' ) . '" type="text" value="' . $alt_text . '" /> |
|
205
|
|
|
</label></p> |
|
206
|
|
|
<p><label for="' . $this->get_field_id( 'img_title' ) . '">' . esc_html__( 'Image title:', 'jetpack' ) . ' <a href="http://support.wordpress.com/widgets/image-widget/#image-widget-title" target="_blank">( ? )</a> |
|
207
|
|
|
<input class="widefat" id="' . $this->get_field_id( 'img_title' ) . '" name="' . $this->get_field_name( 'img_title' ) . '" type="text" value="' . $img_title . '" /> |
|
208
|
|
|
</label></p> |
|
209
|
|
|
<p><label for="' . $this->get_field_id( 'caption' ) . '">' . esc_html__( 'Caption:', 'jetpack' ) . ' <a href="http://support.wordpress.com/widgets/image-widget/#image-widget-caption" target="_blank">( ? )</a> |
|
210
|
|
|
<textarea class="widefat" id="' . $this->get_field_id( 'caption' ) . '" name="' . $this->get_field_name( 'caption' ) . '" rows="2" cols="20">' . $caption . '</textarea> |
|
211
|
|
|
</label></p>'; |
|
212
|
|
|
|
|
213
|
|
|
$alignments = array( |
|
214
|
|
|
'none' => __( 'None', 'jetpack' ), |
|
215
|
|
|
'left' => __( 'Left', 'jetpack' ), |
|
216
|
|
|
'center' => __( 'Center', 'jetpack' ), |
|
217
|
|
|
'right' => __( 'Right', 'jetpack' ), |
|
218
|
|
|
); |
|
219
|
|
|
echo '<p><label for="' . $this->get_field_id( 'align' ) . '">' . esc_html__( 'Image Alignment:', 'jetpack' ) . ' |
|
220
|
|
|
<select id="' . $this->get_field_id( 'align' ) . '" name="' . $this->get_field_name( 'align' ) . '">'; |
|
221
|
|
|
foreach ( $alignments as $alignment => $alignment_name ) { |
|
222
|
|
|
echo '<option value="' . esc_attr( $alignment ) . '" '; |
|
223
|
|
|
if ( $alignment == $align ) |
|
224
|
|
|
echo 'selected="selected" '; |
|
225
|
|
|
echo '>' . esc_html($alignment_name) . "</option>\n"; |
|
226
|
|
|
} |
|
227
|
|
|
echo '</select></label></p>'; |
|
228
|
|
|
|
|
229
|
|
|
echo '<p><label for="' . $this->get_field_id( 'img_width' ) . '">' . esc_html__( 'Width:', 'jetpack' ) . ' |
|
230
|
|
|
<input size="3" id="' . $this->get_field_id( 'img_width' ) . '" name="' . $this->get_field_name( 'img_width' ) . '" type="text" value="' . $img_width . '" /> |
|
231
|
|
|
</label> |
|
232
|
|
|
<label for="' . $this->get_field_id( 'img_height' ) . '">' . esc_html__( 'Height:', 'jetpack' ) . ' |
|
233
|
|
|
<input size="3" id="' . $this->get_field_id( 'img_height' ) . '" name="' . $this->get_field_name( 'img_height' ) . '" type="text" value="' . $img_height . '" /> |
|
234
|
|
|
</label><br /> |
|
235
|
|
|
<small>' . esc_html__( "If empty, we will attempt to determine the image size.", 'jetpack' ) . '</small></p> |
|
236
|
|
|
<p><label for="' . $this->get_field_id( 'link' ) . '">' . esc_html__( 'Link URL (when the image is clicked):', 'jetpack' ) . ' |
|
237
|
|
|
<input class="widefat" id="' . $this->get_field_id( 'link' ) . '" name="' . $this->get_field_name( 'link' ) . '" type="text" value="' . $link . '" /> |
|
238
|
|
|
</label> |
|
239
|
|
|
<label for="' . $this->get_field_id( 'link_target_blank' ) . '"> |
|
240
|
|
|
<input type="checkbox" name="' . $this->get_field_name( 'link_target_blank' ) . '" id="' . $this->get_field_id( 'link_target_blank' ) . '" value="1"' . $link_target_blank . '/> |
|
241
|
|
|
' . esc_html__( 'Open link in a new window/tab', 'jetpack' ) . ' |
|
242
|
|
|
</label></p>'; |
|
243
|
|
|
} |
|
244
|
|
|
} // Class Jetpack_Image_Widget |
|
245
|
|
|
|
Automattic /
jetpack
