image-widget.php
| 1 | <?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName |
| 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 | if ( ! defined( 'ABSPATH' ) ) { |
| 10 | exit( 0 ); |
| 11 | } |
| 12 | |
| 13 | // phpcs:disable Universal.Files.SeparateFunctionsFromOO.Mixed -- TODO: Move classes to appropriately-named class files. |
| 14 | |
| 15 | add_action( 'widgets_init', 'jetpack_image_widget_init', 11 ); |
| 16 | /** |
| 17 | * Register the widget for use in Appearance -> Widgets |
| 18 | */ |
| 19 | function jetpack_image_widget_init() { |
| 20 | if ( class_exists( 'WP_Widget_Media_Image' ) && Jetpack_Options::get_option( 'image_widget_migration' ) ) { |
| 21 | return; |
| 22 | } |
| 23 | register_widget( 'Jetpack_Image_Widget' ); |
| 24 | } |
| 25 | |
| 26 | /** |
| 27 | * Jetpack_Image_Widget main class. |
| 28 | */ |
| 29 | class Jetpack_Image_Widget extends WP_Widget { |
| 30 | /** |
| 31 | * Register widget with WordPress. |
| 32 | */ |
| 33 | public function __construct() { |
| 34 | parent::__construct( |
| 35 | 'image', |
| 36 | /** This filter is documented in modules/widgets/facebook-likebox.php */ |
| 37 | apply_filters( 'jetpack_widget_name', esc_html__( 'Image', 'jetpack' ) ), |
| 38 | array( |
| 39 | 'classname' => 'widget_image', |
| 40 | 'description' => __( 'Display an image in your sidebar', 'jetpack' ), |
| 41 | 'customize_selective_refresh' => true, |
| 42 | ) |
| 43 | ); |
| 44 | } |
| 45 | |
| 46 | /** |
| 47 | * Loads file for front-end widget style. |
| 48 | * |
| 49 | * @uses wp_enqueue_style(), plugins_url() |
| 50 | */ |
| 51 | public function enqueue_style() { |
| 52 | wp_enqueue_style( 'jetpack_image_widget', plugins_url( 'image-widget/style.css', __FILE__ ), array(), '20140808' ); |
| 53 | } |
| 54 | |
| 55 | /** |
| 56 | * Front-end display of widget. |
| 57 | * |
| 58 | * @see WP_Widget::widget() |
| 59 | * |
| 60 | * @param array $args Widget arguments. |
| 61 | * @param array $instance Saved values from database. |
| 62 | */ |
| 63 | public function widget( $args, $instance ) { |
| 64 | echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
| 65 | |
| 66 | $instance = wp_parse_args( |
| 67 | $instance, |
| 68 | array( |
| 69 | 'title' => '', |
| 70 | 'img_url' => '', |
| 71 | ) |
| 72 | ); |
| 73 | |
| 74 | /** This filter is documented in core/src/wp-includes/default-widgets.php */ |
| 75 | $title = apply_filters( 'widget_title', $instance['title'] ); |
| 76 | if ( $title ) { |
| 77 | echo $args['before_title'] . $title . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
| 78 | } |
| 79 | |
| 80 | if ( $instance['img_url'] ) { |
| 81 | |
| 82 | // Enqueue front end assets. |
| 83 | $this->enqueue_style(); |
| 84 | |
| 85 | $output = '<img src="' . esc_url( $instance['img_url'] ) . '" '; |
| 86 | |
| 87 | if ( '' !== (string) $instance['alt_text'] ) { |
| 88 | $output .= 'alt="' . esc_attr( $instance['alt_text'] ) . '" '; |
| 89 | } |
| 90 | if ( '' !== (string) $instance['img_title'] ) { |
| 91 | $output .= 'title="' . esc_attr( $instance['img_title'] ) . '" '; |
| 92 | } |
| 93 | if ( '' !== (string) $instance['caption'] ) { |
| 94 | $output .= 'class="align' . esc_attr( $instance['align'] ) . '" '; |
| 95 | } |
| 96 | if ( '' !== (string) $instance['img_width'] ) { |
| 97 | $output .= 'width="' . esc_attr( $instance['img_width'] ) . '" '; |
| 98 | } |
| 99 | if ( '' !== (string) $instance['img_height'] ) { |
| 100 | $output .= 'height="' . esc_attr( $instance['img_height'] ) . '" '; |
| 101 | } |
| 102 | $output .= '/>'; |
| 103 | |
| 104 | $output = apply_filters( 'jetpack_image_cdn_content', $output ); |
| 105 | |
| 106 | if ( $instance['link'] ) { |
| 107 | $target = ! empty( $instance['link_target_blank'] ) |
| 108 | ? 'target="_blank"' |
| 109 | : ''; |
| 110 | $output = '<a ' . $target . ' href="' . esc_url( $instance['link'] ) . '">' . $output . '</a>'; |
| 111 | } |
| 112 | if ( '' !== (string) $instance['caption'] ) { |
| 113 | /** This filter is documented in core/src/wp-includes/default-widgets.php */ |
| 114 | $caption = apply_filters( 'widget_text', $instance['caption'] ); |
| 115 | $img_width = ( ! empty( $instance['img_width'] ) ? 'style="width: ' . esc_attr( $instance['img_width'] ) . 'px"' : '' ); |
| 116 | $output = '<figure ' . $img_width . ' class="wp-caption align' . esc_attr( $instance['align'] ) . '"> |
| 117 | ' . $output . ' |
| 118 | <figcaption class="wp-caption-text">' . $caption . '</figcaption> |
| 119 | </figure>'; // wp_kses_post caption on update. |
| 120 | } |
| 121 | echo '<div class="jetpack-image-container">' . do_shortcode( $output ) . '</div>'; |
| 122 | } elseif ( current_user_can( 'edit_theme_options' ) ) { |
| 123 | echo '<p>' . wp_kses( |
| 124 | sprintf( |
| 125 | /* translators: %s link to the widget settings page. */ |
| 126 | __( 'Image missing or invalid URL. Please check the Image widget URL in your <a href="%s">widget settings</a>.', 'jetpack' ), |
| 127 | admin_url( 'widgets.php' ) |
| 128 | ), |
| 129 | array( |
| 130 | 'a' => array( |
| 131 | 'href' => array(), |
| 132 | ), |
| 133 | ) |
| 134 | ) . '</p>'; |
| 135 | } |
| 136 | |
| 137 | echo "\n" . $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
| 138 | |
| 139 | /** This action is documented in modules/widgets/gravatar-profile.php */ |
| 140 | do_action( 'jetpack_stats_extra', 'widget_view', 'image' ); |
| 141 | } |
| 142 | |
| 143 | /** |
| 144 | * Sanitize widget form values as they are saved. |
| 145 | * |
| 146 | * @see WP_Widget::update() |
| 147 | * |
| 148 | * @param array $new_instance Values just sent to be saved. |
| 149 | * @param array $old_instance Previously saved values from database. |
| 150 | * |
| 151 | * @return array Updated safe values to be saved. |
| 152 | */ |
| 153 | public function update( $new_instance, $old_instance ) { |
| 154 | $allowed_caption_html = array( |
| 155 | 'a' => array( |
| 156 | 'href' => array(), |
| 157 | 'title' => array(), |
| 158 | ), |
| 159 | 'b' => array(), |
| 160 | 'em' => array(), |
| 161 | 'i' => array(), |
| 162 | 'p' => array(), |
| 163 | 'strong' => array(), |
| 164 | ); |
| 165 | |
| 166 | $instance = $old_instance; |
| 167 | |
| 168 | $instance['title'] = wp_strip_all_tags( $new_instance['title'] ); |
| 169 | $instance['img_url'] = esc_url( trim( $new_instance['img_url'] ) ); |
| 170 | $instance['alt_text'] = wp_strip_all_tags( $new_instance['alt_text'] ); |
| 171 | $instance['img_title'] = wp_strip_all_tags( $new_instance['img_title'] ); |
| 172 | $instance['caption'] = wp_kses( stripslashes( $new_instance['caption'] ), $allowed_caption_html ); |
| 173 | $instance['align'] = $new_instance['align']; |
| 174 | $instance['link'] = esc_url( trim( $new_instance['link'] ) ); |
| 175 | $instance['link_target_blank'] = isset( $new_instance['link_target_blank'] ) ? (bool) $new_instance['link_target_blank'] : false; |
| 176 | |
| 177 | $new_img_width = absint( $new_instance['img_width'] ); |
| 178 | $new_img_height = absint( $new_instance['img_height'] ); |
| 179 | |
| 180 | if ( ! empty( $instance['img_url'] ) && 0 === $new_img_width && 0 === $new_img_height ) { |
| 181 | // Download the url to a local temp file and then process it with getimagesize so we can optimize browser layout. |
| 182 | $tmp_file = download_url( $instance['img_url'], 10 ); |
| 183 | if ( ! is_wp_error( $tmp_file ) ) { |
| 184 | $size = getimagesize( $tmp_file ); |
| 185 | |
| 186 | $width = $size[0]; |
| 187 | $instance['img_width'] = absint( $width ); |
| 188 | |
| 189 | $height = $size[1]; |
| 190 | $instance['img_height'] = absint( $height ); |
| 191 | |
| 192 | wp_delete_file( $tmp_file ); |
| 193 | } else { |
| 194 | $instance['img_width'] = $new_img_width; |
| 195 | $instance['img_height'] = $new_img_height; |
| 196 | } |
| 197 | } else { |
| 198 | $instance['img_width'] = $new_img_width; |
| 199 | $instance['img_height'] = $new_img_height; |
| 200 | } |
| 201 | |
| 202 | return $instance; |
| 203 | } |
| 204 | |
| 205 | /** |
| 206 | * Back end widget form. |
| 207 | * |
| 208 | * @see WP_Widget::form() |
| 209 | * |
| 210 | * @param array $instance Previously saved values from database. |
| 211 | * @return string|void |
| 212 | */ |
| 213 | public function form( $instance ) { |
| 214 | // Defaults. |
| 215 | $instance = wp_parse_args( |
| 216 | (array) $instance, |
| 217 | array( |
| 218 | 'title' => '', |
| 219 | 'img_url' => '', |
| 220 | 'alt_text' => '', |
| 221 | 'img_title' => '', |
| 222 | 'caption' => '', |
| 223 | 'align' => 'none', |
| 224 | 'img_width' => '', |
| 225 | 'img_height' => '', |
| 226 | 'link' => '', |
| 227 | 'link_target_blank' => false, |
| 228 | ) |
| 229 | ); |
| 230 | |
| 231 | $title = esc_attr( $instance['title'] ); |
| 232 | $img_url = esc_url( $instance['img_url'], null, 'display' ); |
| 233 | $alt_text = esc_attr( $instance['alt_text'] ); |
| 234 | $img_title = esc_attr( $instance['img_title'] ); |
| 235 | $caption = esc_textarea( $instance['caption'] ); |
| 236 | $align = esc_attr( $instance['align'] ); |
| 237 | $img_width = esc_attr( $instance['img_width'] ); |
| 238 | $img_height = esc_attr( $instance['img_height'] ); |
| 239 | $link_target_blank = checked( $instance['link_target_blank'], true, false ); |
| 240 | |
| 241 | $link = esc_url( $instance['link'], null, 'display' ); |
| 242 | |
| 243 | echo '<p><label for="' . esc_attr( $this->get_field_id( 'title' ) ) . '">' . esc_html__( 'Widget title:', 'jetpack' ) . ' |
| 244 | <input class="widefat" id="' . esc_attr( $this->get_field_id( 'title' ) ) . '" name="' . esc_attr( $this->get_field_name( 'title' ) ) . '" type="text" value="' . esc_attr( $title ) . '" /> |
| 245 | </label></p> |
| 246 | <p><label for="' . esc_attr( $this->get_field_id( 'img_url' ) ) . '">' . esc_html__( 'Image URL:', 'jetpack' ) . ' |
| 247 | <input class="widefat" id="' . esc_attr( $this->get_field_id( 'img_url' ) ) . '" name="' . esc_attr( $this->get_field_name( 'img_url' ) ) . '" type="text" value="' . esc_attr( $img_url ) . '" /> |
| 248 | </label></p> |
| 249 | <p><label for="' . esc_attr( $this->get_field_id( 'alt_text' ) ) . '">' . esc_html__( 'Alternate text:', 'jetpack' ) . ' <a href="https://support.wordpress.com/widgets/image-widget/#image-widget-alt-text" target="_blank">( ? )</a> |
| 250 | <input class="widefat" id="' . esc_attr( $this->get_field_id( 'alt_text' ) ) . '" name="' . esc_attr( $this->get_field_name( 'alt_text' ) ) . '" type="text" value="' . esc_attr( $alt_text ) . '" /> |
| 251 | </label></p> |
| 252 | <p><label for="' . esc_attr( $this->get_field_id( 'img_title' ) ) . '">' . esc_html__( 'Image title:', 'jetpack' ) . ' <a href="https://support.wordpress.com/widgets/image-widget/#image-widget-title" target="_blank">( ? )</a> |
| 253 | <input class="widefat" id="' . esc_attr( $this->get_field_id( 'img_title' ) ) . '" name="' . esc_attr( $this->get_field_name( 'img_title' ) ) . '" type="text" value="' . esc_attr( $img_title ) . '" /> |
| 254 | </label></p> |
| 255 | <p><label for="' . esc_attr( $this->get_field_id( 'caption' ) ) . '">' . esc_html__( 'Caption:', 'jetpack' ) . ' <a href="https://support.wordpress.com/widgets/image-widget/#image-widget-caption" target="_blank">( ? )</a> |
| 256 | <textarea class="widefat" id="' . esc_attr( $this->get_field_id( 'caption' ) ) . '" name="' . esc_attr( $this->get_field_name( 'caption' ) ) . '" rows="2" cols="20">' . esc_textarea( $caption ) . '</textarea> |
| 257 | </label></p>'; |
| 258 | |
| 259 | $alignments = array( |
| 260 | 'none' => __( 'None', 'jetpack' ), |
| 261 | 'left' => __( 'Left', 'jetpack' ), |
| 262 | 'center' => __( 'Center', 'jetpack' ), |
| 263 | 'right' => __( 'Right', 'jetpack' ), |
| 264 | ); |
| 265 | echo '<p><label for="' . esc_attr( $this->get_field_id( 'align' ) ) . '">' . esc_html__( 'Image Alignment:', 'jetpack' ) . ' |
| 266 | <select id="' . esc_attr( $this->get_field_id( 'align' ) ) . '" name="' . esc_attr( $this->get_field_name( 'align' ) ) . '">'; |
| 267 | foreach ( $alignments as $alignment => $alignment_name ) { |
| 268 | echo '<option value="' . esc_attr( $alignment ) . '" '; |
| 269 | if ( $alignment === $align ) { |
| 270 | echo 'selected="selected" '; |
| 271 | } |
| 272 | echo '>' . esc_html( $alignment_name ) . "</option>\n"; |
| 273 | } |
| 274 | echo '</select></label></p>'; |
| 275 | |
| 276 | echo '<p><label for="' . esc_attr( $this->get_field_id( 'img_width' ) ) . '">' . esc_html__( 'Width in pixels:', 'jetpack' ) . ' |
| 277 | <input size="3" id="' . esc_attr( $this->get_field_id( 'img_width' ) ) . '" name="' . esc_attr( $this->get_field_name( 'img_width' ) ) . '" type="text" value="' . esc_attr( $img_width ) . '" /> |
| 278 | </label> |
| 279 | <label for="' . esc_attr( $this->get_field_id( 'img_height' ) ) . '">' . esc_html__( 'Height in pixels:', 'jetpack' ) . ' |
| 280 | <input size="3" id="' . esc_attr( $this->get_field_id( 'img_height' ) ) . '" name="' . esc_attr( $this->get_field_name( 'img_height' ) ) . '" type="text" value="' . esc_attr( $img_height ) . '" /> |
| 281 | </label><br /> |
| 282 | <small>' . esc_html__( 'If empty, we will attempt to determine the image size.', 'jetpack' ) . '</small></p> |
| 283 | <p><label for="' . esc_attr( $this->get_field_id( 'link' ) ) . '">' . esc_html__( 'Link URL (when the image is clicked):', 'jetpack' ) . ' |
| 284 | <input class="widefat" id="' . esc_attr( $this->get_field_id( 'link' ) ) . '" name="' . esc_attr( $this->get_field_name( 'link' ) ) . '" type="text" value="' . esc_attr( $link ) . '" /> |
| 285 | </label> |
| 286 | <label for="' . esc_attr( $this->get_field_id( 'link_target_blank' ) ) . '"> |
| 287 | <input type="checkbox" name="' . esc_attr( $this->get_field_name( 'link_target_blank' ) ) . '" id="' . esc_attr( $this->get_field_id( 'link_target_blank' ) ) . '" value="1"' . esc_attr( $link_target_blank ) . '/> |
| 288 | ' . esc_html__( 'Open link in a new window/tab', 'jetpack' ) . ' |
| 289 | </label></p>'; |
| 290 | } |
| 291 | } // Class Jetpack_Image_Widget |
| 292 |