From f5276eb4d8e53f4ebda5a407d36b6703bfd0ed6f Mon Sep 17 00:00:00 2001
From: Prasanth Pulavarthi <prasantp@microsoft.com>
Date: Mon, 6 Nov 2023 09:33:00 -0800
Subject: [PATCH] Add images to featured blogs (#18276)

### Description
adds images to featured blog cards


### Motivation and Context
better visuals
---
 src/routes/blogs/+page.svelte              | 10 +++++++---
 src/routes/blogs/blog-post-featured.svelte |  2 ++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/routes/blogs/+page.svelte b/src/routes/blogs/+page.svelte
index 53ee531831142..fa2d0c6eb61f6 100644
--- a/src/routes/blogs/+page.svelte
+++ b/src/routes/blogs/+page.svelte
@@ -26,14 +26,16 @@
 			date: 'October 12th, 2023',
 			blurb:
 				'Everything you need to know about running PyTorch models on the edge with ONNX Runtime.',
-			link: 'blogs/pytorch-on-the-edge'
+			link: 'blogs/pytorch-on-the-edge',
+			image: 'https://onnxruntime.ai/_app/immutable/assets/pytorch-on-the-edge-with-ort.cdaa9c84.png'
 		},
 		{
 			title: 'On-Device Training with ONNX Runtime: A deep dive',
 			date: 'July 5th, 2023',
 			blurb:
 				'This blog presents technical details of On-Device training with ONNX Runtime. It explains how On-Device Training works and what are the different steps and artifacts involved in the training process. This information will help you train your models on edge devices.',
-			link: 'https://cloudblogs.microsoft.com/opensource/2023/07/05/on-device-training-with-onnx-runtime-a-deep-dive/'
+			link: 'https://cloudblogs.microsoft.com/opensource/2023/07/05/on-device-training-with-onnx-runtime-a-deep-dive/',
+			image: 'https://cloudblogs.microsoft.com/opensource/wp-content/uploads/sites/37/2023/06/Open-Source-1.webp'
 		},
 		{
 			title:
@@ -41,7 +43,8 @@
 			date: 'June 7th, 2023',
 			blurb:
 				'Learn how ONNX Runtime accelerates Whisper and makes it easy to deploy on desktop, mobile, in the cloud, and even in the browser.',
-			link: 'https://medium.com/microsoftazure/build-and-deploy-fast-and-portable-speech-recognition-applications-with-onnx-runtime-and-whisper-5bf0969dd56b'
+			link: 'https://medium.com/microsoftazure/build-and-deploy-fast-and-portable-speech-recognition-applications-with-onnx-runtime-and-whisper-5bf0969dd56b',
+			image: 'https://miro.medium.com/v2/resize:fit:1100/format:webp/1*DJH8_6GS06-N32tkVhdTOw.png'
 		}
 	];
 	let blogs = [
@@ -237,6 +240,7 @@
 					description={blog.blurb}
 					date={blog.date}
 					link={blog.link}
+					image={blog.image}
 				/>
 			{/each}
 		</div>
diff --git a/src/routes/blogs/blog-post-featured.svelte b/src/routes/blogs/blog-post-featured.svelte
index 4483124cc0fa4..601b12e57876f 100644
--- a/src/routes/blogs/blog-post-featured.svelte
+++ b/src/routes/blogs/blog-post-featured.svelte
@@ -4,6 +4,7 @@
 	export let description: string;
 	export let date: string;
 	export let link: string;
+	export let image: string;
 	let handleEnter = (e: any) => {
 		anime({
 			targets: e.target,
@@ -30,6 +31,7 @@
 			<div class="card-body">
 				<h2 class="card-title">{title}</h2>
 				<p>{description}</p>
+				<img src={image}/>
 				<div class="text-right text-blue-500">
 					{date}
 				</div>