[Resolved] Query loop layout

Home Forums Support [Resolved] Query loop layout

Home Forums Support Query loop layout

  • This topic has 22 replies, 3 voices, and was last updated 1 week ago by David.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #2297266
    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?

    #2297269
    Niek

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

    #2297296
    David
    Staff
    Customer Support

    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 ?

    #2297299
    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.

    #2297936
    David
    Staff
    Customer Support

    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.

    #2297947
    Niek

    Hi David,

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

    #2298341
    Niek

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

    #2298700
    David
    Staff
    Customer Support

    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.

    #2298701
    Niek

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

    #2298798
    David
    Staff
    Customer Support

    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…

    #2298836
    Niek

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

    #2298847
    David
    Staff
    Customer Support

    Thanks for your patience, its bound to be something real obvious ๐Ÿ™‚

    #2299276
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #2299347
    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.

    #2299526
    David
    Staff
    Customer Support

    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

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.