Merge pull request #270 from netlify-templates/image-update

added next image, updated content

Author: TomasBankauskas

components/CustomImage.js

@@ -0,0 +1,15 @@
+import Image from 'next/image';
+
+export default function CustomImage({ src, alt, ...otherProps }) {
+  return (
+    <figure className="aspect-[4/3] relative">
+      <Image
+        className="object-cover object-top"
+        src={src}
+        alt={alt || ''}
+        fill={true}
+        {...otherProps}
+      />
+    </figure>
+  );
+}

components/CustomLink.js

@@ -1,9 +1,5 @@
 import Link from 'next/link';
 
 export default function CustomLink({ as, href, ...otherProps }) {
-  return <>
-    <Link as={as} href={href} {...otherProps}>
-
-    </Link>
-  </>;
+  return <Link as={as} href={href} {...otherProps}></Link>;
 }

pages/posts/[slug].js

@@ -10,6 +10,7 @@ import { MDXRemote } from 'next-mdx-remote';
 import Head from 'next/head';
 import Link from 'next/link';
 import ArrowIcon from '../../components/ArrowIcon';
+import CustomImage from '../../components/CustomImage';
 import CustomLink from '../../components/CustomLink';
 import Footer from '../../components/Footer';
 import Header from '../../components/Header';
@@ -26,6 +27,7 @@ const components = {
   // useful for conditionally loading components for certain routes.
   // See the notes in README.md for more details.
   Head,
+  img: CustomImage
 };
 
 export default function PostPage({

posts/example-post-1.mdx

@@ -7,7 +7,6 @@ description: >-
   across all pages and elements.
 date: '2024-11-06'
 ---
-
 A style guide for a website is a set of design standards that define the look, feel, and behavior of a digital product, ensuring consistency and cohesion across all pages and elements. It typically includes guidelines for colors, typography, spacing, buttons, icons, and imagery, as well as instructions on voice and tone for content.
 
 # h1 Heading
@@ -101,3 +100,8 @@ Right aligned columns
 *   [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
 *   [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)
 
+## Image
+
+Recommended image orientation is horizontal. You can adjust the image component to your needs in `components/CustomImage.js`.
+
+![Image alt text](/images/random-image.jpeg "Image Title")