[Support request] Customizing Column Grid on Archives

[Keith]

I am using the “Display Posts in Columns” feature. Love it. But, I want to tweak the CSS but am not seeing grid-specific language that I can tweak. I want to end up with something that looks like this – https://prnt.sc/po430o.

In that you will see each grid item as a white background, then inside each item is the featured image (I would actually like to use an image from a custom field if possible), post title and date. What I currently have looks like this – https://prnt.sc/po44i8. I don’t want the excerpt, and I need to get the image at the top of each grid cell. Can I do all this within GeneratePress?

[Tom]

Hi there,

Is there any reason you want to use a custom field instead of the featured image? That will definitely require some extra coding.

Right now, you can move the featured image above the title in Customize > Layout > Blog: https://docs.generatepress.com/article/adjusting-the-featured-images/

You can remove the excerpt by setting the “Excerpt word count” to 0: https://docs.generatepress.com/article/blog-content-layout/

To target the columns for custom CSS, you can do this:

.generate-columns-container article .inside-article {

}

Let me know if you need more info 🙂

[Keith]

My wanting to use the custom field is because I am migrating an existing site over to GeneratePress. In the old site the grid image was populated from a custom field, not the featured image. I’m wanting to not have to touch nearly 200 blog posts to set the featured image. I’m not SQL skilled enough, if it is even possible, to copy the value from the custom field into the featured image field in the database.

The “0” excerpt worked great, as did the grid CSS. You are AWESOME! This is what I have adjusted it to look like – https://prnt.sc/po9qzp

Is it “easy” to change the date format so it is SEPT 18 instead of September 18, 2018?

[Keith]

I figured the date out. Silly me.

[Tom]

Converting a custom field in your posts to the featured image is possible, but it will require some pretty complex code I think, as there are so many posts to process.

Maybe you can filter it..

add_filter( 'post_thumbnail_html', function( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $custom_field = get_post_meta( get_the_ID(), 'your_custom_field', true );

    if ( ! $html && $custom_field ) {
        $html = '<img src="' . $custom_field . '" alt="" />';
    }

    return $html;
}, 10, 5 );

[Keith]

Okay, so using the Code Snippets plugin I added that function. My thinking was that by adding that function the posts on this page would now show an image (the top three I did manually). Each post on this page has a “header-image” field (created by Advanced Custom Fields) that I was hoping would populate the template where the Featured Image would show. Did I do something wrong or have the wrong expectation? Do I need to do something else after adding the function?

Thanks for your help and patience.

[Tom]

Did you replace your_custom_field in the function with the name of your custom field?

[Author]

Posts