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