refactor group page

* process group images
* better layout
* hero promo adjustment

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>

content/groups/_index.md

@@ -1,9 +1,11 @@
 ---
 title: 'Workgroup Overview'
-date: 2021-03-06
+image: promo.jpg
+promo:
+  header: Our Working Groups
+  p:
+    - A <strong>Technical Workgroup (TWG)</strong> is a workgroup that provides technical specifications and will help define next-generation of the specifications, definitions, and the compliance of these specifications with primary output being specification documents.
+    - A <strong>Special Integration Group (SIG)</strong> is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs. A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
+date: 2022-01-03
 draft: false
-
-promo-h1: Our Working Groups
-promo-p1: A <strong>Technical Workgroup (TWG)</strong> is a workgroup that provides technical specifications and will help define next-generation of the specifications, definitions, and the compliance of these specifications with primary output being specification documents.
-promo-p2: A <strong>Special Integration Group (SIG)</strong> is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs. A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
 ---

themes/openpowerfoundation/assets/css/groups.scss

@@ -5,12 +5,10 @@ main {
       padding-top:50px;
       padding-bottom: 40px;
     }
-
     @media screen and (min-width: $lg) and (max-width: $xl) {
       padding-top:70px;
       padding-bottom: 40px;
     }
-
     @media screen and (min-width: $xl) {
       padding-bottom: 50px;
     }

themes/openpowerfoundation/layouts/groups/list.html

@@ -1,11 +1,23 @@
 {{ partial "header.html" . }}
-
 {{ partial "navbar.html" . }}
-
+{{ $promobackgroundimagename := .Param "image" }}
-{{ partial "groups-promo.html" . }}
+{{ $promobackgroundimagelocation := (printf "%s/%s" "images/groups/" $promobackgroundimagename) }}
-
+{{ $promobackgroundimageresource := resources.Get $promobackgroundimagelocation }}
-	<main id="main" class="main groups">
+{{ $promobackgroundimage := $promobackgroundimageresource.Resize "1440x820 webp" }}
-		<div class="container">
+<section class="promo__section groups d-flex" style="background-image:url({{ $promobackgroundimage.RelPermalink }})">
+<div class="promo__container container">
+	<div class="d-flex justify-content-start">
+		<div class="promo-wrapper p-3 p-lg-0">
+			<h1>{{ .Param "promo.header" }}</h1>
+			{{ range (.Param "promo.p") }}
+				<p>{{ . | safeHTML }}</p>
+			{{ end }}
+		</div>
+	</div>
+</div>
+</section>
+<main id="main" class="main groups">
+<div class="container">
 	<div class="row">
 	{{ range (.Data.Pages.ByParam "wgtype").Reverse }}
 		{{ $imagename := .Param "image" }}
@@ -14,82 +26,14 @@
 		<article class="post__article col-md-4">
 			{{ if $imageresource }}
 			<div class="post__thumb">
-						{{ $image := $imageresource.Fit "390x390" }}				
+				{{ $image := $imageresource.Fit "390x390 webp" }}
 				<img class="img-fluid" src="{{  $image.RelPermalink }}" width="390" height="390" alt="">
 			</div>
 			{{ end }}
-				
 			<a class="post__title btn btn-outline-primary" href="{{ .Permalink }}">{{ .Title }}</a>
 		</article>
-
-		{{ end }}
-				<!-- <article class="post__article col-md-4">
-					<div class="post__thumb"><img class="img-fluid" src="../img/thumb-1.jpg" width="390" height="390" alt="">
-					</div><a class="post__title" href="/">Libre BMC</a>
-				</article>
-				<article class="post__article col-md-4">
-					<div class="post__thumb"><img class="img-fluid" src="../img/thumb-2.jpg" width="390" height="390" alt="">
-					</div><a class="post__title" href="/">Libre BMC</a>
-				</article>
-				<article class="post__article col-md-4">
-					<div class="post__thumb"><img class="img-fluid" src="../img/thumb-3.jpg" width="390" height="390" alt="">
-					</div><a class="post__title" href="/">Libre BMC</a>
-				</article>
-				<article class="post__article col-md-4">
-					<div class="post__thumb"><img class="img-fluid" src="../img/thumb-1.jpg" width="390" height="390" alt="">
-					</div><a class="post__title" href="/">Libre BMC</a>
-				</article>
-				<article class="post__article col-md-4">
-					<div class="post__thumb"><img class="img-fluid" src="../img/thumb-2.jpg" width="390" height="390" alt="">
-					</div><a class="post__title" href="/">Libre BMC</a>
-				</article>
-				<article class="post__article col-md-4">
-					<div class="post__thumb"><img class="img-fluid" src="../img/thumb-3.jpg" width="390" height="390" alt="">
-					</div><a class="post__title" href="/">Libre BMC</a>
-				</article> -->
-			</div>
-		</div>
-	</main>
-<!-- <main id="main">
-
-<section id="more-features" class="section-bg">
-	<div class="container-fluid">
-		<div class="section-header">
-			<h3 class="section-title">{{ .Title }}</h3>
-			<span class="section-divider"></span>
-
-		</div>
-		{{ if .Content }}
-		<div class="row">
-			<div class="col-lg-2">&nbsp;</div>
-			<div class="col-lg-8">
-				<p class="section-description">{{ .Content }}</p>
-			</div>
-			<div class="col-lg-2">&nbsp;</div>
-		</div>
 	{{ end }}
-		<div class="row">&nbsp;</div>
-		<div class="row">
-		{{ range (.Data.Pages.ByParam "wgtype").Reverse }}
-			{{ $color := "transparent" }}
-			{{ $data := index $.Site.Data }}
-			{{ $wgtype := .Param "wgtype" }}
-			{{ range $data.workgroups }}
-				{{ if eq $wgtype .id }}
-					{{ $color = .color }}
-				{{ end }}
-			{{ end }}
-			<div class="col-lg-4">
-				<div class="box wow fadeInBottom" style="border: 2px solid {{ $color }};">
-					<h4 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
-					<p class="description">{{ .Summary }}</p>
 	</div>
-			</div>
+</div>
-		{{ end }}
+</main>
-		</div>
-	</div>
-</section>
-
-</main> -->
-
 {{ partial "footer.html" . }}

themes/openpowerfoundation/layouts/groups/single.html

@@ -1,9 +1,6 @@
 {{ partial "header.html" . }}
-
 {{ partial "navbar.html" . }}
-
 <main id="main">
-
 <section id="workgroupsingle">
 	<div id="workgroupsingle" class="container-fluid">
 		<div class="section-header">
@@ -133,7 +130,5 @@
 		</div>
 	</div>
 </section>
-
 </main>
-
 {{ partial "footer.html" . }}

themes/openpowerfoundation/layouts/partials/groups-promo.html

@@ -1,12 +0,0 @@
-<section class="promo__section groups d-flex"
-  style="background-image:url(../img/promo-1.jpg)">
-  <div class="promo__container container">
-    <div class="d-flex justify-content-start">
-      <div class="promo-wrapper p-3 p-lg-0">
-        <h1>{{ .Param "promo-h1" }}</h1>
-        <p>{{ .Param "promo-p1" | safeHTML }}</p>
-        <p>{{ .Param "promo-p2" | safeHTML }}</p>
-      </div>
-    </div>
-  </div>
-</section>