As explained in my original post above, 'pb_wrapper' is a technique to wrap each block's HTML with some valid header and footer HTML so as to render it in an acceptable manner in the IFRAMEs used by the PageBuilder.
When it came to finally using the output of the pagebuilder on the frontend, I used the same 'pb_wrapper' to render the header and footer HTML there too -
Although the technique is valid and it works, in hind sight, I realized that this caused confusion in some users (e.g. viewtopic.php?f=4&t=13603).
That is primarily because the header/footer code that is required on the frontend is often times vastly more complicated than that required in the IFRAMEs in the backend; trying to use the same Couch code to output very different HTML at the two places can be a difficult juggling act.
TBH, this is not an issue as using 'pb_wrapper' on the frontend is not mandatory - it is just that I got lazy and used it in my sample code which has given rise to this confusion.
In this post I'll try to show how one can, as is the forte of Couch, use any HTML on the frontend while using a different (usually simplified) HTML in the backend.
For that please allow me to try and illustrate exactly how the HTML of blocks and the header/footer of the pb_wrapper come together when rendered in the backend and how things are a little different when this happens on the frontend.
For this, assume we already have the pagebuilder configured with all the blocks and we are now using it to assemble a page by selecting three different blocks.
For our example, the HTML for the blocks in question will be ultra-simplified as follows -
HTML for the 'pb_wrapper' would be equally simple -
So now when Couch shows the pagebuilder in the admin-panel with these three blocks selected, it begins with three IFRAMEs -
It then puts each block in a separate IFRAME -
However, as seen in the code above, the HTML of the blocks are incomplete and will require valid header and footer HTML to render each properly in their respective IFRAMEs.
So next, it wraps each block's HTML with the HTML of the 'pb_wrapper' -
And that is the final code that shows up in the admin-panel.
Please note that the header/footer code from pb_wrapper gets duplicated three times above (but is fine because the code is isolated within IFRAMEs).
Now let us move on to outputting the contents of our pagebuilder on the frontend.
Let us use an ultra simplified template for this purpose that outputs nothing to begin with -
Let us add to it some code that outputs the contents of our pagebuilder -
The resulting HTML output would be this -
Please notice that code we used above has simply iterated through the three blocks selected in the pagebuilder and outputted their HTML.
Of course, this is not valid HTML and will require the addition of header/footer HTML to render properly.
Which brings us to the crux of the problem we are discussing.
One way of adding the missing header/footer code would be re-using the code we placed in the 'pb_wrapper' (and this the method I used in my original post) -
In the code above we collected the raw output of the pagebuilder and passed it on to 'pb_wrapper' which then wraps its own contents around it to output the following -
This is the final code that shows up on the frontend.
Please compare it to the final code outputted in the admin-panel we saw above and notice how this time the header/footer code is outputted just once.
Notice also how in the admin-panel the code of each block is 'chunked' into separate IFRAMEs whereas here the code of all blocks is concatenated and outputted as a single block.
So, although, visually the output in the admin-panel and the frontend appear quite similar, there are fundamental differences between how the code appears in both.
The output above is valid HTML and will display well on the frontend (assuming it does so in the admin-panel).
However, if you happen to require a different set of HTML for the header/footer on the frontend then you'll have to jump through hoops to modify the code in pb_wrapper.
Which brings me finally to the point that I set out to make -
to add the header/footer code we don't neccessarily have to go through the 'pb_wrapper'.
We can do that directly by just adding it ourselves.
To illustrate this second method, begin with the bare-bones code that outputs only the blocks HTML -
Next add the same code directly that the 'pb_wrapper' would have added -
This gives us exactly the same output as the first method.
Now that we can add the required header/footer code manually, nothing stops us from making the code whatever we desire e.g.
If desired, the added code could be moved into separate snippets which can then be used as follows -
Hope this explanation helps.
When it came to finally using the output of the pagebuilder on the frontend, I used the same 'pb_wrapper' to render the header and footer HTML there too -
- Code: Select all
<cms:capture into='pb_tile_content' > <cms:show_pagebuilder 'main_pb'> <cms:show k_content /> </cms:show_pagebuilder> </cms:capture> <cms:render 'pb_wrapper' 'page' />
Although the technique is valid and it works, in hind sight, I realized that this caused confusion in some users (e.g. viewtopic.php?f=4&t=13603).
That is primarily because the header/footer code that is required on the frontend is often times vastly more complicated than that required in the IFRAMEs in the backend; trying to use the same Couch code to output very different HTML at the two places can be a difficult juggling act.
TBH, this is not an issue as using 'pb_wrapper' on the frontend is not mandatory - it is just that I got lazy and used it in my sample code which has given rise to this confusion.
In this post I'll try to show how one can, as is the forte of Couch, use any HTML on the frontend while using a different (usually simplified) HTML in the backend.
For that please allow me to try and illustrate exactly how the HTML of blocks and the header/footer of the pb_wrapper come together when rendered in the backend and how things are a little different when this happens on the frontend.
For this, assume we already have the pagebuilder configured with all the blocks and we are now using it to assemble a page by selecting three different blocks.
For our example, the HTML for the blocks in question will be ultra-simplified as follows -
- Code: Select all
<div class="block_1"> ... </div>
- Code: Select all
<div class="block_2"> ... </div>
- Code: Select all
<div class="block_3"> ... </div>
HTML for the 'pb_wrapper' would be equally simple -
- Code: Select all
<html> <head> ... </head> <body> <cms:show pb_tile_content /> </body> </html>
So now when Couch shows the pagebuilder in the admin-panel with these three blocks selected, it begins with three IFRAMEs -
- 00.png (963 Bytes) Viewed 894 times
- Code: Select all
<iframe ..> </iframe> <iframe ..> </iframe> <iframe ..> </iframe>
It then puts each block in a separate IFRAME -
- 01.png (4.32 KiB) Viewed 894 times
- Code: Select all
<iframe ..> <div class="block_1"> ... </div> </iframe> <iframe ..> <div class="block_2"> ... </div> </iframe> <iframe ..> <div class="block_3"> ... </div> </iframe>
However, as seen in the code above, the HTML of the blocks are incomplete and will require valid header and footer HTML to render each properly in their respective IFRAMEs.
So next, it wraps each block's HTML with the HTML of the 'pb_wrapper' -
- 02.png (5.74 KiB) Viewed 894 times
- Code: Select all
<iframe ..> <html> <head> ... </head> <body> <div class="block_1"> ... </div> </body> </html> </iframe> <iframe ..> <html> <head> ... </head> <body> <div class="block_2"> ... </div> </body> </html> </iframe> <iframe ..> <html> <head> ... </head> <body> <div class="block_3"> ... </div> </body> </html> </iframe>
And that is the final code that shows up in the admin-panel.
Please note that the header/footer code from pb_wrapper gets duplicated three times above (but is fine because the code is isolated within IFRAMEs).
Now let us move on to outputting the contents of our pagebuilder on the frontend.
Let us use an ultra simplified template for this purpose that outputs nothing to begin with -
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Home Page' clonable='0'> </cms:template> <?php COUCH::invoke(); ?>
Let us add to it some code that outputs the contents of our pagebuilder -
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Home Page' clonable='0'> </cms:template> <cms:show_pagebuilder 'main_pb'> <cms:show k_content /> </cms:show_pagebuilder> <?php COUCH::invoke(); ?>
The resulting HTML output would be this -
- Code: Select all
<div class="block_1"> ... </div> <div class="block_2"> ... </div> <div class="block_3"> ... </div>
- 03.png (3.74 KiB) Viewed 894 times
Please notice that code we used above has simply iterated through the three blocks selected in the pagebuilder and outputted their HTML.
Of course, this is not valid HTML and will require the addition of header/footer HTML to render properly.
Which brings us to the crux of the problem we are discussing.
One way of adding the missing header/footer code would be re-using the code we placed in the 'pb_wrapper' (and this the method I used in my original post) -
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Home Page' clonable='0'> </cms:template> <cms:capture into='pb_tile_content' > <cms:show_pagebuilder 'main_pb'> <cms:show k_content /> </cms:show_pagebuilder> </cms:capture> <cms:render 'pb_wrapper' 'page' /> <?php COUCH::invoke(); ?>
In the code above we collected the raw output of the pagebuilder and passed it on to 'pb_wrapper' which then wraps its own contents around it to output the following -
- 04.png (4.51 KiB) Viewed 894 times
- Code: Select all
<html> <head> ... </head> <body> <div class="block_1"> ... </div> <div class="block_2"> ... </div> <div class="block_3"> ... </div> </body> </html>
This is the final code that shows up on the frontend.
Please compare it to the final code outputted in the admin-panel we saw above and notice how this time the header/footer code is outputted just once.
Notice also how in the admin-panel the code of each block is 'chunked' into separate IFRAMEs whereas here the code of all blocks is concatenated and outputted as a single block.
So, although, visually the output in the admin-panel and the frontend appear quite similar, there are fundamental differences between how the code appears in both.
The output above is valid HTML and will display well on the frontend (assuming it does so in the admin-panel).
However, if you happen to require a different set of HTML for the header/footer on the frontend then you'll have to jump through hoops to modify the code in pb_wrapper.
Which brings me finally to the point that I set out to make -
to add the header/footer code we don't neccessarily have to go through the 'pb_wrapper'.
We can do that directly by just adding it ourselves.
To illustrate this second method, begin with the bare-bones code that outputs only the blocks HTML -
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Home Page' clonable='0'> </cms:template> <cms:show_pagebuilder 'main_pb'> <cms:show k_content /> </cms:show_pagebuilder> <?php COUCH::invoke(); ?>
Next add the same code directly that the 'pb_wrapper' would have added -
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Home Page' clonable='0'> </cms:template> <html> <head> ... </head> <body> <cms:show_pagebuilder 'main_pb'> <cms:show k_content /> </cms:show_pagebuilder> </body> </html> <?php COUCH::invoke(); ?>
- 05.png (4.51 KiB) Viewed 894 times
This gives us exactly the same output as the first method.
Now that we can add the required header/footer code manually, nothing stops us from making the code whatever we desire e.g.
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Home Page' clonable='0'> </cms:template> <!DOCTYPE html> <html> <head> <title>Covers</title> <link rel="stylesheet" href="assets/css/style.css" /> <script src="assets/js/script.js"></script> ... </head> <body> <div id="el-page-container"> <div id="el-page"> <cms:show_pagebuilder 'main_pb'> <cms:show k_content /> </cms:show_pagebuilder> <script>...</script> </div> </div> </body> </html> <?php COUCH::invoke(); ?>
If desired, the added code could be moved into separate snippets which can then be used as follows -
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Home Page' clonable='0'> </cms:template> <cms:embed 'header.html' /> <cms:show_pagebuilder 'main_pb'> <cms:show k_content /> </cms:show_pagebuilder> <cms:embed 'footer.html' /> <?php COUCH::invoke(); ?>
Hope this explanation helps.
You work very hard at this and it shows in a high-quality product.