[Resolved] Move Elements in .inside-article Blog Archive Container

Home Forums Support Move Elements in .inside-article Blog Archive Container

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1223257
    Michael

    Hey there

    Can you please give me a hint in the right direction?

    At the moment the inside-article structure on the blog index page is:
    Featured Image
    Title
    Post Date
    Summary
    Read More
    Category
    Comment

    Where can I reorder the elements within <article> on the blog index page?
    (I will use it on blog index, archives etc, so it doesn´t only have to be for the blog index page).

    I want to achieve something like this:
    Featured Image – Post Date (on top right of featured image)
    Title
    Comment – Category
    Summary
    Read More

    I´m not sure which templates/files I have to tweak.
    I´m not even sure if it is possible without plugins but I guess so.

    The html and css part isn´t a problem for me, but the php part.
    Can you please share some of your ideas and nice hints how to achieve this?

    Thanks in advance
    Michael

    (I rebuild the website I posted with GeneratePress. I want to achieve a blog index layout similar to this)

    #1223799
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You shouldn’t have to tweak any files I don’t think.

    1. First, set your featured image to appear above the title: Customize > Layout > Blog
    2. Set your post meta to show comments and categories:

    add_filter( 'generate_header_entry_meta_items', function( $items ) {
        return array(
            'comments-link',
            'categories',
        );
    } );
    
    add_filter( 'generate_footer_entry_meta_items', '__return_null' );

    3. Setting the post date with the featured image – are you wanting it to sit on top of the featured image?

    add_filter( 'generate_inside_featured_image_output', function() {
        generate_do_post_meta_item( 'date' );
    } );

    Then you’ll likely need some CSS to position it absolutely on the image.

    Let me know if this helps or not 🙂

    #1223838
    Michael

    Thanks a lot Tom!

    Works like a charm. Very nice.

    Best regards
    Michael

    #1224230
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.