← All changes | modules/widgets/image-widget.php +291 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,291 @@
	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'] ?? 'none';
	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'] ?? 0 );
	178	+ $new_img_height = absint( $new_instance['img_height'] ?? 0 );
	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