diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index a3fc0f74..b4bb51db 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -83,7 +83,7 @@
{caption}
{/if}
{#if !altText}
-
Missing altText
+ altText
{/if}
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index 1db22aa2..c9c21236 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -5,6 +5,8 @@
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore
import quickitDocs from './stories/docs/quickit.md?raw';
+ // @ts-ignore
+ import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
import PhotoPack from './PhotoPack.svelte';
import { getPhotoPackPropsFromDoc } from './docProps';
@@ -100,6 +102,25 @@
{ Breakpoint: '450', Rows: '1, 2, 2' },
],
};
+
+ const altTextImages = [
+ {
+ src: 'https://via.placeholder.com/1024x768.jpg',
+ altText: 'alt text',
+ caption:
+ 'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
+ maxHeight: 400,
+ },
+ {
+ src: 'https://via.placeholder.com/1640x1180.jpg',
+ altText: '',
+ caption:
+ 'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
+ },
+ ];
+ const altTextLayouts = [
+ { breakpoint: 450, rows: [2] },
+ ];
@@ -123,3 +144,14 @@
{...withStoryDocs(quickitDocs)}
args="{getPhotoPackPropsFromDoc(quickItBlock)}"
/>
+
+
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 36a7e910..476802b0 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -102,6 +102,9 @@
alt="{img.altText}"
style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
/>
+ {#if !img.altText}
+ altText
+ {/if}
{/each}
@@ -139,12 +142,24 @@
flex: 1;
margin: 0;
padding: 0;
+ position: relative;
img {
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
+ div.alt-warning {
+ font-family: $font-family-display;
+ padding: 5px 10px;
+ background-color: red;
+ color: white;
+ position: absolute;
+ top: 0;
+ right: 0;
+ font-size: 14px;
+ line-height: 16px;
+ }
}
}
}
diff --git a/src/components/PhotoPack/stories/docs/missingAltText.md b/src/components/PhotoPack/stories/docs/missingAltText.md
new file mode 100644
index 00000000..93304de2
--- /dev/null
+++ b/src/components/PhotoPack/stories/docs/missingAltText.md
@@ -0,0 +1 @@
+If any of your images is missing `altText` a small warning will overlay the photo.