[Resolved] Change Hero header background image size

Home Forums Support [Resolved] Change Hero header background image size

Home Forums Support Change Hero header background image size

Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #991745
    Tom
    Lead Developer
    Lead Developer

    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.

    #1028871
    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…)

    #1029130
    David
    Staff
    Customer Support

    Hi there

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

    #1031668
    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

    #1032205
    Tom
    Lead Developer
    Lead Developer

    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?

    #1032279
    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 );

    #1032507
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #1034613
    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!

    #1034755
    Tom
    Lead Developer
    Lead Developer

    I agree – I’ll look into this ๐Ÿ™‚

    Thanks for posting your solution!

Viewing 9 posts - 16 through 24 (of 24 total)
  • You must be logged in to reply to this topic.