Dedicated Banner upload field for the Vantage

March 29, 2020

Mods 6 Comments

This mod is for Vantage users who want to use a special custom field for the listing page banner upload.

Time needed: 5 minutes.

By default, the Vantage theme uses the first available image for the listing thumbnail and the page banner. This might not be convenient. Especially when users use logo images in thumbnails, which appears on the banner.

This is definitely a UX issue and it will be fixed in the next versions of the Vantage theme. In this article, we’ll show you how to fix it with a small code snippet before the official release.

Create new File Upload field
Open Vantage → Forms and create new File Upload field with name Banner Image. Set “Image” for Allowed Extensions parameter. File limit 1, embed limit 0. The name of the field in example app_banner-image.
Add PHP code snippet
You can use Code Snippets plugin for adding following PHP code on your site. For reference read our instruction Easy way to add custom PHP code on your WordPress site.

function arthemes_va_cover_image( $image, $args ) {

	if ( is_singular( VA_LISTING_PTYPE ) && 'full' === $args['size'] ) {
		$banner_image = get_post_meta( get_the_ID(), 'app_banner-image', true );
		if ( ! empty( $banner_image[0] ) ) {
			$image= wp_get_attachment_image_src( $banner_image[0], $args[ 'size' ] );
		}
	}

	return $image;
}
add_filter( 'va_cover_image', 'arthemes_va_cover_image',10, 2 );

function arthemes_exclude_banner_from_the_gallery( $wp_query ) {
	if ( 'attachment' === $wp_query->get( 'post_type' ) && get_the_ID() === $wp_query->get( 'post_parent' ) && is_singular( VA_LISTING_PTYPE ) ) {
		$featured_id = get_post_thumbnail_id( get_the_ID() );
		if (  $wp_query->get( 'post__not_in' ) === array( $featured_id ) ) {
			$banner_id = get_post_meta( get_the_ID(), 'app_banner-image', true );
			$wp_query->set( 'post__not_in', array_merge( array( $featured_id ), (array) $banner_id ) );
		}
	}
}
add_filter( 'pre_get_posts', 'arthemes_exclude_banner_from_the_gallery' );

Now, your users will use Banner Image field for uploading banners without hassle.

In result a single listing page look much more better.

6 responses to “Dedicated Banner upload field for the Vantage”

That’s awesome and really needed! Thanks for that. Just wondering if this also works with Sponsored Posts: https://marketplace.appthemes.com/plugins/sponsored-posts/

artem likes this.

Hi! Thank you!

Yes, this will work with Sponsored Posts, but with a small change:
Replace VA_LISTING_PTYPE with ‘post’ in the code snippet. (Important, ‘post’ in single quotes).

Cheers Artem!

I presume I can use both code snippets if I want to make sure it work for both listings and posts?

Thanks in advance!
Ronald

Yes, but don’t duplicate functions names!
Better I’ll post here the modified code for both listings and posts:


// Listings
function arthemes_va_cover_image( $image, $args ) {

	if ( is_singular( VA_LISTING_PTYPE ) && 'full' === $args['size'] ) {
		$banner_image = get_post_meta( get_the_ID(), 'app_banner-image', true );
		if ( ! empty( $banner_image[0] ) ) {
			$image= wp_get_attachment_image_src( $banner_image[0], $args[ 'size' ] );
		}
	}

	return $image;
}
add_filter( 'va_cover_image', 'arthemes_va_cover_image',10, 2 );

function arthemes_exclude_banner_from_the_gallery( $wp_query ) {
	if ( is_singular( VA_LISTING_PTYPE ) && 'attachment' === $wp_query->get( 'post_type' ) && get_the_ID() === $wp_query->get( 'post_parent' ) ) {
		$featured_id = get_post_thumbnail_id( get_the_ID() );
		if (  $wp_query->get( 'post__not_in' ) === array( $featured_id ) ) {
			$banner_id = get_post_meta( get_the_ID(), 'app_banner-image', true );
			$wp_query->set( 'post__not_in', array_merge( array( $featured_id ), (array) $banner_id ) );
		}
	}
}
add_filter( 'pre_get_posts', 'arthemes_exclude_banner_from_the_gallery' );

