Building a page from scratch

Hi, I am trying to remove all markup from a page template (front page) except for navigation and footer. The goal is to build a whole page from scratch using beans / uikit. Specifically, I want to use a cover image with some text overlaying itt, and no matter what I do, the 'beans_post_image_item' markup id keeps loading an image that covers about 2/3rds of the viewport instead of the cover image. Whan I remove the id from markup, no image appears on the page.

I am adding cover and flex components from this page and loading contrast from functions.php. Theme is gradient.

What's the most efficient way to remove all markup while being able to show images? Thanks. This is what I have on front-page.php:

<?php

add_action( &#039;beans_uikit_enqueue_scripts&#039;, &#039;beans_child_enqueue_uikit_assets_home&#039; );

function beans_child_enqueue_uikit_assets_home() {

    // Enqueue UIkit necessary extra components.
    beans_uikit_enqueue_components( array( &#039;flex&#039;,  &#039;cover&#039; ) );

    // Enqueue child theme style.less
    beans_compiler_add_fragment(  &#039;uikit&#039;, get_stylesheet_directory_uri() . &#039;/style.less&#039;  &#039;less&#039; );

    // Remove unnecessary components.
    beans_uikit_dequeue_components( array( &#039;breadcrumb&#039;;, &#039;comment&#039;, &#039;pagination&#039;, &#039;form&#039;, &#039;table&#039; ) );

    // Remove header image.
    beans_remove_action( &#039;beans_header&#039;  );

    // Modify markup.
    beans_remove_markup( &#039;beans_fixed_wrap[_main]&#039; );
    beans_remove_markup( &#039;beans_main&#039; );
    beans_remove_markup( &#039;beans_main_grid&#039;  );
    beans_remove_markup( &#039;beans_content&#039;  );
    beans_remove_markup( &#039;beans_primary&#039; );
    beans_remove_markup( &#039;beans_post&#039; );
    beans_remove_markup( &#039;beans_post_body&#039;  );
    // beans_remove_markup( &#039;beans_post_image&#039; );
    // beans_remove_markup( &#039;beans_post_image_item&#039; );
    beans_remove_markup( &#039;beans_post_image_item_wrap  );
    beans_remove_markup( &#039;beans_post_image_small_item&#039;  );

    // Modify attribues.
    beans_remove_action( &#039;beans_post_title&#039; );
    beans_remove_attribute( &#039;beans_post&#039;;, &#039;;class&#039;, &#039;uk-article&#039; );
    beans_remove_attribute( &#039;beans_post&#039;, &#039;class&#039;;, &#039;uk-panel-box&#039; );
}
    // Force a layout
    add_filter( &#039;beans_layout&#039;, &#039;sample_force_layout&#039; );

    function sample_force_layout() {

  // Full width content
 return &#039;c&#039;;
}
beans_load_document(); 
...

Apologies, most symbols were changed into html codes equivelant.

Hey Firas,

If you want to write your own HTML, you may replace the entire loop as follow:

<?php

// Remove unecessary markup.
beans_remove_markup( 'beans_fixed_wrap[_main]' );
beans_remove_markup( 'beans_main_grid' );
beans_remove_markup( 'beans_primary' );

// Remove main block padding.
beans_remove_attribute( 'beans_main', 'class', ' uk-block' );

// Force layout.
add_filter( 'beans_layout', 'example_force_layout' );

function example_force_layout() {

    return 'c';

}

// Replace loop content.
beans_modify_action_callback( 'beans_loop_template', 'example_page' );

function example_page() {

    ?>
    <!-- Your HTML -->
    <?php

}

// Load the document which is always needed at the bottom of page templates.
beans_load_document();

Note that I set the layout to c which means fullwidth to prevent the sidebar(s) from loading. You will also notice that I removed some markup (as an example) used for the grid which aren't necessary in your case since your page is full width. You may have styling applied to the markup removed so I will let you adapt it according to your needs. Finally, I removed the uk-block class from the main div to remove the padding, again it may not but needed in your case but it is more for the example purpose.

Happy coding,