Add alt and caption support to feature image

TryGhost · Jul 8, 2021 · 4a6ba0a · 4a6ba0a
1 parent e09b375
commit 4a6ba0a
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 7 deletions.
diff --git a/assets/built/screen.css b/assets/built/screen.css
diff --git a/assets/built/screen.css.map b/assets/built/screen.css.map
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -1036,7 +1036,6 @@ make sure this only happens on large viewports / desktop-ish devices.
     align-items: center;
     overflow: hidden;
     margin: 25px 0 50px;
-    background: color(var(--lightgrey) l(+10%));
     border-radius: 3px;
 }
 
@@ -2138,7 +2137,7 @@ Usage (In Ghost editor):
     margin: 0;
 }
 
-.post-full-content figcaption {
+figcaption {
     margin: 1.0em auto 0;
     color: color(var(--midgrey) l(-10%));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

diff --git a/page.hbs b/page.hbs
@@ -36,8 +36,11 @@ into the {body} of the default.hbs template --}}
                             (max-width: 1170px) 1170px,
                             2000px"
                     src="{{img_url feature_image size="xl"}}"
-                    alt="{{title}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                 />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
             </figure>
             {{/if}}
 

diff --git a/partials/post-card.hbs b/partials/post-card.hbs
@@ -12,7 +12,7 @@
             sizes="(max-width: 1000px) 400px, 700px"
             src="{{img_url feature_image size="m"}}"
             loading="lazy"
-            alt="{{title}}"
+            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
         />
     </a>
     {{/if}}

diff --git a/post.hbs b/post.hbs
@@ -98,8 +98,11 @@ into the {body} of the default.hbs template --}}
                         (max-width: 1170px) 1170px,
                             2000px"
                     src="{{img_url feature_image size="xl"}}"
-                    alt="{{title}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                 />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
             </figure>
             {{/if}}