Change beans_header_post position

Mathieu Rouault

Hello !

I would like to change the beans_post_header markup position. Is it possible ?

I know that it is easy to change the position of the post title and the post meta. For instance, like this

beans_modify_action_hook( 'beans_post_title', 'beans_post_image_append_markup', 5 );
beans_modify_action_hook( 'beans_post_meta', 'beans_post_image_append_markup', 10 );

But this doesn't change the beans_post_header markup position in itself.

I've tried something like this :

beans_modify_action_hook( 'beans_post_header', 'beans_header_after_markup' );

But with no success.

I've found nothing in the forum and in the documentation. Please help ! 🙂

Thanks a lot !

Mathieu

Thierry Muller

Hey Mathieu,

Beans is fragmented into multiple blocks, from the entire document beans_load_documents() down to single HTML markup (even attributes). Here is an article which explains how things load!

So if you look into tm-beans/lib/render/template-parts.php, you will see all the functions which loads the template "blocks" to which the fragments will be attached to. This means that you can also move big blocks 🙂 So let's move the entire header! You will see that there is a beans_header_partial_template() function which is essentially the action id (functions name are always actions ids in Beans Core). Let's assume that you would like to move your header above the footer, you would do it as such:

beans_modify_action_hook( 'beans_header_partial_template', 'beans_footer_before_markup' );

So this is how you would move the header, you can now change beans_footer_before_markup with which ever hook you would like on the page.

Have fun,

Mathieu Rouault

Hello Thierry,

Thanks a lot for your message.

So, I have tried to find where in tm-beans/lib/render/template-parts.php is the beans_post_header. I have understood that it is located in the beans_loop_template "attached" to beans_content, and more precisely in tm-beans/lib/templates/structure/loop.php. There, I've found this :

beans_open_markup_e( 'beans_post_header', 'header' );
do_action( 'beans_post_header' );
beans_close_markup_e( 'beans_post_header', 'header' );

But I'm a little bit stuck here. I don't really see how to change the position of this element... What am I missing, Thierry ?

Mathieu

Thierry Muller

Hey Mathieu,

Please accept my apologies, I thought you were asking about the page header for some reason, my bad 🙁 Alright, back on track. So for the post header there isn't a fragment just for that yet. It is a very good point though and I have added that to the feature requests.

Where would you like to move your post header to?

Mathieu Rouault

Hello Thierry,

No problem ! 😉

What I try to do : change the post header position (post title + post meta inside <header> markup) and put it just below the header of the website (beans_header_after_markup), with the featured image in the background (overlay effect). To sum up, something like this.

Put it in HTML terms :

<div data-markup-id="beans_post_image" class="uk-overlay">

 <picture data-markup-id="beans_post_image_item_wrap">
   <img data-markup-id="beans_post_image_item">
  </picture>

  <header data-markup-id="beans_post_header" class="uk-overlay-panel">
    <h1 data-markup-id="beans_post_title">Post title</h1>
   <ul data-markup-id="beans_post_meta"><li>Meta</li></ul>
 </header>

</div>

This is the snippet on which I am currently working on :

add_action( 'beans_header_after_markup', 'sps_add_image_below_header' );

function sps_add_image_below_header () {

if ( !is_singular('post') )
return;

//* Add Image Below Header
beans_modify_action_hook( 'beans_post_image', 'beans_header_after_markup' );

//* Add Over Class To Beans Post Image
beans_add_attribute( 'beans_post_image', 'class', 'uk-overlay uk-overlay-background' );

//* Add Title Post and Post Meta Inside Beans Post Image
beans_modify_action_hook( 'beans_post_title', 'beans_post_image_append_markup', 5 );
beans_modify_action_hook( 'beans_post_meta', 'beans_post_image_append_markup', 10 );

//* Change Default Featured Image Size
add_filter( 'beans_edit_post_image_args', 'sps_post_image_edit_args' );

function sps_post_image_edit_args( $args ) {
 return array_merge( $args, array(
     'resize' => array( 1600, 500, true ),
    ) );
 }

}

I have some results with this method, but this code snippet obviously doesn't change anything to the <header> markup position, which stay in place, but empty.

Thanks in advance for you help and suggestions !

Mat

(PS : That said, I am not sure that put the <header> markup before opening the <article> markup is a very good HTML/SEO practice...)

Mathieu Rouault

Quick answer to myself. There's a better solution to create this effect, without changing the beans_header_post position, which could have some bad SEO effects.

The method would be to create an overlay effect inside the header post.

add_action( 'wp', 'sps_post_header' );

function sps_post_header () {

if ( !is_singular('post') )
return;

 //* Add uk-container to inner markup
    beans_wrap_markup( 'beans_post_header', 'header_container', 'div', array(
     'class' => 'uk-overlay',
    ) );

      beans_wrap_inner_markup( 'beans_post_header', 'header_div_for_flex', 'div', array(
      'class' => 'uk-contrast',
 ) );

  //* Add Image Below Header
  beans_modify_action_hook( 'beans_post_image', 'header_container_prepend_markup' );

  //* Add Attribute to Header
   beans_add_attribute( 'beans_post_header', 'class', 'uk-overlay-panel uk-overlay-background uk-flex uk-flex-bottom' );

   //* Change Default Featured Image Size
  add_filter( 'beans_edit_post_image_args', 'sps_post_image_edit_args' );

 function sps_post_image_edit_args( $args ) {
    return array_merge( $args, array(
        'resize' => array( 1600, 500, true ),
    ) );
  }

}

