Adjusting the Featured Images

Note: These options require the Blog add-on in GP Premium.

We can adjust our featured images in our blog by going to Customize > Blog > Featured Images.

These settings refer to the image on our blog index, categories, archives and tag pages.

  • Featured Image – show or remove the featured image.
  • Position – whether the featured image displays above or below your post title.
  • Alignment – align your featured image to the left, center or right.
  • Width – the width of your featured image in pixels.
  • Height – the height of your featured image in pixels.

When adjusting the post image width and height, you need to click the Apply image sizes button for the changes to live preview. It’s important to remember that changing the sizes and applying them (clicking the button or saving) creates new images. If you change this option a lot, it’s worth going into your wp-content/uploads folder and deleting the old files you no longer need.

Changing the featured image sizes using a filter

In some cases, you might need to adjust the featured image sizes based on different conditions. For this, we can use the following filter:

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts )
    // Set up our conditional
    if ( is_post_type_archive( 'portfolio' ) ) :
        $atts[ 'width' ] = 300;
        $atts[ 'height' ] = 300;
        $atts[ 'crop' ] = true;

    // Return our options
    return $atts;

You can use this filter under any conditions you need by using the WordPress conditional tags.

Learn how to add PHP here.

Removing the outside padding/spacing

People sometimes ask how they can remove the padding or spacing around the featured images, so they sit right up next to the containing box.

This is super easy using some CSS – you just need to adjust the 40px to whatever your content padding is.

.post-image img {
    position: relative;
    vertical-align: middle

.post-image + .entry-header + .entry-content:after, 
.post-image + .entry-header + .entry-summary:after {
    clear: none;

.post-image-aligned-left .site-main .inside-article {
    margin-top: -40px;
    margin-left: -40px;
    margin-bottom: -40px;

.post-image-aligned-right .site-main .inside-article {
    margin-top: -40px;
    margin-right: -40px;
    margin-bottom: -40px;

.post-image-aligned-center .site-main .inside-article {
    margin: -40px -40px 40px -40px;

Learn how to add CSS here.