From dfe5d8af31feded4a810d12ec076a2462a19f782 Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Tue, 8 Sep 2026 10:33:31 +0000
Subject: [PATCH] fix(web): keep recommend banner logos intact and show
 template authors (#41980)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
---
 .../home/__tests__/home-trending.spec.tsx     | 54 +++++++++++++++++++
 .../marketplace/home/home-trending-slides.tsx |  3 +-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/web/app/components/plugins/marketplace/home/__tests__/home-trending.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/home-trending.spec.tsx
index a72746a2168..689072a679f 100644
--- a/web/app/components/plugins/marketplace/home/__tests__/home-trending.spec.tsx
+++ b/web/app/components/plugins/marketplace/home/__tests__/home-trending.spec.tsx
@@ -189,6 +189,18 @@ describe('HomeTrending', () => {
     )
   })
 
+  it('fits recommend card icons inside the frame instead of cover-cropping them', () => {
+    render(<HomeTrending banners={banners} isMarketplacePlatform page="plugins" />)
+
+    const icon = within(screen.getByRole('group', { name: 'Trending' }))
+      .getByRole('link', { name: 'Dropbox' })
+      .querySelector('img')
+
+    expect(icon?.getAttribute('src')).toContain('/plugins/langgenius/dropbox/icon')
+    expect(icon).toHaveClass('object-contain')
+    expect(icon).not.toHaveClass('object-cover')
+  })
+
   it('marks inactive standalone slides so mobile CSS can collapse mixed banner heights', () => {
     render(<HomeTrending banners={banners} isMarketplacePlatform page="plugins" />)
 
@@ -768,6 +780,48 @@ describe('HomeTrending', () => {
     )
   })
 
+  it('shows the served author on recommend template cards the same way as plugins', () => {
+    const banner: PluginBanner = {
+      id: 'recommend-templates',
+      style_type: 'recommend',
+      title: 'Trending',
+      sort: 0,
+      language: 'en',
+      content: {
+        theme_type: 'newest',
+        cards: [
+          {
+            item_type: 'template',
+            item_id: 'tpl-authored',
+            display_name: 'Go-to-Market',
+            creator: 'aisa-team',
+            link: '/templates/tpl-authored',
+            card_position: 0,
+          },
+          {
+            item_type: 'template',
+            item_id: 'tpl-anonymous',
+            display_name: 'Untitled Flow',
+            link: '/templates/tpl-anonymous',
+            card_position: 1,
+          },
+        ],
+      },
+    }
+
+    render(<HomeTrending banners={[banner]} isMarketplacePlatform page="templates" />)
+
+    const authored = screen.getByRole('link', { name: 'Go-to-Market' })
+    const anonymous = screen.getByRole('link', { name: 'Untitled Flow' })
+
+    expect(
+      within(authored).getByText('plugin.marketplace.home.trendingByCreator'),
+    ).toBeInTheDocument()
+    expect(
+      within(anonymous).queryByText('plugin.marketplace.home.trendingByCreator'),
+    ).not.toBeInTheDocument()
+  })
+
   it('keeps standalone recommend plugin cards on local detail routes', () => {
     render(<HomeTrending banners={[banners[0]!]} isMarketplacePlatform page="plugins" />)
 
diff --git a/web/app/components/plugins/marketplace/home/home-trending-slides.tsx b/web/app/components/plugins/marketplace/home/home-trending-slides.tsx
index 57654f390df..5a3b1c25284 100644
--- a/web/app/components/plugins/marketplace/home/home-trending-slides.tsx
+++ b/web/app/components/plugins/marketplace/home/home-trending-slides.tsx
@@ -117,6 +117,7 @@ const recommendCardClassName = cn(
 
 const getCardCreator = (card: BannerRecommendCard) => {
   if (card.creator) return card.creator
+  // Template item_id is a UUID, not org/name, so author has to come from the payload.
   if (card.item_type !== 'plugin') return ''
 
   return card.item_id.split('/')[0] || ''
@@ -230,7 +231,7 @@ function RecommendCardFace({ card }: { card: BannerRecommendCard }) {
             height={40}
             alt=""
             aria-hidden
-            className="size-full object-cover"
+            className="size-full object-contain object-center"
           />
         ) : card.icon ? (
           <span className="text-xl leading-none">{card.icon}</span>