[Resolved] Change Hero header background image size

[Tom]

Ok, we have a solution.

First, we need to edit wp-content/plugins/gp-premium/elements/class-hero.php.

On line 457, replace this:

return $css->css_output();

With this:

return apply_filters( 'generate_page_hero_css_output', $css->css_output(), $options );

For anyone else reading, this part is only necessary in versions before GPP 1.9.

Now we can use this filter to add a different image size as the page hero background:

add_filter( 'generate_page_hero_css_output', function( $output, $options ) {
	$mobile_image_url = false;
	$css = false;

	if ( $options['background_image'] && function_exists( 'get_the_post_thumbnail_url' ) ) {
		if ( 'featured-image' === $options['background_image'] ) {
			if ( is_singular() ) {
				$mobile_image_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
			}

			if ( ! $mobile_image_url ) {
				$mobile_image_url = get_the_post_thumbnail_url( $options['element_id'], 'medium' );
			}
		}

		if ( 'custom-image' === $options['background_image'] ) {
			$mobile_image_url = get_the_post_thumbnail_url( $options['element_id'], 'medium' );
		}
	}

	if ( $mobile_image_url ) {
		if ( $options['background_color'] && $options['background_overlay'] ) {
			$background_image = 'linear-gradient(0deg, ' . $options['background_color'] . ',' . $options['background_color'] . '), url(' . $mobile_image_url . ')';
		} else {
			$background_image = 'url(' . $mobile_image_url . ')';
		}

		$css = '@media (max-width: 768px) {
			.page-hero {
				background-image: ' . $background_image . '
			}
		}';
	}

	return $output . $css;
}, 10, 2 );

It’s important to note that this might change between now and 1.9. If it does, I’ll be sure to update you.

[Rozanne]

Hi, any news on this issue? It would speed up the sites using your theme considerably and allow people to display their Hero images properly (which gets you higher SEO too), by choosing the WP image size with crop dimensions that suit the Hero dimensions they chose. (I don’t see the version 1.9 available for download in my account, so…)

[David]

Hi there

1.9 is still under development – we’re hoping for the Beta to be released this month.

[Steven]

I tried to follow Tom’s instructions to add this update, but not sure I’m getting the results I expect. Also, does this just specify the image rendition (medium) for the hero (any sized screen) and not provide a way to also specify the image rendition for mobile separately? Was hoping for a solution that would allow both to be set so we get an optimized version of the feature image for desktop and for mobile.

https://cityofbellingh.wpengine.com/gov/mayor

[Tom]

The above solution will get the “medium” version of the featured image (as opposed to the large), and display it on mobile screens. It doesn’t give you an option to upload a separate image for mobile.

It looks like your site is showing the full size on mobile as well – does the “medium” image size exist on your site?

[Steven]

OK – I think you’ve clarified it a bit. When the screen width gets below 768, then the theme will use the Medium thumbnail rendition of the feature image as set in the Media settings. This does appear to be working – I just forgot I had to regenerate thumbnails after changing the Medium dimensions.

However, when the screen width is above 768, it seems the full res version of the image is used (not the Large thumbnail rendition). Is there a way we can modify the solution to use the Large thumbnail rendition for screens above 768 instead of the full res version? Otherwise, we have similar issues on desktop of getting a much larger image than needed in many cases.

Also, can we reference different image sizes by changing the Medium (and Large) parameter in the code? That would allow us to specify two image sizes with exact height and width instead of using the baked in proportional image sizes in the Media Settings of WP. That may save a lot in file sizes – especially for portrait images.

For example, adding the following to the functions.php file and then referencing ‘hero-small’ and ‘hero-large’ in the code:

add_image_size( ‘hero-small’, 800, 500 );
add_image_size( ‘hero-large’, 2000, 500 );

[Tom]

You can do that like this: https://generatepress.com/forums/topic/updating-the-header-in-the-posts-page/#post-1025791

If you create your own image size, you just need to update the references to medium and large in the code.

Let me know if you need more info 🙂

[Steven]

Thanks for the quick response Tom. Here’s what I ended up with in my child theme’s function.php file that appears to be working:

//Add new image sizes
add_image_size('hero-small',800,500,true);
add_image_size('hero-large',2000,500,true);

//Set hero image 
add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
    if ( is_singular() && has_post_thumbnail() ) {
        $image_url = get_the_post_thumbnail_url( get_the_ID(), 'hero-large' );
    }

    return $image_url;
}, 10, 2 );

//Set hero mobile image 
add_filter( 'generate_page_hero_css_output', function( $output, $options ) {
	$mobile_image_url = false;
	$css = false;

	if ( $options['background_image'] && function_exists( 'get_the_post_thumbnail_url' ) ) {
		if ( 'featured-image' === $options['background_image'] ) {
			if ( is_singular() ) {
				$mobile_image_url = get_the_post_thumbnail_url( get_the_ID(), 'hero-small' );
			}

			if ( ! $mobile_image_url ) {
				$mobile_image_url = get_the_post_thumbnail_url( $options['element_id'], 'hero-small' );
			}
		}

		if ( 'custom-image' === $options['background_image'] ) {
			$mobile_image_url = get_the_post_thumbnail_url( $options['element_id'], 'hero-small' );
		}
	}

	if ( $mobile_image_url ) {
		if ( $options['background_color'] && $options['background_overlay'] ) {
			$background_image = 'linear-gradient(0deg, ' . $options['background_color'] . ',' . $options['background_color'] . '), url(' . $mobile_image_url . ')';
		} else {
			$background_image = 'url(' . $mobile_image_url . ')';
		}

		$css = '@media (max-width: 768px) {
			.page-hero {
				background-image: ' . $background_image . '
			}
		}';
	}

	return $output . $css;
}, 10, 2 );

It would be great to have the option to specify these settings in the GUI for the hero element. Based on the support posts, there seems to be some interest. There may also be some users that don’t understand the bandwidth, storage, and page load time savings by having this in place so they don’t know to ask for it.

Thanks again for the workaround!

[Tom]

I agree – I’ll look into this 🙂

Thanks for posting your solution!

[Author]

Posts