Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support custom card ratio #547

Merged
merged 3 commits into from Oct 10, 2023
Merged

Support custom card ratio #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efac0a7
Move color of card icon to stylesheet
markdumay Oct 10, 2023
928e355
Support configurable thumbnail ratio
markdumay Oct 10, 2023
7920512
Merge branch 'main' into taxonomy
markdumay Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/scss/components/_card.scss
View file
Open in desktop
Expand Up @@ -15,6 +15,10 @@
width: 100%;
}

.card-icon {
color: $secondary;
}

.card-zoom::after .card-img-wrap img {
content: "";
position: absolute;
Expand Down
6 changes: 5 additions & 1 deletion layouts/partials/assets/card-group.html
View file
Open in desktop
Expand Up @@ -31,6 +31,8 @@
"footer" Optional footer components of the card, displayed in small caps. Supported values are "full",
"publication", "tags", and "none" (default).
"orientation" Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
"ratio" Optional ratio of the thumbnail image, defaults to "16x9" (stacked orientation) or "1x1" (horizontal
orientation).
-->

{{- $page := .page -}}
Expand Down Expand Up @@ -139,7 +141,8 @@
{{- $header := .header -}}
{{- $footer := .footer -}}
{{- $orientation := .orientation -}}
{{- $wrapper := .wrapper | default "p-4 px-xxl-0" -}}
{{- $ratio := .ratio -}}
{{- $wrapper := .wrapper | default "p-0" -}}

{{- if and (eq $cols 1) (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}

Expand All @@ -153,6 +156,7 @@
"header" $header
"footer" $footer
"orientation" $orientation
"ratio" $ratio
) -}}
{{- $params = merge $params $element }}

Expand Down
15 changes: 9 additions & 6 deletions layouts/partials/assets/card.html
View file
Open in desktop
Expand Up @@ -18,6 +18,8 @@
"publication", "tags", and "none" (default).
"description" Optional description of the card.
"thumbnail" Optional thumbnail image url, displayed on top or the left of the card.
"ratio" Optional ratio of the thumbnail image, defaults to "16x9" (stacked orientation) or "1x1" (horizontal
orientation).
"alt" Optional alternate text for the thumbnail, uses "title" by default.
"icon" Optional Font Awesome icon, displayed on top or the left of the card.
"orientation" Optional placecement of the thumbnail or icon, either "stacked" (default), "horizontal",
Expand Down Expand Up @@ -88,6 +90,7 @@
{{- $href := .href -}}
{{- $description := .description -}}
{{- $thumbnail := .thumbnail -}}
{{- $ratio := .ratio -}}
{{- $icon := .icon -}}

{{- $color := "" -}}
Expand Down Expand Up @@ -149,10 +152,10 @@
<div class="row g-0 row-cols-1 h-100">
<div class="col-4{{ if eq $orientation "horizontal-sm" }} col-md-2{{ end }}">
{{- if $thumbnail -}}
{{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
{{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
{{- else if $icon -}}
<div class="p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
{{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid text-secondary fa-fw" $icon)) -}}
<div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
{{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid fa-fw" $icon)) -}}
</div>
{{- end -}}
</div>
Expand All @@ -170,10 +173,10 @@
{{- else -}}
<div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
{{- if $thumbnail -}}
{{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" (or $alt $title)) -}}
{{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" (or $alt $title)) -}}
{{- else if $icon -}}
<div class="p-{{ $padding }}">
{{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
<div class="card-icon p-{{ $padding }}">
{{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x" $icon)) -}}
</div>
{{- end -}}
<div class="card-body d-flex flex-column p-{{ $padding }}">
Expand Down