diff options
| author | Asur <asur@asurbernardo.com> | 2019-12-18 17:38:26 +0300 |
|---|---|---|
| committer | Asur <asur@asurbernardo.com> | 2019-12-18 17:38:26 +0300 |
| commit | 881444dcbe8f37b3deeb4d3fe08524688930e861 (patch) | |
| tree | ff54c95a3a5b0d736af7bdcf28e3ff1a5208e67c | |
| parent | b38f9a9ea707a0ae8dabac800ef66df140246872 (diff) | |
Add captions to amp images
| -rw-r--r-- | assets/theme.scss | 22 | ||||
| -rw-r--r-- | layouts/partials/shortcodes/amp-image.html | 11 |
2 files changed, 29 insertions, 4 deletions
diff --git a/assets/theme.scss b/assets/theme.scss index ca9587b..5204636 100644 --- a/assets/theme.scss +++ b/assets/theme.scss @@ -126,6 +126,21 @@ blockquote { } } +.figure { + position: relative; + &__caption { + display: block; + position: absolute; + max-width: 60%; + bottom: 1rem; + left: -1rem; + padding: 0 1rem; + background-color: #333; + color: white; + font-weight: 700; + } +} + #tags { margin: 0; padding: 0; @@ -254,4 +269,11 @@ blockquote { margin-top: 1.5em; justify-content: space-between; } + .figure { + position: relative; + &__caption { + position: relative; + max-width: 100%; + } + } }
\ No newline at end of file diff --git a/layouts/partials/shortcodes/amp-image.html b/layouts/partials/shortcodes/amp-image.html index cdb7f1f..58bb336 100644 --- a/layouts/partials/shortcodes/amp-image.html +++ b/layouts/partials/shortcodes/amp-image.html @@ -1,5 +1,6 @@ -<amp-img - {{ with .class }}class="{{ . }}"{{ end }} +<figure class="figure"> + <amp-img + class="figure__image {{ with .class }}{{ . }}{{ end }}" {{ with .alt }}alt="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }} {{ with .attribution }}attribution="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }} {{ with .srcset }}srcset="{{ range (split . " ") }}{{ . | absURL }} {{ end }}"{{ end }} @@ -9,5 +10,7 @@ {{ with .width }}width="{{ . }}"{{ end }} {{ with .height }}height="{{ . }}"{{ end }} {{ with .layout }}layout="{{ . }}"{{ end }} - {{ with .src }}src="{{ . | absURL}}"{{ end }}> -</amp-img>
\ No newline at end of file + {{ with .media }}media="{{ . }}"{{ end }} + {{ with .src }}src="{{ . | absURL}}"{{ end }}></amp-img> + {{ with .caption }}<figcaption class="figure__caption">{{ . }}</figcaption>{{ end }} +</figure>
\ No newline at end of file |