[Resolved] Query loop layout

[Niek]

Hi iam trying to get a certain layout for my pages with posts.
As seen in private information iam trying to get post title on the right with under that date and time.
The left is a image from the category that shows from what website the article is.

Can somebody help me with how to do this?

[Niek]

The idea iam trying to get is shorturl.at/eopu6
Right now i have it like this: shorturl.at/acDPX

[David]

Hi there,

the Image – where is this saved ? Is it the Featured Image of the post – if not then how is it added to the Category ?

[Niek]

Hi David, thanks for your reply.
In the original example i saved it as an image to the FTP as “categoryname.webp”.
So if there is a way i can enclose the categoryname and add put html around it, that would work for me.

[David]

Hmmm… you could try creating a shortcode that will get the category name of the first term. And outputting the Image HTML:

function display_category_image() {
    $id = get_the_ID();
    $category = get_the_category( $id );
    $cat_name = $category[0]->cat_name;
    $html = '<img class="cat-image" src="/cats/'.$cat_name.'.webp" />';

    return $html;
}

add_shortcode('cat_image', 'display_category_image' );

Note the: src="/cats/'.$cat_name.'.webp" needs to match the URL path for your image.

Then you can add the [cat_image] shortcode in your Query Loop.

[Niek]

Hi David,

Thanks for your help.
It does not display the category title though. Might there be a typo in the code?

[Niek]

When i troubleshoot the code and echo the $category it always give back “29”.
Not sure why it doesnt grab the right id.

[David]

Yeah my bad the ID is coming from the Page not the current object in the Query Loop.
So thats not going to work. Hmmm…..

Are you rebuilding the existing site ? Or is this a new site ? Just wondering if theres an alternative method.

[Niek]

It’s a new website. I’m trying to get the same effect.

[David]

Ok, i think i am having a brain freeze lol – i have asked Tom to take a quick look at my shortcode as we should be able to make that work. Hope you don’t mind waiting a little while…

[Niek]

Haha no problem buddy! I’ll wait a little longer.
Thanks in advance

[David]

Thanks for your patience, its bound to be something real obvious 🙂

[Tom]

Hi there,

This is a tricky one as get_the_ID() doesn’t work in the Query Loop. You can see the same issue here with the core Query Loop block: https://github.com/WordPress/gutenberg/issues/35676

We also don’t have access to the $block variable in a shortcode, so we can’t use the available context.

I wonder if the plugin mentioned in the last comment in that issue will help?

Let us know 🙂

[Niek]

Hi Tom,

Thank you so much for your answer.
I have installed the plugin and trying to figure out what i should fill in for the “Field name”.

I expect i should fill in the HTML code in the prefix and suffix.

[David]

OK, that explains it…. lets try a different approach.
Remove that plugin and the shortcode snippet i provided.

And add this PHP Snippet:

function db_category_image( $block_content, $block ) {
    $id = get_the_ID();
    $category = get_the_category( $id );
    $cat_name = $category[0]->cat_name;
    if ( ! empty( $block['attrs']['className'] ) && 'cat-image' === $block['attrs']['className'] ) {
        $block_content = '
		<figure class="gb-block-image has-cat-image">
		<img class="cat-image" src="/cats/'.$cat_name.'.webp" />
		</figure>
		';
    } 
    return $block_content;
}

add_filter( 'render_block', 'db_category_image', 10, 2 );

then in you Query Loop template, add an image block, select a placeholder image, and in Advanced > Additional CSS Class(es) add: cat-image

[Author]

Posts