[Resolved] Featured Image query for Service site template

[Rachel]

Hi there,

I have imported the new Service site template and am working my way through the customisations (LOVE it btw – GB is so exciting!).

I had a query regarding the Blog Post Global Header Element. It uses the Featured Image as the background image for the element. As the element is displayed at full width, can you advise what size image will need to be used to ensure it is not pixelated?

The sample images in the template are 1920 px wide – is this the size required? I typically create featured images as the container width, but I am assuming with this element I will need to make them larger.

Any suggestions would be great, thanks.

Cheers,
Rachel

[David]

Hi there,

Glad to hear that 🙂

as its a background image that has an overlay i don’t think the size matters too much – you can afford to have a lower resolution look with that style.

I would go for a maximum of 1080px which is also large enough for the current Archive Image sizes ( currently its width is 880px ).

[Rachel]

Hi David,

Okay, that makes sense.

As my container is set to 1100 px and I have a side bar on my blog posts, the actual content width is around 800 px. I have also set the archive to be 2 columns.

I actually just found some code to add a custom image size to use for the Archive image as I have a 2 column archive and added it as a snippet. I have set that to 400 px – will that work or do I need to make it larger than the actual size required?

add_action( ‘init’, function() {
add_image_size( ‘my-archive-featured-image’, 400, 267, true ); // 400 width, 267 height, crop

add_image_size( ‘my-single-featured-image’, 800,0,false);
} );

/* add image size to Image drop down */
add_filter( ‘image_size_names_choose’, ‘my_custom_sizes’ );

function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
‘my-single-featured-image’ => __( ‘Blog-width’ )
) );
}

Thanks,
Rachel

[David]

That should work great for the 2 column width images 🙂

Note: in GPP 1.10 the Featured Image options in Customizer > Layout > Blog will display any custom sizes that you add.

[Rachel]

Thanks – all sorted.

[David]

Glad to hear that 🙂

[Author]

Posts