[Support request] Remove (Not Hide) Post Title In Archive / Home – To Display Only Featured Images

[Jose]

Hey I’m trying to remove the post title and remove the whitespace under the featured image… for archive / blog page → https://eqor.is/IUAU6J

Okay, what would be ideal is to remove the whitespace, and have the title fit as an overlay on the featured image/thumbnail. We run a food blog, so pictures are the main thing….

[Tom]

In order to actually remove those titles, you would need to copy the content.php file and add it to your child theme.

Then you’d remove this line: https://github.com/tomusborne/generatepress/blob/2.3.2/content.php#L34

It should also be possible to overlay it over the image. Any chance you can link us to that page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Decided not to remove the titles, but keep them like in https://wplift.com/ – but how do you fix the image size, and reduce the spacing?

Unfortunately, its being setup on MAMP before we test it live.

[Jose]

Tom,

I think I used this code before on Genesis, would this work on GP?

function be_remove_post_title_in_grid() {
	if( ! apply_filters( 'is_genesis_grid_loop', false ) )
		return;	
	if( in_array( 'teaser', get_post_class() ) ) {
		remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
	    add_action( 'genesis_entry_content', 'genesis_do_post_title' );
	}
	
}
add_action( 'genesis_before_entry', 'be_remove_post_title_in_grid' );

[Leo]

You can set the image sizing and remove the padding around the image in the customizer:
https://docs.generatepress.com/article/adjusting-the-featured-images/

Then you should get something like this:
https://www.screencast.com/t/xON1w8mXYzbh

And no that code won’t work for GP. The only solution to remove post title is the method Tom indicated above.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Hi Leo, I tried setting the height to 600 and width to auto, but there seems to be some problem with alignment… if the height is the same, shouldnt GP automatically resize width? please see https://eqor.is/WauChY

[Tom]

Hmm, that should in theory as long as the resizer is working. Is there any way for us to actually see the site?

Does it work if you define a width as well?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Tom, just uploaded to the site which is live now → https://mariasmenu.com/ – could you please look.

[Leo]

Any chance you can clear and disable all caching plugins and image lazy load plugins first?

I think the issue here is that when 600px is set to be the height, the (auto) widths of the images combined together is larger than the container width of 1030px.

What if you set the height to be smaller like 400px? do the images line up correctly?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

If the height is set to 400, white space shows up on the left and right… https://eqor.is/8ehegC

[Jose]

Also, on mobile with a lower height than 600, the image is much smaller, creating more white space… https://eqor.is/wu6PmY

[Leo]

Are you able to upload the featured images so they are all the same size to start with?

That’s generally what I would recommend. Then you don’t have to deal with the cropping/resizing issue.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Leo, we have over 500 posts… that’s not going to be a solution for us.

[Tom]

What if you do something like this?:

.post-image img {
    width: 100%;
}

@media (min-width: 769px) {
    .post-image img {
        height: 400px;
        object-fit: cover;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Thanks Tom! That seems to have done the trick… https://eqor.is/lrtTPc

On a tablet view however, there is a lot whitespace around the image… https://eqor.is/UZVgxw I believe this is from the post container, how do you make that fit the image and center align?

[Author]

Posts