[Resolved] How can I re-style the blog page

[Tesco]

I’m using a child theme and I would like to re-style the blog template. Is this possible via Hooks and Filters?

If so, how?

[Leo]

Hi there,

What would you like to achieve specifically?

[Tesco]

Hi Leo,

I’m trying to re-style the blog page by adding two columns (33,66) and adding the featured image on the left and the description on the right.

Also, make it available the “read more” button just below the description…

[Leo]

Might be able to use CSS for that.

Something like Marketer?
http://gpsites.co/marketer/

[Tesco]

Bingo!

That’s the template I had in mind… How can I achieve that?

[Leo]

So try setting the featured image location to below title:
https://docs.generatepress.com/article/adjusting-the-featured-images/

Then resize the image width to something like 300px.

That should be it 🙂

[Tesco]

Awesome, thanks!

[Leo]

No problem 🙂

[Tesco]

Sorry to re-open this but it might be related…

Is there any way to add a class to the images on the blog page?

[David]

Hi there,

what specifically do you want to do ? As it may be possible without adding a new class.
Let me know

[Tesco]

The solution I found was to add a custom style to the classes like so:

.resize-featured-image .post-image img { my style here }

And that do the job… but it would be great if I can add a style via some kind of filter OR, maybe you can show me another way (I would be grateful…).

Thanks, again!

[David]

That is a perfectly good way to do it.
If you must add a class to the archive featured image you can use this PHP Snippet

add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment ) {
    if ( ! is_single() && $attachment->ID === get_post_thumbnail_id() ) {
        $attr['class'] .= ' your-class';
    }

    return $attr;
}, 10, 2 );

[Tesco]

Awesome, once again!

Thanks!

[David]

Glad to be of help

[Author]

Posts