Add images to featured blogs (microsoft#18276)

### Description adds images to featured blog cards ### Motivation and Context better visuals
MaanavD · Nov 6, 2023 · f5276eb · f5276eb
1 parent 9c227d1
commit f5276eb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/routes/blogs/+page.svelte b/src/routes/blogs/+page.svelte
@@ -26,22 +26,25 @@
 			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:
 				'Build and deploy fast and portable speech recognition applications with ONNX Runtime and Whisper',
 			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
@@ -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>