mirror of
https://github.com/gcushen/hugo-academic.git
synced 2025-07-26 03:00:50 +02:00
feat: add support for Figure image theme and max_width
New options:
`theme="light"` inverts image when browsing in dark mode
`theme="dark"` inverts image when browsing in light mode
`max_width="300px"` sets an image max width
Also, improves use of Figure in `{{%` Markdown shortcodes (e.g. Callout) by further stripping HTML indentation.
This commit is contained in:
George Cushen
parent
e27cbaca79
commit
0c48d88d80
3 changed files with 137 additions and 109 deletions
|
|
@ -196,85 +196,6 @@ a:focus {
|
|||
color: $sta-dark-link-hover;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
audio {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.img-responsive {
|
||||
/* Extend Bootstrap declaration with centering. */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Hide overflowing of zoomed child img element */
|
||||
.img-hover-zoom {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Smooth transition for image zoom on hover */
|
||||
.img-hover-zoom img {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Transform the image scale when container gets hovered */
|
||||
.img-hover-zoom:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// Center all figure images by default.
|
||||
figure {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
figure img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
flex-basis: 100%;
|
||||
// Safari fix for responsive aspect ratio issue when `height: auto` set with flex parent.
|
||||
// See https://stackoverflow.com/a/61196907
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
// Center all figure captions by default.
|
||||
figcaption {
|
||||
display: block;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 1.65rem;
|
||||
line-height: 1.4;
|
||||
font-size: 0.76rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figcaption.numbered::before {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
content: attr(data-pre) counter(captions) attr(data-post);
|
||||
}
|
||||
|
||||
figcaption.numbered {
|
||||
counter-increment: captions;
|
||||
}
|
||||
|
||||
// Dynamically theme SVGs
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: $sta-font-mono, monospace;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,102 @@
|
|||
img,
|
||||
video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
audio {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.img-responsive {
|
||||
/* Extend Bootstrap declaration with centering. */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Image zoom on hover for previews.
|
||||
**************************************************/
|
||||
|
||||
/* Hide overflowing of zoomed child img element */
|
||||
.img-hover-zoom {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Smooth transition for image zoom on hover */
|
||||
.img-hover-zoom img {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Transform the image scale when container gets hovered */
|
||||
.img-hover-zoom:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Figures
|
||||
**************************************************/
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
.figure-img-wrap {
|
||||
flex-basis: 100%;
|
||||
// Safari fix for responsive aspect ratio issue when `height: auto` set with flex parent.
|
||||
// See https://stackoverflow.com/a/61196907
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Center all figure captions by default.
|
||||
figcaption {
|
||||
flex-basis: 100%; // Appear on row beneath image.
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 1.65rem;
|
||||
line-height: 1.4;
|
||||
font-size: 0.76rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figcaption.numbered::before {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
content: attr(data-pre) counter(captions) attr(data-post);
|
||||
}
|
||||
|
||||
figcaption.numbered {
|
||||
counter-increment: captions;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Dynamic theming.
|
||||
**************************************************/
|
||||
|
||||
// Dynamically theme `img`
|
||||
.dark .img-light,
|
||||
body:not(.dark) .img-dark {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
// Dynamically theme inline `svg`
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Image zooming.
|
||||
**************************************************/
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
{{ $zoom := eq (.Get "lightbox" | default "true") "true" }}
|
||||
{{ $id := anchorize (.Get "id" | default ($caption | plainify)) }}
|
||||
{{ $alt := .Get "alt" | default ($caption | plainify) }}
|
||||
{{ $img_class := "" }}
|
||||
{{ if eq (.Get "theme" | lower) "light" }}{{ $img_class = printf "%s img-light" $img_class }}{{end}}
|
||||
{{ if eq (.Get "theme" | lower) "dark" }}{{ $img_class = printf "%s img-dark" $img_class }}{{end}}
|
||||
|
||||
{{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
|
||||
{{- if not $img -}}
|
||||
|
|
@ -15,37 +18,42 @@
|
|||
{{- end -}}
|
||||
|
||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ . }}"{{ end }}>
|
||||
<div class="figure-img-wrap" {{ with .Get "max_width" }}style="max-width: {{.}}"{{end}}>
|
||||
{{- if $img -}}
|
||||
{{ $isSVG := eq $img.MediaType.SubType "svg" }}
|
||||
{{ if $isSVG -}}
|
||||
<img alt="{{ $alt }}"
|
||||
src="{{ $img.RelPermalink }}"
|
||||
loading="lazy"
|
||||
{{- if $zoom }} data-zoomable{{end}}
|
||||
{{- with .Get "width" }} width="{{.}}"{{end}}
|
||||
{{- with .Get "height" }} height="{{.}}"{{end}}
|
||||
{{- with $img_class }} class="{{.}}"{{end}} />
|
||||
{{- else }}
|
||||
{{- $img_lg := $img.Fit "1200x1200" -}}
|
||||
{{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
|
||||
{{- $img_sm := $img_md.Fit "400x400" -}}
|
||||
{{- $width := (.Get "width") | default $img_md.Width -}}
|
||||
{{- $height := (.Get "height") | default $img_md.Height -}}
|
||||
<img alt="{{ $alt }}" srcset="
|
||||
{{ $img_sm.RelPermalink }} 400w,
|
||||
{{ $img_md.RelPermalink }} 760w,
|
||||
{{ $img_lg.RelPermalink }} 1200w"
|
||||
src="{{ $img_sm.RelPermalink }}"
|
||||
width="{{ $width }}"
|
||||
height="{{ $height }}"
|
||||
loading="lazy"
|
||||
{{- if $zoom }} data-zoomable{{end}}
|
||||
{{- with $img_class }} class="{{.}}"{{end}} />
|
||||
{{- end }}
|
||||
{{- else -}}
|
||||
<img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
|
||||
{{- with .Get "width" }} width="{{.}}"{{end}} {{- with .Get "height" }} height="{{.}}"{{end}}
|
||||
{{- with $img_class }} class="{{.}}"{{end}} />
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
{{- if $img -}}
|
||||
{{ $isSVG := eq $img.MediaType.SubType "svg" }}
|
||||
{{ if $isSVG -}}
|
||||
<img alt="{{ $alt }}"
|
||||
src="{{ $img.RelPermalink }}"
|
||||
loading="lazy"
|
||||
{{ if $zoom }}data-zoomable{{end}}
|
||||
{{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
|
||||
{{- else }}
|
||||
{{- $img_lg := $img.Fit "1200x1200" -}}
|
||||
{{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
|
||||
{{- $img_sm := $img_md.Fit "400x400" -}}
|
||||
{{- $width := (.Get "width") | default $img_md.Width -}}
|
||||
{{- $height := (.Get "height") | default $img_md.Height -}}
|
||||
<img alt="{{ $alt }}" srcset="
|
||||
{{ $img_sm.RelPermalink }} 400w,
|
||||
{{ $img_md.RelPermalink }} 760w,
|
||||
{{ $img_lg.RelPermalink }} 1200w"
|
||||
src="{{ $img_sm.RelPermalink }}"
|
||||
width="{{ $width }}"
|
||||
height="{{ $height }}"
|
||||
loading="lazy"
|
||||
{{ if $zoom }}data-zoomable{{end}} />
|
||||
{{- end }}
|
||||
{{- else -}}
|
||||
<img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
|
||||
{{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
|
||||
{{- end -}}
|
||||
|
||||
{{ if $caption }}
|
||||
{{- if $caption -}}
|
||||
{{/* Localize the figure numbering (if enabled). */}}
|
||||
{{- $figure := split (i18n "figure" | default "Figure %d:") "%d" -}}
|
||||
<figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{- trim (index $figure 0) " " -}} " data-post="{{ index $figure 1 }} " class="numbered"{{ end }}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue