Fullwidth picture component with 100% Viewport Height option on the sample

modules/sample/sbmb.py

@@ -25,7 +25,15 @@ class main:
                 active_page = active_page
             ),
             components = {
-                "before" : [],
+                "before" : [
+                    Template(params["mako"]["website"]['fullpic']).render(
+                        title="Hello World",
+                        message="Welcome to CostaPy",
+                        image="https://picsum.photos/1600/900",
+                        height="calc(100vh - 56px)", # navbar height = 56px
+                        navbar=True
+                    )
+                ],
                 "after" : []
             },
             footer    = Template(params["mako"]["website"]['footer']).render(

templates/SBModernBiz/html/components/fullpic.html

@@ -1,6 +1,6 @@
-<header class="py-5 bg-image-full" style="background-image: url('https://source.unsplash.com/wfh8dDlNFOk/1600x900')">
-  <div class="text-center my-5">
-    <h1 class="text-white fs-3 fw-bolder">Full Width Pics</h1>
-    <p class="text-white-50 mb-0">Landing Page Template</p>
+<header class="py-5 d-flex align-items-center justify-content-center" style="background-image: url('${image}'); height:${height}; margin-top:${'56px' if navbar else '0'}; ">
+  <div class="text-center">
+    <h1 class="text-white h1 fw-bolder">${title}</h1>
+    <p class="text-white-50 mb-0">${message}</p>
   </div>
 </header>