[Resolved] Unique first post in loop: Either breaks layout, or breaks functionality

[Author]

Posts

[alanB-4]

Yeah. Whenever I put the hero post in the loop, I can't get my template to work properly. I'm a bit surprised how difficult this is!

[Minesh]

It is difficult for you because you are trying to split the view loop in to hero section and loop.

Here is the Doc that shows how you can build the hero sections:
- https://toolset.com/course-lesson/creating-a-hero-section/

But its specifically to display hero section.

You can use the [wpv-item] shortcode to display something specific for your first loop index:

For exmaple:

<wpv-loop>
    [wpv-item index=1]
          /// add here whatever you want to display for first item
 
    [wpv-item index=other]
      // add here whatever you want to display for other items (excluding 1st item)    
 </wpv-loop>

More info:
- https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-154400

[alanB-4]

I've tried this approach too, but it breaks my layout. Is there any way I can make this work with my layout? I keep seeing my rendered WPBakery shortcode HTML hierarchy broken on the front end. The first post (hero section) works fine, but the rest of the loop items are broken. You can see me trying to make this work in the view "Blog Take 98"

[Minesh]

Can you please check now: hidden link

I've added the following custom shortcode that will return the ID of first post for every page to the "Custom Code" section offered by Toolset with the code snippet "toolset-custom-code":
=> hidden link

add_shortcode( 'view_first_item', 'func_view_return_first_item_id');
function func_view_return_first_item_id($atts){
  
  $results = get_view_query_results( 2439 );
  if(!empty($results)) {
    $first_post = $results[0];
    return $first_post->ID;
  }
  
  return 0;
  
}

With the hero section view's output:
=> hidden link

I've adjusted the code as given under:

[wpv-post-body view_template="ferris-hero" item="[view_first_item]"]

Also, I've registered the custom shortcode "view_first_item" at:
=> hidden link
=> Toolset => Settings => Front-end content => Third-party shortcode arguments

More info:
- https://toolset.com/documentation/legacy-features/views-plugin/shortcodes-within-shortcodes/
- https://toolset.com/documentation/programmer-reference/views-api/#get_view_query_results
- https://toolset.com/documentation/programmer-reference/adding-custom-code/using-toolset-to-add-custom-code/