From d66cdbd4f86886eef3fb832388b71a9ebc6b265b Mon Sep 17 00:00:00 2001
From: "Md. Tajmirul Islam Akhand" <tasmirolislam@gmail.com>
Date: Fri, 14 Mar 2025 05:29:03 +0600
Subject: [PATCH] fix: add classes for picture tag in media component (#11605)

Sometimes I need to add some classes to the `picture` tag of Media
component. in this case I need to do this:
```
<Media
    resource={content.image}
    className="w-full h-full [&>picture]:w-full"  // <<< follow this
    imgClassName="w-full h-full object-cover"
/>
```

So I added an additional props `pictureClassName` for the picture tag.
Now I can do this:
```
<Media
    resource={content.image}
    className="w-full h-full"
    pictureClassName="w-full h-full" // <<< follow this
    imgClassName="w-full h-full object-cover"
/>
```
NOTE: I've encountered situations where I needed to add classes to the
`picture` tag, not just for `w-full h-full`. To handle this, I had to
update the Media component. I believe this would be a valuable
improvement to the Media component.
---
 templates/website/src/components/Media/ImageMedia/index.tsx | 3 ++-
 templates/website/src/components/Media/types.ts             | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/templates/website/src/components/Media/ImageMedia/index.tsx b/templates/website/src/components/Media/ImageMedia/index.tsx
index 948346ce5..c472254da 100644
--- a/templates/website/src/components/Media/ImageMedia/index.tsx
+++ b/templates/website/src/components/Media/ImageMedia/index.tsx
@@ -21,6 +21,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
   const {
     alt: altFromProps,
     fill,
+    pictureClassName,
     imgClassName,
     priority,
     resource,
@@ -56,7 +57,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
         .join(', ')
 
   return (
-    <picture>
+    <picture className={cn(pictureClassName)}>
       <NextImage
         alt={alt || ''}
         className={cn(imgClassName)}
diff --git a/templates/website/src/components/Media/types.ts b/templates/website/src/components/Media/types.ts
index 4777b6de6..3bbbf2258 100644
--- a/templates/website/src/components/Media/types.ts
+++ b/templates/website/src/components/Media/types.ts
@@ -8,6 +8,7 @@ export interface Props {
   className?: string
   fill?: boolean // for NextImage only
   htmlElement?: ElementType | null
+  pictureClassName?: string
   imgClassName?: string
   onClick?: () => void
   onLoad?: () => void