Center hero image on blog posts

Signed-off-by: Eduard Itrich <eduard.itrich@porsche.de> on-behalf-of: @porscheofficial <open_source_office@porsche.de>
porscheofficial · Dec 18, 2023 · 90c33e6 · 90c33e6
1 parent 0077a7a
commit 90c33e6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/content/blog/porsche-digital-campus.mdx b/content/blog/porsche-digital-campus.mdx
@@ -8,7 +8,7 @@ author:
   description: The Porsche Digital Campus is an innovative initiative with the goal of bringing together research and real-world application in the fields of AI, machine learning, and data science.
   image: https://uploads-ssl.webflow.com/6419a4c2c9609e21b02a47e8/6454e539d4ea54c08e42aedb_Frame%2010683.png
   slug: https://campus.porsche.digital/
-readTime: 5min
+readTime: 3min
 ---
 
 <ImageText imageSrc="/assets/blog/pdc/team.jpg" imageAlt="Porsche Digital Campus" theme="light"

diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx
@@ -82,7 +82,8 @@ const BlogPage: React.FC<PageProps> = ({ params }: PageProps) => {
         description={description}
         subtitle="FOSS@Porsche"
         imageSrc={blog.image}
-        imageAlt=""
+        imageAlt="Hero Image"
+        position="center center"
       />
 
       <Section spacing="none">

diff --git a/src/components/03_organisms/heroSection/HeroSection.tsx b/src/components/03_organisms/heroSection/HeroSection.tsx
@@ -13,6 +13,7 @@ interface HeroSectionProps {
   description?: string;
   imageSrc: string | StaticImageData;
   imageAlt: string;
+  position?: string;
 }
 
 export const HeroSection: React.FC<HeroSectionProps> = ({
@@ -21,12 +22,14 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
   description,
   imageSrc,
   imageAlt,
+  position = "right center",
 }) => {
   return (
     <div className={s["hero-container"]}>
       <div className={s["background-image-container"]}>
         <ExportedImage
           className={s["hero-image"]}
+          style={{ objectPosition: position }}
           src={imageSrc}
           alt={imageAlt}
           fill

diff --git a/src/components/03_organisms/heroSection/heroSection.module.scss b/src/components/03_organisms/heroSection/heroSection.module.scss
@@ -6,12 +6,14 @@
 
   .background-image-container {
     grid-row: 1;
-    height: 50rem;
+    @include pds-media-query-min("m") {
+      height: 50rem;
+    }
+    height: 40rem;
     position: relative;
 
     .hero-image {
       object-fit: cover;
-      object-position: right center;
     }
     .image-overlay {
       background: linear-gradient(