Merge pull request #515 from guardian/ih/capi-alt-text

Use new alt text field in capi templates

Author: i-hardy

src/lib/types/capi.ts

@@ -47,6 +47,7 @@ export type Single = {
 	articleImage?: {
 		sources: Source[];
 		backupSrc: string;
+		altText?: string;
 	};
 	audioTag: boolean;
 	galleryTag: boolean;
@@ -60,6 +61,7 @@ export type CapiHostedCard = {
 	image?: {
 		sources: Source[];
 		backupSrc: string;
+		altText?: string;
 	};
 	audioTag?: boolean;
 	galleryTag?: boolean;

src/templates/components/CapiCard.svelte

@@ -41,10 +41,10 @@
 						sizes={source.sizes}
 					/>
 				{/each}
-				<img src={articleImage.backupSrc} alt="" />
+				<img src={articleImage.backupSrc} alt={articleImage.altText} />
 			</picture>
 		{:else if articleImage?.backupSrc}
-			<img src={articleImage.backupSrc} alt="" />
+			<img src={articleImage.backupSrc} alt={articleImage.altText} />
 		{/if}
 	</div>
 	<div class="text">

src/templates/components/CapiHostedCard.svelte

@@ -29,10 +29,10 @@
 						sizes={source.sizes}
 					/>
 				{/each}
-				<img src={image.backupSrc} alt="" />
+				<img src={image.backupSrc} alt={image.altText} />
 			</picture>
 		{:else if image?.backupSrc}
-			<img src={image.backupSrc} alt="" />
+			<img src={image.backupSrc} alt={image.altText} />
 		{/if}
 	</div>
 	<h2>

src/templates/components/CapiMedia.svelte

@@ -22,10 +22,10 @@
 				sizes={source.sizes}
 			/>
 		{/each}
-		<img src={articleImage.backupSrc} alt="" />
+		<img src={articleImage.backupSrc} alt={articleImage.altText} />
 	</picture>
 {:else if articleImage?.backupSrc}
-	<img src={articleImage.backupSrc} alt="" />
+	<img src={articleImage.backupSrc} alt={articleImage.altText} />
 {/if}
 
 <style lang="scss">

src/templates/csr/capi-multiple-hosted/test.json

@@ -1,5 +1,5 @@
 {
-	"SeriesURL": "advertiser-content/get-to-know-me",
+	"SeriesURL": "advertiser-content/advent-zagreb/advent-zagreb",
 	"BrandLogo": "",
 	"BrandColour": "#222B5E",
 	"TrackingID": "",