feat: migrate Portfolio widget to unified view system

See https://wowchemy.com/docs/getting-started/page-builder/#view

Close #2557

wowchemy/layouts/partials/functions/render_view.html

@@ -7,14 +7,16 @@
 {{ $view_dtype :=  printf "%T" $view }}
 {{ $index := .index }}
 
-{{if eq $view_dtype "int" }}
+{{if eq $view_dtype "int" | or (eq $view_dtype "int64") }}
   {{/* Support legacy numeric views 1-4 */}}
   {{ if eq $view 1 }}
-    {{ $view_file = "list"  }}
+    {{ $view_file = "list" }}
   {{ else if eq $view 3 }}
-    {{ $view_file = "card"  }}
+    {{ $view_file = "card" }}
   {{ else if eq $view 4 }}
-    {{ $view_file = "citation"  }}
+    {{ $view_file = "citation" }}
+  {{ else if eq $view 5 }}
+    {{ $view_file = "showcase" }}
   {{ else }}
     {{ $view_file = "compact" }}
   {{ end }}

wowchemy/layouts/partials/portfolio_li_card.html

@@ -1,44 +0,0 @@
-{{ $item := .item }}
-{{ $widget := .widget }}
-{{ $link := .link }}
-{{ $target := .target }}
-{{ $has_attachments := partial "functions/has_attachments" $item }}
-
-{{/* Get summary. */}}
-{{ $summary := "" }}
-{{ if $item.Params.summary }}
-  {{ $summary = $item.Params.summary | markdownify | emojify }}
-{{ else if .Params.abstract }}
-  {{ $summary = .Params.abstract | markdownify | emojify | truncate (site.Params.abstract_length | default 135) }}
-{{ else if $item.Summary }}
-  {{ $summary = $item.Summary }}
-{{ end }}
-
-{{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
-{{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
-
-<div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
-  <div class="card">
-    {{ with $resource }}
-    {{ $image := .Resize "550x" }}
-    <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
-      <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive" loading="lazy">
-    </a>
-    {{ end }}
-    <div class="card-text">
-      <h4><a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{ $item.Title | markdownify | emojify }}</a></h4>
-
-      {{ with $summary }}
-      <div class="article-style">
-        <p>{{ . }}</p>
-      </div>
-      {{ end }}
-
-      {{ if $has_attachments }}
-      <div class="btn-links">
-        {{ partial "page_links" (dict "page" $item "is_list" 1) }}
-      </div>
-      {{ end }}
-    </div>
-  </div>
-</div>

wowchemy/layouts/partials/portfolio_li_compact.html

@@ -1,6 +0,0 @@
-{{ $item := .item }}
-{{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
-
-<div class="col-12 isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
-  {{ partial "li_compact" $item }}
-</div>

wowchemy/layouts/partials/portfolio_li_list.html

@@ -1,6 +0,0 @@
-{{ $item := .item }}
-{{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
-
-<div class="col-12 isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
-  {{ partial "li_list" $item }}
-</div>

wowchemy/layouts/partials/portfolio_li_showcase.html

@@ -1,61 +0,0 @@
-{{ $item := .item }}
-{{ $widget := .widget }}
-
-{{ $do_link := true }}
-{{ if $item.Params.external_link | or $item.Content }}
-  {{ $do_link = true }}
-{{ else }}
-  {{ $do_link = false }}
-{{ end }}
-
-{{ $link := .link }}
-{{ $target := .target }}
-
-{{/* Get summary. */}}
-{{ $summary := "" }}
-{{ if $item.Params.summary }}
-  {{ $summary = $item.Params.summary | markdownify | emojify }}
-{{ else if .Params.abstract }}
-  {{ $summary = .Params.abstract | markdownify | emojify }}
-{{ else if $item.Summary }}
-  {{ $summary = $item.Summary }}
-{{ end }}
-
-{{ $order := "" }}
-{{ if and ($widget.Params.design.flip_alt_rows | default true) (not (modBool .index 2)) }}
-  {{ $order = "order-md-2" }}
-{{ end }}
-
-{{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
-
-<div class="col-lg-12 project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
-  <div class="row align-items-center">
-    <div class="col-12 col-md-6">
-      <div class="section-subheading article-title mb-0 mt-0">
-        {{- if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end -}}
-        {{ $item.Title | markdownify | emojify }}
-        {{- if $do_link}}</a>{{end -}}
-      </div>
-
-      {{ with $summary }}
-      <div class="article-style">
-        {{ . }}
-      </div>
-      {{ end }}
-
-      <div class="btn-links">
-        {{ partial "page_links" (dict "page" $item "is_list" 0) }}
-      </div>
-
-    </div>
-    <div class="col-12 col-md-6 order-first {{$order}}">
-      {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
-      {{ with $resource }}
-      {{ $image := .Resize "540x" }}
-      {{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
-        <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" loading="lazy">
-      {{if $do_link}}</a>{{end}}
-      {{end}}
-    </div>
-  </div>
-</div>

wowchemy/layouts/partials/views/card.html

@@ -3,6 +3,13 @@
 {{/* Dynamic view adjusts to content type. */}}
 {{ $has_attachments := partial "functions/has_attachments" . }}
 
+{{ $link := $item.RelPermalink }}
+{{ $target := "" }}
+{{ if $item.Params.external_link }}
+  {{ $link = $item.Params.external_link }}
+  {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+{{ end }}
+
 {{/* Get summary. */}}
 {{ $summary := "" }}
 {{ if $item.Params.summary }}
@@ -38,17 +45,17 @@
   {{ $anchor := $item.Params.image.focal_point | default "Smart" }}
   {{ with $resource }}
   {{ $image := .Fill (printf "808x455 %s" $anchor) }}
-  <a href="{{ $item.RelPermalink }}">
+  <a href="{{ $link }}" {{ $target | safeHTMLAttr }}>
     <div class="img-hover-zoom"><img src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}" loading="lazy"></div>
   </a>
   {{end}}
 
   <div class="section-subheading article-title mb-1 mt-3">
-    <a href="{{ $item.RelPermalink }}">{{ $item.Title }}</a>
+    <a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{ $item.Title }}</a>
   </div>
 
   {{ with $summary }}
-  <a href="{{ $item.RelPermalink }}" class="summary-link">
+  <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="summary-link">
     <div class="article-style">
       <p>{{.}}</p>
     </div>

wowchemy/layouts/partials/views/masonry.html

@@ -0,0 +1,45 @@
+{{ $item := .item }}
+{{ $has_attachments := partial "functions/has_attachments" $item }}
+
+{{ $link := $item.RelPermalink }}
+{{ $target := "" }}
+{{ if $item.Params.external_link }}
+  {{ $link = $item.Params.external_link }}
+  {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+{{ end }}
+
+{{/* Get summary. */}}
+{{ $summary := "" }}
+{{ if $item.Params.summary }}
+  {{ $summary = $item.Params.summary | markdownify | emojify }}
+{{ else if .Params.abstract }}
+  {{ $summary = .Params.abstract | markdownify | emojify | truncate (site.Params.abstract_length | default 135) }}
+{{ else if $item.Summary }}
+  {{ $summary = $item.Summary }}
+{{ end }}
+
+{{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
+
+<div class="card">
+  {{ with $resource }}
+  {{ $image := .Resize "550x" }}
+  <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
+    <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive" loading="lazy">
+  </a>
+  {{ end }}
+  <div class="card-text">
+    <h4><a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{ $item.Title | markdownify | emojify }}</a></h4>
+
+    {{ with $summary }}
+    <div class="article-style">
+      <p>{{ . }}</p>
+    </div>
+    {{ end }}
+
+    {{ if $has_attachments }}
+    <div class="btn-links">
+      {{ partial "page_links" (dict "page" $item "is_list" 1) }}
+    </div>
+    {{ end }}
+  </div>
+</div>

wowchemy/layouts/partials/widgets/portfolio.html

@@ -5,6 +5,7 @@
 {{ $st := .page }}
 {{ $items_type := $st.Params.content.page_type | default "project" }}
 {{ $columns := $st.Params.design.columns | default "2" }}
+{{ $view := $st.Params.design.view | default "masonry" }}
 
 <div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
 
@@ -44,7 +45,7 @@
     {{ end }}
   {{ end }}
 
-  <div class="{{ if or $st.Params.content.filter_button (eq $st.Params.design.view 3) }}isotope projects-container{{end}} {{if eq $st.Params.design.view 3}}js-layout-masonry{{else}}row js-layout-row{{end}} {{ if eq $st.Params.design.view 5 }}project-showcase{{end}}">
+  <div class="{{ if or $st.Params.content.filter_button (in (slice "masonry" 3) $view) }}isotope projects-container{{end}} {{if in (slice "masonry" 3) $view}}js-layout-masonry{{else}}row js-layout-row{{end}} {{ if eq $view "showcase" }}project-showcase{{end}}">
 
     {{ $query := "" }}
     {{ if $st.Params.content.filters.tags }}
@@ -53,25 +54,16 @@
       {{ $query = where site.RegularPages "Type" $items_type }}
     {{ end }}
 
-    {{ range $idx, $item := $query }}
-
-      {{ $link := $item.RelPermalink }}
-      {{ $target := "" }}
-      {{ if $item.Params.external_link }}
-        {{ $link = $item.Params.external_link }}
-        {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
-      {{ end }}
-
-      {{ if eq $st.Params.design.view 1 }}
-        {{ partial "portfolio_li_list" (dict "item" $item) }}
-      {{ else if eq $st.Params.design.view 2 }}
-        {{ partial "portfolio_li_compact" (dict "item" $item) }}
-      {{ else if eq $st.Params.design.view 3 }}
-        {{ partial "portfolio_li_card" (dict "widget" $st "index" $idx "item" $item "link" $link "target" $target) }}
-      {{ else }}
-        {{ partial "portfolio_li_showcase" (dict "widget" $st "index" $idx "item" $item "link" $link "target" $target) }}
-      {{ end }}
+    {{ range $index, $item := $query }}
+      {{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
+        {{ if in (slice "masonry" 3) $view }}
+          <div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
+        {{else}}
+          <div class="col-12 isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
+        {{end}}
+        {{ partial "functions/render_view" (dict "page" $st "item" . "view" $view "index" $index) }}
+      </div>
+    {{end}}
 
-    {{ end }}
   </div>
 </div>