Add 'align' option to figure shortcode (#256)

Usage: 

{{< figure align=center src="image.jpg" >}}

Parameter values:
  - 'center': align image and captions to center of page
  - anything else neglected

* Appends "#center" to the image's URL in order to utilize existing CSS
rules for centering images.
This commit is contained in:
Kian Kasad 2021-02-21 21:54:43 -08:00 committed by GitHub
parent 45c4b48e53
commit 14ebcdecf3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions

View File

@ -242,6 +242,10 @@
margin: auto margin: auto
} }
.post-content figure.align-center {
text-align: center;
}
.post-content figure > figcaption { .post-content figure > figcaption {
color: var(--primary); color: var(--primary);
font-size: 16px; font-size: 16px;

View File

@ -1,8 +1,11 @@
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}> <figure{{ if or (.Get "class") (eq (.Get "align") "center") }} class="
{{- if eq (.Get "align") "center" }}align-center {{ end }}
{{- with .Get "class" }}{{ . }}{{- end }}"
{{- end -}}>
{{- if .Get "link" -}} {{- if .Get "link" -}}
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}> <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
{{- end }} {{- end }}
<img src="{{ .Get "src" }}" <img src="{{ .Get "src" }}{{- if eq (.Get "align") "center" }}#center{{- end }}"
{{- if or (.Get "alt") (.Get "caption") }} {{- if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
{{- end -}} {{- end -}}