Add lead shortcode; make banner a full-bleed hero image
- lead: wraps content in a Bootstrap .lead paragraph (moved from the
ctsmockup site, where {.lead} could not target a paragraph).
- banner: resolves src as a page/global resource or base-URL-aware
link, and spans the full viewport width via symmetric
calc(50% - 50vw) margins while page content stays in .container.
Optional height crops via object-fit: cover. A banner that starts a
page's content is pulled flush against the navbar.
- html { overflow-x: hidden } to absorb the 100vw scrollbar overhang.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,36 @@
|
||||
{{ $src := .Get "src" }}
|
||||
{{ $alt := .Get "alt" }}
|
||||
{{ $title := .Get "title" }}
|
||||
<img class="banner img-fluid" src="{{ $src }}" alt="{{ $alt }}" title="{{ $title }}" width="100%">
|
||||
{{- /*
|
||||
Full-bleed banner / hero image.
|
||||
|
||||
The image spans the entire viewport width while the surrounding page
|
||||
content stays within `.container` (see the `.banner` rules in
|
||||
hugo_bootstrap_theme.scss). Place the shortcode as the first line of a
|
||||
page's content to get a hero that sits flush against the navbar.
|
||||
|
||||
Params:
|
||||
src image path - resolved as a page resource first, then a global
|
||||
resource (assets/), then treated as a link/URL respecting the
|
||||
site's base URL
|
||||
alt alternative text (default: empty)
|
||||
title optional title attribute
|
||||
height optional CSS length (e.g. "60vh"); crops the image with
|
||||
object-fit: cover
|
||||
class optional extra CSS classes
|
||||
*/ -}}
|
||||
{{- $src := .Get "src" -}}
|
||||
{{- $alt := or (.Get "alt") "" -}}
|
||||
{{- $title := .Get "title" -}}
|
||||
{{- $height := .Get "height" -}}
|
||||
{{- $class := .Get "class" -}}
|
||||
{{- $url := $src -}}
|
||||
{{- with $.Page.Resources.GetMatch $src -}}
|
||||
{{- $url = .RelPermalink -}}
|
||||
{{- else -}}
|
||||
{{- with resources.Get $src -}}
|
||||
{{- $url = .RelPermalink -}}
|
||||
{{- else -}}
|
||||
{{- $url = $src | relURL -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<img class="banner{{ with $class }} {{ . }}{{ end }}" src="{{ $url }}" alt="{{ $alt }}"
|
||||
{{- with $title }} title="{{ . }}"{{ end }}
|
||||
{{- with $height }} style="height:{{ . }};object-fit:cover"{{ end }}>
|
||||
|
||||
Reference in New Issue
Block a user