Snippets: Add Custom Image Size for Page Header Backgrounds

By default the page header title with background displays the full image selected so you can crop it prior to uploaded if wanted. However, if you want to add a new custom image size for this it is possible via the code below.

// Add new image size setting
add_filter( 'wpex_image_sizes', function( $sizes ) {
	$sizes['page_header_bg'] = array(
		'label'     => __( 'Page Header Bacground', 'wpex' ), // Label
		'width'     => 'page_header_bg_width', // id for theme_mod width
		'height'    => 'page_header_bg_height', // id for theme_mod height
		'crop'      => 'page_header_bg_crop', // id for theme_mod crop
	);
	return $sizes;
}, 9999 );

// Alter the page header background output
add_filter( 'wpex_page_header_background_image', function( $image ) {
	$post_id       = get_the_ID();
	$attachment_id = get_post_meta( $post_id, 'wpex_post_title_background', true );
	$attachment_id = $attachment_id ? $attachment_id : get_post_meta( $post_id, 'wpex_post_title_background_redux', true );
	if ( $attachment_id && is_numeric( $attachment_id ) ) {
		$image = wpex_get_post_thumbnail_url( array(
			'attachment' => $attachment_id,
			'size'       => 'page_header_bg',
		) );
	}
	return $image;
}, 10 );