WPEX_Mobile_Thumbnails PHP Class

gistfile1.txt

class WPEX_Mobile_Thumbnails {

	/**
	 * Class constructor.
	 */
	public function __construct() {
		add_action( 'add_meta_boxes', [ $this, 'add_meta_box' ] );
		add_action( 'save_post', [ $this, 'save_meta_box' ] );
		add_filter( 'wp_get_attachment_image_attributes', [ $this, 'attachment_image_attributes' ], 10, 3 );
	}

	/**
	 * Register the Mobile Image metabox.
	 */
	public function add_meta_box() {
		add_meta_box(
			'wpex-mobile-image',
			__( 'Mobile Image', 'text_domain' ),
			[ $this, 'display_meta_box' ],
			[ 'post' ],
			'advanced',
			'high'
		);
	}

	/**
	 * Renders the Mobile Image metabox.
	 */
	public function display_meta_box( $post ) {
		wp_nonce_field(
			'wpex_mobile_image_metabox',
			'wpex_mobile_image_meta_nonce'
		);

		$mobile_image = get_post_meta( $post->ID, 'wpex_mobile_image', true );

		wp_enqueue_script(
			'wpex-mobile-image-metabox',
			trailingslashit( get_stylesheet_directory_uri() ) . 'assets/js/mobile-image-metabox.js',
			[],
			'1.0',
			true
		);

		?>

		<div class="wpex-mobile-image-metabox">
			<table class="form-table">
				<tr>
					<th>
						<label for="wpex-mobile-image-input"><?php esc_html_e( 'Image', 'text_domain' ); ?></label>
					</th>
					<td>
						<input id="wpex-mobile-image-input" name="wpex_mobile_image" type="text" value="<?php echo esc_attr( $mobile_image ); ?>">
						<button class="wpex-mobile-image-select"><?php esc_html_e( 'Select Image', 'text_domain' ); ?></button>
					</td>
				</tr>
			</table>
		</div>

	<?php }

	/**
	 * Save the Mobile Image metabox fields.
	 */
	public function save_meta_box( $post_id ) {

		// If this is an autosave, our form has not been submitted, so we don't want to do anything.
		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
			return;
		}

		// Verify our nonce and that our custom field exists in the $_POST array.
		if ( ! array_key_exists( 'wpex_mobile_image_meta_nonce', $_POST )
			|| ! array_key_exists( 'wpex_mobile_image', $_POST )
			|| ! wp_verify_nonce( $_POST[ 'wpex_mobile_image_meta_nonce' ], 'wpex_mobile_image_metabox' )
		) {
			return;
		}

		// Check the user's permissions for security reasons.
		if ( array_key_exists( 'post_type', $_POST ) && 'page' === $_POST[ 'post_type' ] ) {
			if ( ! current_user_can( 'edit_page', $post_id ) ) {
				return;
			}
		} else {
			if ( ! current_user_can( 'edit_post', $post_id ) ) {
				return;
			}
		}

		// OK, it's safe for us to save the data now.
		$mobile_image = $_POST[ 'wpex_mobile_image' ];

		if ( $mobile_image ) {
			update_post_meta( $post_id, 'wpex_mobile_image', sanitize_text_field( $mobile_image ) );
		} else {
			delete_post_meta( $post_id, $field_id );
		}

	}

	/**
	 * Filters the image attachment attributes.
	 */
	public function attachment_image_attributes( $attr, $attachment, $size ) {
		if ( 'IMAGE_SIZE_TO_TARGET' === $size ) {
			$mobile_image = get_post_meta( get_the_ID(), 'wpex_mobile_image', true );
			if ( $mobile_image ) {
				$mobile_image_url = wp_get_attachment_image_url( $mobile_image, 'full' );
				if ( $mobile_image_url ) {
					$attr['sizes'] = '(max-width: 640px) 640px';
					$attr['srcset'] = $mobile_image_url . ' 640w,' . $attr['src'];
				}
			}
		}
		return $attr;
	}

}
new WPEX_Mobile_Thumbnails;