// Posts
function arthemes_va_post_cover_image( $image, $args ) {

	if ( is_singular( 'post' ) && 'full' === $args['size'] ) {
		$banner_image = get_post_meta( get_the_ID(), 'app_banner-image', true );
		if ( ! empty( $banner_image[0] ) ) {
			$image= wp_get_attachment_image_src( $banner_image[0], $args[ 'size' ] );
		}
	}

	return $image;
}
add_filter( 'va_cover_image', 'arthemes_va_post_cover_image',10, 2 );

function arthemes_exclude_banner_from_the_post_gallery( $wp_query ) {
	if ( is_singular( 'post' ) && 'attachment' === $wp_query->get( 'post_type' ) && get_the_ID() === $wp_query->get( 'post_parent' ) ) {
		$featured_id = get_post_thumbnail_id( get_the_ID() );
		if (  $wp_query->get( 'post__not_in' ) === array( $featured_id ) ) {
			$banner_id = get_post_meta( get_the_ID(), 'app_banner-image', true );
			$wp_query->set( 'post__not_in', array_merge( array( $featured_id ), (array) $banner_id ) );
		}
	}
}
add_filter( 'pre_get_posts', 'arthemes_exclude_banner_from_the_post_gallery' );

Anonymous likes this.

Following code will do the same, but Banner image will be used for post thumbnails as well.


// Listings
function arthemes_va_cover_image( $image, $args ) {

	if ( ( is_singular( VA_LISTING_PTYPE ) && 'full' === $args['size'] ) || is_post_type_archive( VA_LISTING_PTYPE ) || is_front_page() ) {
		$banner_image = get_post_meta( get_the_ID(), 'app_banner-image', true );
		if ( ! empty( $banner_image[0] ) ) {
			$image = wp_get_attachment_image_src( $banner_image[0], $args[ 'size' ] );
		}
	}

	return $image;
}
add_filter( 'va_cover_image', 'arthemes_va_cover_image',10, 2 );

function arthemes_exclude_banner_from_the_gallery( $wp_query ) {
	if ( 'attachment' === $wp_query->get( 'post_type' ) && get_the_ID() === $wp_query->get( 'post_parent' ) && is_singular( VA_LISTING_PTYPE ) ) {
		$featured_id = get_post_thumbnail_id( get_the_ID() );
		if ( $wp_query->get( 'post__not_in' ) === array( $featured_id ) ) {
			$banner_id = get_post_meta( get_the_ID(), 'app_banner-image', true );
			$wp_query->set( 'post__not_in', array_merge( array( $featured_id ), (array) $banner_id ) );
		}
	}
}
add_filter( 'pre_get_posts', 'arthemes_exclude_banner_from_the_gallery' );

// Posts
function arthemes_va_post_cover_image( $image, $args ) {

	if ( 'post' === get_post_type() ) {
		$banner_image = get_post_meta( get_the_ID(), 'app_banner-image', true );
		if ( ! empty( $banner_image[0] ) ) {
			$image = wp_get_attachment_image_src( $banner_image[0], $args[ 'size' ] );
		}
	}

	return $image;
}
add_filter( 'va_cover_image', 'arthemes_va_post_cover_image',10, 2 );

function arthemes_exclude_banner_from_the_post_gallery( $wp_query ) {
	if ( 'attachment' === $wp_query->get( 'post_type' ) && get_the_ID() === $wp_query->get( 'post_parent' ) && is_singular( 'post' ) ) {
		$featured_id = get_post_thumbnail_id( get_the_ID() );
		if ( $wp_query->get( 'post__not_in' ) === array( $featured_id ) ) {
			$banner_id = get_post_meta( get_the_ID(), 'app_banner-image', true );
			$wp_query->set( 'post__not_in', array_merge( array( $featured_id ), (array) $banner_id ) );
		}
	}
}
add_filter( 'pre_get_posts', 'arthemes_exclude_banner_from_the_post_gallery' );

Anonymous likes this.

Ronald

4 years ago

Hi Artem,
Would it be possible to make sure the Banner image automatically be assigned to the listing featured image?
I have other plugins that need a post/custom-post-type featured image to work properly.
Kind regards,
Like

Reply