portfolio.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. {{/* Portfolio Widget */}}
  2. {{/* Initialise */}}
  3. {{ $ := .root }}
  4. {{ $st := .page }}
  5. {{ $items_type := $st.Params.content.page_type | default "project" }}
  6. {{ $columns := $st.Params.design.columns | default "2" }}
  7. {{ $view := $st.Params.design.view | default "masonry" }}
  8. <div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
  9. {{ with $st.Content }}{{ . }}{{ end }}
  10. {{ if $st.Params.content.filter_button }}
  11. {{ $filter_default := default (int $st.Params.content.filter_default) 0 }}
  12. {{/* Parse default filter tag from front matter in the form of either tag name or CSS class name. */}}
  13. {{ $default_filter_tag_raw := (index $st.Params.content.filter_button ($filter_default)).tag }}
  14. {{ $default_filter_tag := printf ".js-id-%s" (replace $default_filter_tag_raw " " "-") }}
  15. {{ if or (eq (substr $default_filter_tag_raw 0 1) "*") (eq (substr $default_filter_tag_raw 0 1) ".") }}
  16. {{ $default_filter_tag = $default_filter_tag_raw }}
  17. {{ end }}
  18. <span class="d-none default-project-filter">{{ $default_filter_tag }}</span>
  19. {{/* Only show filter buttons if there are multiple filters. */}}
  20. {{ if gt (len $st.Params.content.filter_button) 1 }}
  21. <div class="project-toolbar">
  22. <div class="project-filters">
  23. <div class="btn-toolbar {{if eq $columns "1"}}d-flex justify-content-center{{end}}">
  24. <div class="btn-group flex-wrap">
  25. {{ range $idx, $item := $st.Params.content.filter_button }}
  26. {{/* Parse filter tag from front matter in the form of either tag name or CSS class name. */}}
  27. {{ $data_filter := printf ".js-id-%s" (replace .tag " " "-") }}
  28. {{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
  29. {{ $data_filter = .tag }}
  30. {{ end }}
  31. <a href="#" data-filter="{{ $data_filter | safeHTMLAttr }}" class="btn btn-primary btn-lg{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
  32. {{ end }}
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. {{ end }}
  38. {{ end }}
  39. <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}}">
  40. {{ $query := "" }}
  41. {{ if $st.Params.content.filters.tags }}
  42. {{ $query = where site.Pages "Params.tags" "intersect" $st.Params.content.filters.tags }}
  43. {{ else }}
  44. {{ $query = where site.RegularPages "Type" $items_type }}
  45. {{ end }}
  46. {{ range $index, $item := $query }}
  47. {{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
  48. {{ if in (slice "masonry" 3) $view }}
  49. <div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
  50. {{else}}
  51. <div class="col-12 isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
  52. {{end}}
  53. {{ partial "functions/render_view" (dict "page" $st "item" . "view" $view "index" $index) }}
  54. </div>
  55. {{end}}
  56. </div>
  57. </div>