And, then, remove some uk-container uk-container-center here and there, and add these classes to <article> and other parts. I'll add here the rest of the code when I'm OK.

In the meanwhile, what do you think, Thierry ? What would be the best way to do ?

M

EDIT : I've changed the code above and add a class to header_div_for_flex

Thierry Muller

Hey Mathieu,

I think the second solution is better indeed. Would you mind posting a quick wireframe of the design your are after, this would help to suggest a potentially better solution 🙂

PS: no need to add an empty class for header_div_for_flex, it may just be beans_wrap_inner_markup( 'beans_post_header', 'header_div_for_flex', 'div' );

Thierry Muller

Hey Mathieu,

I would suggest one of the two following solutions depending on the markup you prefer SEO wise:

Header markup wrap everything
beans_add_attribute( 'beans_post_header', 'class', 'uk-cover-background uk-position-relative' );
beans_modify_action_hook( 'beans_post_image', 'example_header_flex_before_markup' );
beans_wrap_inner_markup( 'beans_post_header', 'example_header_flex', 'div', array(
  'class' => 'uk-position-cover uk-flex uk-flex-center uk-flex-bottom',
) );
beans_wrap_inner_markup( 'beans_post_header', 'example_header_flex_inner', 'div' );
Header markup below image
beans_modify_action_hook( 'beans_post_image', 'example_post_cover_prepend_markup' );
beans_wrap_markup( 'beans_post_header', 'example_post_cover', 'div', array(
  'class' => 'uk-cover-background uk-position-relative',
) );
beans_wrap_markup( 'beans_post_header', 'example_header_flex', 'div', array(
  'class' => 'uk-position-cover uk-flex uk-flex-center uk-flex-bottom',
) );

Note that the snippet above is just the to control the markup and assumes that your are enqueueing the UIkit flex component, doing the image resize etc.

Hope that helps,

Mathieu Rouault

Hello Thierry, Thank you for your help !

Just for the record, below is the final solution that worked for me. Hope it could help someone here ! 🙂

add_action( 'wp', 'myprefix_custom_output' );

function myprefix_custom_output() {

  if ( is_singular ( array( 'post' ) ) && in_category( 'Grand Angle' ) ) {

    beans_add_attribute( 'beans_post_header', 'class', 'wide-header uk-overlay uk-margin-large-bottom' );

   beans_wrap_inner_markup( 'beans_post_header', 'myprefix_header_flex', 'div', array(
     'class' => 'uk-overlay-panel uk-overlay-background uk-flex uk-flex-bottom uk-grid',
   ) );

    beans_wrap_inner_markup( 'sps_header_flex', 'myprefix_header_flex_div', 'div', array(
     'class' => 'uk-container-center uk-width-small-1-1 uk-width-medium-4-6 uk-width-large-4-6',
   ) );

    beans_modify_action_hook( 'beans_post_image', 'myprefix_header_flex_before_markup' );

   /* Remove Useless Markup */
   beans_remove_markup( 'beans_main_grid' );
   beans_remove_markup( 'beans_primary' );
   beans_remove_markup( 'beans_fixed_wrap[_main]' );

   /* Wrap Post Body in a Container Center Markup */
   beans_wrap_markup( 'beans_post_body', 'myprefix_post_body_markup', 'div', array(
      'class' => 'uk-grid',
   ) );

    /* Centered Layout For Post */
    beans_add_attribute( 'beans_content', 'class', 'uk-container uk-container-center' );
    beans_add_attribute( 'beans_post_body', 'class', 'uk-container-center uk-width-small-1-1 uk-width-medium-4-6 uk-width-large-4-6' );

   /* Change Default Featured Image Size */
    add_filter( 'beans_edit_post_image_args', 'myprefix_post_image_edit_args' );

    function myprefix_post_image_edit_args( $args ) {
     return array_merge( $args, array(
       'resize' => array( 1200, 500, true ),
     ) );
    }

   /* Comments */
    beans_wrap_inner_markup( 'beans_comments', 'myprefix_add_comment_markup', 'div', array(
     'class' => 'uk-grid',
   ) );

    beans_wrap_inner_markup( 'beans_comments', 'myprefix_add_comment_markup', 'div', array(
     'class' => 'uk-container-center uk-width-small-1-1 uk-width-medium-4-6 uk-width-large-4-6',
   ) );

  }

}
Pandhu Wee

Hi Thierry and Mathieu,

I tried your code with no success, the image was not shown. When I inspected the markup-id, the class that should be added via beans_add_attribute() was not shown.

Dee S

I tried this myself and it did not work. instead of adding into my function.php  i Tried page template as I wanted to achieve the grid layout concept.

Thierry Muller

Hi guys,

Two reason why it might not work for you @pandewa and @dee.

  1. The code snippet above has an if statement is_singular ( array( 'post' ) ) && in_category( 'Grand Angle' ) which is very specific to @matman install and won't work for you (I doubt you have a Grand Angle category lol) so you need to change the if statement according to your needs.
  2. If you are adding it to a page template (like in your case @dee), you can't run it in a wp action callback as it is already called at that stage and you don't need the if statement neighter. So what you can do is copy all the code within the if statement from the snippet above and past it straight into your page template 😉

Happy coding,

Pandhu Wee

Hi Thierry,

Actually I did what you write on your reply. I only use is_singular() in function.php. There is a overlay panel but the image is not shown

Dee S

Of course Thierry -

I'm was able to modify it to get it to do what I wanted.

Write a reply

Login or register to write a reply, it's free!