From 883a07c6cc43049f1bee39fab3d9a2119296f9d6 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 27 Feb 2026 15:28:45 +0200
Subject: [PATCH] remove image placeholder in cms blocks

---
 .../scss/includes/blocks/block-cms-funds.scss | 20 +++++++++----------
 .../elements/cms-blocks/CmsBlocksItem.tsx     | 14 +++++--------
 .../elements/cms-blocks/CmsBlocksItemLink.tsx | 14 +++++--------
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
index 7bc9760f6..26abddcea 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
@@ -7,12 +7,13 @@
     .fund-item {
         width: 100%;
         display: flex;
+        gap: 100px;
         padding: 0 0 40px;
         border-bottom: 1px solid var(--border-color);
         transition: box-shadow 0.4s;
 
         .fund-media {
-            width: 52%;
+            width: 42%;
             order: 1;
     
             img {
@@ -22,13 +23,12 @@
         }
     
         .fund-information {
-            width: 50%;
-            padding-left: 100px;
             text-align: left;
             order: 2;
             display: flex;
             flex-direction: column;
             align-self: center;
+            flex: 1;
 
             .fund-label {
                 margin: 0 0 5px;
@@ -70,8 +70,6 @@
     
             .fund-information {
                 order: 1;
-                padding-left: 0;
-                padding-right: 100px;
             }
         }
 
@@ -96,6 +94,7 @@
 
             .fund-item {
                 display: flex;
+                gap: 0;
                 flex-wrap: wrap;
                 flex-direction: column;
                 flex: 0 1 calc((100% - (calc(var(--gap) * 2))) / 3);
@@ -138,8 +137,7 @@
                     .fund-description {
                         margin: 0 0 0;
                         display: flex;
-                        flex-grow: 1;
-    
+
                         .block.block-markdown ul, .block.block-markdown p {
                             &:last-child {
                                 margin-bottom: 0;
@@ -184,8 +182,11 @@
             }
     
             &.block-cms-funds-2-in-row {
+                --gap: 60px;
+                gap: var(--gap);
+
                 .fund-item {
-                    width: calc(calc(100% / 2) - var(--padding));
+                    flex: 0 1 calc((100% - (calc(var(--gap) * 2))) / 2);
                 }
             }
         }
@@ -195,6 +196,7 @@
         gap: 30px;
 
         .fund-item {
+            gap: 0;
             padding: 0 0 30px;
             flex-direction: column;
 
@@ -205,7 +207,6 @@
 
             .fund-information {
                 width: 100%;
-                padding: 0;
 
                 .fund-title {
                     font: 400 20px/26px var(--base-font);
@@ -238,7 +239,6 @@
     
                 .fund-information {
                     order: 2;
-                    padding: 0;
                 }
             }
         }
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
index 953ebb4c1..fee5138b7 100644
--- a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Markdown from '../markdown/Markdown';
 import ImplementationPageBlock from '../../../props/models/ImplementationPageBlock';
-import useAssetUrl from '../../../hooks/useAssetUrl';
 import Label from '../label/Label';
 
 export default function CmsBlocksItem({
@@ -11,16 +10,13 @@ export default function CmsBlocksItem({
     block: ImplementationPageBlock;
     blocksPerRow: number;
 }) {
-    const assetUrl = useAssetUrl();
-
     return (
         <div className="fund-item">
-            <div className="fund-media">
-                <img
-                    src={block.media?.sizes?.public || assetUrl('/assets/img/placeholders/product-small.png')}
-                    alt=""
-                />
-            </div>
+            {block.media?.sizes?.public && (
+                <div className="fund-media">
+                    <img src={block.media.sizes.public} alt="" />
+                </div>
+            )}
             <div className="fund-information">
                 {block.title && <h2 className="fund-title">{block.title}</h2>}
                 {block.label && (
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
index 365901650..6c2fc3ebf 100644
--- a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
@@ -1,24 +1,20 @@
 import React from 'react';
 import Markdown from '../markdown/Markdown';
 import ImplementationPageBlock from '../../../props/models/ImplementationPageBlock';
-import useAssetUrl from '../../../hooks/useAssetUrl';
 import Label from '../label/Label';
 
 export default function CmsBlocksItemLink({ block }: { block: ImplementationPageBlock }) {
-    const assetUrl = useAssetUrl();
-
     return (
         <a
             target={block.button_target_blank ? '_blank' : '_self'}
             rel={block.button_target_blank ? 'noreferrer' : ''}
             href={block.button_link}
             className="fund-item">
-            <div className="fund-media">
-                <img
-                    src={block.media?.sizes?.public || assetUrl('/assets/img/placeholders/product-small.png')}
-                    alt=""
-                />
-            </div>
+            {block.media?.sizes?.public && (
+                <div className="fund-media">
+                    <img src={block.media.sizes.public} alt="" />
+                </div>
+            )}
             <div className="fund-information">
                 {block.title && <h2 className="fund-title">{block.title}</h2>}
                 {block.label && (