better layout for steering committee

* add member logo
* better headshot
* align columns
* process all images to webp

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
jamesk-patch-1
Toshaan Bharvani 3 years ago
parent 9870ca3013
commit a8dae18879

@ -1,34 +1,27 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}

{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}

<main id="main"> <main id="main">

<section id="steeringcomittee"> <section id="steeringcomittee">
<div class="container-fluid"> <div class="container-fluid">
<div class="section-header col-lg-8 offset-lg-2"> <div class="section-header col-lg-8 offset-lg-2">
<h1 class="section-title text-center">{{ .Title }}</h1> <h1 class="section-title text-center">{{ .Title }}</h1>
<span class="section-divider"></span>
<p class="section-description">{{ .Content }}</p> <p class="section-description">{{ .Content }}</p>
</div> </div>
<div class="row"> <div class="row">
{{ range .Data.Pages.ByWeight }} {{ range .Data.Pages.ByWeight }}
<article class="post__article bg col-10 offset-1 row mb-4 mb-lg-0 pt-4"> <article class="post__article bg col-10 offset-1 row mb-4 mb-lg-0 pt-4">
<div id="person"> <div id="person">
<div class="row"> <div class="row">
<div class="col-lg-2"></div> <div class="col-lg-4"></div>
<div class="col-lg-8"> <div class="col-lg-6">
<h2>{{ .Title }}</h2> <h2>{{ .Title }}</h2>
({{ .Param "position" }}) <h3>{{ .Param "position" }}</h3>
</div> </div>
</div> <div class="col-lg-2 personmember">
<div id="person-header"> {{ $personfile := .File.BaseFileName }}
<div class="row"> {{ range where .Site.RegularPages "Section" "persons" }}
{{ $personfile := .File.BaseFileName }}
{{ range where .Site.RegularPages "Section" "persons" }}
{{ $person := .File.BaseFileName }} {{ $person := .File.BaseFileName }}
{{ if eq $personfile $person }} {{ if eq $personfile $person }}
<div class="col-lg-2" id="member">
{{ $member := .Param "member" }} {{ $member := .Param "member" }}
{{ range where .Site.RegularPages "Section" "members" }} {{ range where .Site.RegularPages "Section" "members" }}
{{ $membercompany := .File.BaseFileName }} {{ $membercompany := .File.BaseFileName }}
@ -36,9 +29,9 @@
<a href="{{ .Permalink }}"> <a href="{{ .Permalink }}">
{{ if .Param "image" }} {{ if .Param "image" }}
{{ $imagename := .Param "image" }} {{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/members/" $imagename) }} {{ $imagelocation := (printf "%s/%s" "/images/members/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }} {{ $imageresource := resources.Get $imagelocation }}
{{ $image := $imageresource.Fit "100x100 webp" }} {{ $image := $imageresource.Fit "150x150 webp" }}
<img src="{{ $image.RelPermalink }}" alt="{{ .Title }}" title="{{ .Title }}"> <img src="{{ $image.RelPermalink }}" alt="{{ .Title }}" title="{{ .Title }}">
{{ else }} {{ else }}
{{ .Title }} {{ .Title }}
@ -46,16 +39,15 @@
</a> </a>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-2"> <div class="col-lg-4">
{{ if .Param "image" }} {{ if .Param "image" }}
{{ $imagename := .Param "image" }} {{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/persons/" $imagename) }} {{ $imagelocation := (printf "%s/%s" "images/persons/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }} {{ $imageresource := resources.Get $imagelocation }}
{{ $image := $imageresource.Fit "200x400" }} {{ $image := $imageresource.Fit "200x400 webp" }}
<img src="{{ $image.RelPermalink }}" alt="{{ .Title }}"> <img src="{{ $image.RelPermalink }}" alt="{{ .Title }}">
{{ else }} {{ else }}
&nbsp; &nbsp;
@ -77,48 +69,48 @@
{{ $chairfile := printf "%s/%s" "persons" . }} {{ $chairfile := printf "%s/%s" "persons" . }}
{{ with $.Site.GetPage $chairfile }} {{ with $.Site.GetPage $chairfile }}
<article class="post__article col-10 offset-1 row mb-4 pt-4 pb-4"> <article class="post__article col-10 offset-1 row mb-4 pt-4 pb-4">
<div id="person"> <div id="person">
<div id="person-header"> <div class="row">
<div class="row"> <div class="col-lg-4"></div>
<div class="col-12" id="member"> <div class="col-lg-6">
{{ $member := .Param "member" }} <h2>{{ .Title }}</h2>
{{ range where .Site.RegularPages "Section" "members" }} <h3>{{ $wgname }}</h3>
{{ $membercompany := .File.BaseFileName }}
{{ if eq $member $membercompany }}
<a href="{{ .Permalink }}">
{{ if .Param "image" }}
{{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/members/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }}
{{ $image := $imageresource.Fit "100x100 webp" }}
<img src="{{ $image.RelPermalink }}" alt="{{ .Title }}" title="{{ .Title }}">
{{ else }}
{{ .Title }}
{{ end }}
</a>
{{ end }}
{{ end }}
</div>
</div>
</div> </div>
<div class="row"> <div class="col-2 personmember">
<div class="col-lg-2"> {{ $member := .Param "member" }}
{{ range where .Site.RegularPages "Section" "members" }}
{{ $membercompany := .File.BaseFileName }}
{{ if eq $member $membercompany }}
<a href="{{ .Permalink }}">
{{ if .Param "image" }} {{ if .Param "image" }}
{{ $imagename := .Param "image" }} {{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/persons/" $imagename) }} {{ $imagelocation := (printf "%s/%s" "images/members/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }} {{ $imageresource := resources.Get $imagelocation }}
{{ $image := $imageresource.Fit "100x400 webp" }} {{ $image := $imageresource.Fit "150x150 webp" }}
<img src="{{ $image.RelPermalink }}" alt="{{ .Title }}"> <img src="{{ $image.RelPermalink }}" alt="{{ .Title }}" title="{{ .Title }}">
{{ else }} {{ else }}
&nbsp; {{ .Title }}
{{ end }} {{ end }}
</div> </a>
<div class="col-lg-8"> {{ end }}
<h2>{{ .Title }}</h2> ({{ $wgname }}) {{ end }}
{{ .Content }}
</div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-lg-4">
{{ if .Param "image" }}
{{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/persons/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }}
{{ $image := $imageresource.Fit "200x400 webp" }}
<img src="{{ $image.RelPermalink }}" alt="{{ .Title }}">
{{ else }}
&nbsp;
{{ end }}
</div>
<div class="col-lg-8">{{ .Content }}</div>
</div>
</div>
</article> </article>
{{ end }} {{ end }}
{{ end }} {{ end }}
@ -126,7 +118,5 @@
</div> </div>
</div> </div>
</section> </section>

</main> </main>

{{ partial "footer.html" . }} {{ partial "footer.html" . }}

Loading…
Cancel
Save