[Resolved] Rearrange elements on paged pages

Home Forums Support [Resolved] Rearrange elements on paged pages

Home Forums Support Rearrange elements on paged pages

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #2349724
    Fergal

    Hey there,

    I have elements that are used on my front page (blog page) and I like the layout on my home page. However, I’d like to rearrange them on my paged pages.

    Can you please advise?

    Thanks,
    Fergal

    #2349803
    Leo
    Staff
    Customer Support

    Hi Fergal,

    Just to make sure I fully understand, are you looking to rearrange those 3 elements on the paged pages only?

    Let me know ๐Ÿ™‚

    #2349816
    Fergal

    Hey Leo,

    That is correct! I’m happy with the homepage arrangement as is.

    Thanks,
    Fergal

    #2350022
    Leo
    Staff
    Customer Support

    Hmm a little bit tricky but let’s give CSS solution a shot.

    Can you start by adding a unique class to the container on the very outside of each of those elements?
    https://docs.generateblocks.com/article/container-overview/#advanced

    Let me know ๐Ÿ™‚

    #2350079
    Fergal

    Hey Leo,

    Thanks for the suggestion. I just thought of another approach that I decided to give a try first. I duplicated the 3 elements that I want to rearrange and then used the following code to just show them on paged pages. And this code also just shows the original 3 elements on the homepage. Is there anything potentially wrong with this approach or a way to improve this code? Is the CSS route the preferred route?

    
    // show home page featured jobs just on front page and not blog page
    add_filter( 'generate_block_element_display', function( $display, $element_id ) {
        if ( 285 === $element_id && is_paged() ) {
            $display = false;
        }
    
        return $display;
    }, 10, 2 );
    
    // show paged featured jobs just on paged pages
    add_filter( 'generate_block_element_display', function( $display, $element_id ) {
        if ( 425 === $element_id && is_home() ) {
            $display = false;
        }
    
        if ( 425 === $element_id && is_paged() ) {
            $display = true;
        }
    
        return $display;
    }, 10, 2 );
    
    // show home page newsletter optin just on front page and not blog page
    add_filter( 'generate_block_element_display', function( $display, $element_id ) {
        if ( 423 === $element_id && is_paged() ) {
            $display = false;
        }
    
        return $display;
    }, 10, 2 );
    
    // show paged newletter optin just on paged pages
    add_filter( 'generate_block_element_display', function( $display, $element_id ) {
        if ( 426 === $element_id && is_home() ) {
            $display = false;
        }
    
        if ( 426 === $element_id && is_paged() ) {
            $display = true;
        }
    
        return $display;
    }, 10, 2 );
    
    // show All Jobs Page number just on front page and not blog page
    add_filter( 'generate_block_element_display', function( $display, $element_id ) {
        if ( 390 === $element_id && is_paged() ) {
            $display = false;
        }
    
        return $display;
    }, 10, 2 );
    
    // show paged All Jobs Page number just on paged pages
    add_filter( 'generate_block_element_display', function( $display, $element_id ) {
        if ( 427 === $element_id && is_home() ) {
            $display = false;
        }
    
        if ( 427 === $element_id && is_paged() ) {
            $display = true;
        }
    
        return $display;
    }, 10, 2 );
    
    #2350159
    Fernando
    Customer Support

    Hi Fergal,

    Your approach is good as well. You would just need to make sure the duplicated Elements will be manually updated if you make changes on the original.

    If you go with the CSS approach, you wouldn’t need to worry about updating the duplicated Elements.

    #2350181
    Fergal

    Hey Fernando,

    Makes perfect sense! The CSS route sounds better. I’ve undone the duplicated elements and php code route and have added a unique CSS class to the container on the very outside of each of those elements as recommended by Leo.

    I look forward to the next steps.

    Thanks,
    Fergal

    #2350200
    Fernando
    Customer Support

    Try this CSS:

    body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
        display: flex;
        flex-direction: column;
    }
    
    body.blog[class*=' paged'] .my_featuredjobs_container {
        order: 1;
    }
    
    body.blog[class*=' paged'] .my_newsletter_container {
        order: -1;
    }
    #2350961
    Fergal

    Hey Fernando,

    Thanks for the CSS I think we are moving in the right direction. Please see my feedback and let me know your thoughts.

    Thanks,
    Fergal

    #2351032
    Ying
    Staff
    Customer Support

    Try add this CSS:

    body.blog[class*=' paged'] .my_jobsnumber_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
        order: -1;
    }

    And change this CSS:

    body.blog[class*=' paged'] .my_featuredjobs_container {
        order: 1;
    }

    to:

    body.blog[class*=' paged'] .my_featuredjobs_container {
        order: 0;
    }
    #2351059
    Fergal

    Hey Ying,

    Thank you. Should this be my CSS at this point?

    
    body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
        display: flex;
        flex-direction: column;
    }
    
    body.blog[class*=' paged'] .my_jobsnumber_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
        order: -1;
    }
    
    body.blog[class*=' paged'] .my_featuredjobs_container {
        order: 0;
    }
    
    body.blog[class*=' paged'] .my_newsletter_container {
        order: -1;
    }
    
    #2351115
    Ying
    Staff
    Customer Support

    We can combine some of them together, so the final CSS would be:

    body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
        display: flex;
        flex-direction: column;
    }
    body.blog[class*=' paged'] .my_jobsnumber_container,body.blog[class*=' paged'] .my_newsletter_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
        order: -1;
    }
    body.blog[class*=' paged'] .my_featuredjobs_container {
        order: 0;
    }
    #2351142
    Fergal

    Thanks Ying. I combined them and this is what I see so far:

    View post on imgur.com

    I’d like to shift the featured jobs section to right below the “All Jobs” title, please advise.

    #2351144
    Fernando
    Customer Support

    Hi Fergal,

    This is in the Homepage – Page 1 right?

    If so, the code we provided affects only the pages 2 onwards. You can manually rearrange the Blocks in Page 1 or change the priority if you’re using a Block Element to rearrange them.

    #2351154
    Fergal

    Hey Fernando,

    The homepage looks great. The screenshots are from:

    • page 2 onwards
    • .com/job-openings/ archive
    • .com/job-openings/page/2 onwards

    These are the elements and there is also php code that we setup to display All Jobs title text:

    View post on imgur.com

    Does this all check out? If it looks good I’ll now work on rearranging the priorities to see if it does the trick and report back to you.

    Thanks,
    Fergal

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