From 1bf8e9938160c626160aa77245a054ba15fae488 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Thu, 23 Feb 2023 09:39:57 +0100
Subject: [PATCH 1/3] Adding the picture icon when text to display is `"false"`

---
 site/layouts/shortcodes/placeholder.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index 2d38e9d2a1..7ca0a26760 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -39,6 +39,10 @@
   <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
     {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
     <rect width="100%" height="100%" fill="{{ $background }}"/>
-    {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
+    {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ else }}
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#ccc">
+      <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+    </svg>
+    {{ end -}}
   </svg>
 {{- end -}}

From 0b1c0a358fcdf45b624b5c7d4ca2b691d66cee94 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Thu, 23 Feb 2023 10:31:14 +0100
Subject: [PATCH 2/3] Implement opacity and a mechanism to make it appear only
 when wanted

---
 site/content/docs/5.3/components/placeholders.md |  4 ++--
 site/layouts/shortcodes/placeholder.html         | 11 ++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/5.3/components/placeholders.md b/site/content/docs/5.3/components/placeholders.md
index 60b4303bf4..7ebb5d79ba 100644
--- a/site/content/docs/5.3/components/placeholders.md
+++ b/site/content/docs/5.3/components/placeholders.md
@@ -19,7 +19,7 @@ In the example below, we take a typical card component and recreate it with plac
 
 <div class="bd-example bd-example-placeholder-cards d-flex justify-content-around">
 <div class="card">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="false" background="#20c997" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" background="#20c997" >}}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -28,7 +28,7 @@ In the example below, we take a typical card component and recreate it with plac
 </div>
 
 <div class="card" aria-hidden="true">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="false" background="#666" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" background="#666" >}}
   <div class="card-body">
     <div class="h5 card-title placeholder-glow">
       <span class="placeholder col-6"></span>
diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index 7ca0a26760..394053c206 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -25,7 +25,8 @@
 {{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}}
 
 {{- $show_title := not (eq $title "false") -}}
-{{- $show_text := not (eq $text "false") -}}
+{{- $show_text := not (or (eq $text "false") (eq $text "icon")) -}}
+{{- $show_icon := eq $text "icon" -}}
 
 {{- $markup := .Get "markup" | default "svg" -}}
 
@@ -39,10 +40,10 @@
   <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
     {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
     <rect width="100%" height="100%" fill="{{ $background }}"/>
-    {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ else }}
-    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#ccc">
+    {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
+    {{- if $show_icon }}
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000088">
       <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
-    </svg>
-    {{ end -}}
+    </svg>{{ end -}}
   </svg>
 {{- end -}}

From 5287c96ba161773f385bd21ce8e68a86ae5a9b66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Mon, 27 Feb 2023 08:30:48 +0100
Subject: [PATCH 3/3] .

---
 site/layouts/shortcodes/placeholder.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index 394053c206..211cbafe4c 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -44,6 +44,7 @@
     {{- if $show_icon }}
     <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000088">
       <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
-    </svg>{{ end -}}
+    </svg>
+    {{ end -}}
   </svg>
 {{- end -}}