Remove images from placeholder.com (#760)

assets/components/atoms/picture/picture-avatar.twig

@@ -1,18 +1,19 @@
+{% set avatar_path = avatar_path|default("./images/styleguide/people/avatar-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+    srcset="{{avatar_path}}120x120.jpg 1x, {{avatar_path}}256x256.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+    srcset="{{avatar_path}}95x95.jpg 1x, {{avatar_path}}180x180.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
+    srcset="{{avatar_path}}80x80.jpg 1x, {{avatar_path}}160x160.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/60x60.jpg 1x,https://via.placeholder.com/120x120.jpg 2x">
+    srcset="{{avatar_path}}60x60.jpg 1x, {{avatar_path}}120x120.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/90x90.jpg 1x,https://via.placeholder.com/180x180.jpg 2x">
-  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid rounded-circle" alt="ALT">
+    srcset="{{avatar_path}}95x95.jpg 1x, {{avatar_path}}180x180.jpg 2x">
+  <img src="{{avatar_path}}120x120.jpg" class="img-fluid rounded-circle" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-cover.twig

@@ -1,19 +1,19 @@
-{% set cover_path = cover_path|default("https://via.placeholder.com/") %}
+{% set cover_path = cover_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2880x1620.jpg 2x">
+    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2280x1283.jpg 2x">
+    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="{{cover_path}}960x540.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
+    srcset="{{cover_path}}928x520.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="{{cover_path}}720x405.jpg 1x,{{cover_path}}1440x810.jpg 2x">
+    srcset="{{cover_path}}768x432.jpg 1x,{{cover_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="{{cover_path}}540x304.jpg 1x,{{cover_path}}1080x608.jpg 2x">
+    srcset="{{cover_path}}576x324.jpg 1x,{{cover_path}}1080x608.jpg 2x">
   <img src="{{cover_path}}1920x1080.jpg" class="img-fluid" alt="Cover description">
 </picture>

assets/components/atoms/picture/picture-fullwidth-teaser.twig

@@ -1,21 +1,19 @@
-{% if not img %}
-{% set img %}./images/styleguide/teaser/news-teaser{% endset %}
-{% endif %}
+{% set cover_path = cover_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1920px)"
-    srcset="{{img}}-1920x1080.jpg 1x, {{img}}-2240x1260.jpg 2x">
+    srcset="{{cover_path}}1920x1080.jpg 1x, {{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 1366px)"
-    srcset="{{img}}-1440x810.jpg 1x, {{img}}-1920x1080.jpg 2x">
+    srcset="{{cover_path}}1440x810.jpg 1x, {{cover_path}}1920x1080.jpg 2x">
   <source
     media="(min-width: 1200px)"
-    srcset="{{img}}-1294x728.jpg 1x, {{img}}-1600x900.jpg 2x">
+    srcset="{{cover_path}}1294x728.jpg 1x, {{cover_path}}1600x900.jpg 2x">
   <source
     media="(min-width: 576px)"
-    srcset="{{img}}-768x432.jpg 1x, {{img}}-1440x810.jpg 2x">
+    srcset="{{cover_path}}768x432.jpg 1x, {{cover_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 575px)"
-    srcset="{{img}}-576x324.jpg 1x, {{img}}-1140x641.jpg 2x">
-  <img src="{{img}}-1440x810.jpg" class="img-fluid" alt="image description">
+    srcset="{{cover_path}}576x324.jpg 1x, {{cover_path}}1140x641.jpg 2x">
+  <img src="{{cover_path}}1440x810.jpg" class="img-fluid" alt="image description">
 </picture>

assets/components/atoms/picture/picture-one-third-square.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+    srcset="{{img_path}}480x480.jpg 1x, {{img_path}}780x780.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+    srcset="{{img_path}}360x360.jpg 1x, {{img_path}}780x780.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/960x960.jpg 1x,https://via.placeholder.com/1920x1920.jpg 2x">
+    srcset="{{img_path}}360x360.jpg 1x, {{img_path}}640x640.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/240x240.jpg 1x,https://via.placeholder.com/480x480.jpg 2x">
+    srcset="{{img_path}}780x780.jpg 1x, {{img_path}}1440x1440.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/180x180.jpg 1x,https://via.placeholder.com/360x360.jpg 2x">
-  <img src="https://via.placeholder.com/1140x1140.jpg" class="img-fluid" alt="ALT">
+    srcset="{{img_path}}640x640.jpg 1x, {{img_path}}1080x1080.jpg 2x">
+  <img src="{{img_path}}780x780.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-one-third.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+    srcset="{{img_path}}380x214.jpg 1x, {{img_path}}768x432.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+    srcset="{{img_path}}380x214.jpg 1x, {{img_path}}768x432.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/320x180.jpg 1x,https://via.placeholder.com/640x360.jpg 2x">
+    srcset="{{img_path}}320x180.jpg 1x, {{img_path}}640x360.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}768x432.jpg 1x, {{img_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="https://via.placeholder.com/380x214.jpg" class="img-fluid" alt="ALT">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}380x214.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-portrait.twig

@@ -1,18 +1,19 @@
+{% set portrait_path = portrait_path|default("./images/styleguide/people/portrait-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
+    srcset="{{portrait_path}}211x300.jpg 1x, {{portrait_path}}422x600.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
-  <img src="https://via.placeholder.com/506x720.jpg" class="img-fluid" alt="ALT">
+    srcset="{{portrait_path}}211x300.jpg 1x, {{portrait_path}}422x600.jpg 2x">
+  <img src="{{portrait_path}}506x720.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-question.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/homepage/7-science-question/science-question-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="./images/styleguide/homepage/7-science-question-SF.jpg 1x, ./images/styleguide/homepage/7-science-question-SF.jpg 2x">
+    srcset="{{img_path}}540x304.jpg 1x, {{img_path}}1080x608.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/475x267.jpg 1x,https://via.placeholder.com/950x534.jpg 2x">
+    srcset="{{img_path}}960x540.jpg 1x, {{img_path}}1440x810.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/400x225.jpg 1x,https://via.placeholder.com/800x450.jpg 2x">
+    srcset="{{img_path}}720x405.jpg 1x, {{img_path}}1080x608.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}540x304.jpg 1x, {{img_path}}1080x608.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="./images/styleguide/homepage/7-science-question-SF.jpg" class="img-fluid" alt="ALT">
+    srcset="{{img_path}}540x304.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}720x405.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-thumb-square.twig

@@ -1,8 +1,19 @@
+{% set thumb_path = thumb_path|default("./images/styleguide/news-thumbs/news_thumb-") %}
 <picture>
-  <source media="(min-width: 1140px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source media="(min-width: 960px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source media="(min-width: 720px)" srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
-  <source media="(min-width: 541px)" srcset="https://via.placeholder.com/120x120.jpg 1x,https://via.placeholder.com/240x240.jpg 2x">
-  <source media="(max-width: 540px)" srcset="https://via.placeholder.com/540x540.jpg 1x,https://via.placeholder.com/1080x1080.jpg 2x">
-  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid" alt="ALT">
+  <source
+    media="(min-width: 1140px)"
+    srcset="{{thumb_path}}95x95.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="{{thumb_path}}120x120.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="{{thumb_path}}80x80.jpg 1x, {{thumb_path}}160x160.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="{{thumb_path}}120x120.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="{{thumb_path}}540x540.jpg 1x, {{thumb_path}}1080x1080.jpg 2x">
+  <img src="{{thumb_path}}120x120.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1140x641.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1140x641.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/480x270.jpg 1x,https://via.placeholder.com/960x540.jpg 2x">
+    srcset="{{img_path}}508x286.jpg 1x, {{img_path}}928x520.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}768x432.jpg 1x, {{img_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="https://via.placeholder.com/570x321.jpg" class="img-fluid" alt="image description">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}576x324.jpg" class="img-fluid" alt="image description">
 </picture>

assets/components/atoms/picture/picture.yml

@@ -12,7 +12,7 @@ variants:
       Picture used in 'Organism > Fullwidth teaser' and 'News > Highlighted'.
   - name: avatar
     title: Avatar
-    wrapper: col-sm-4 col-md-2 col-lg-1
+    wrapper: col-sm-4 col-md-2
     notes: |
       Avatar picture need an equal height and width in order to be displayed as a circle
   - name: portrait
@@ -25,6 +25,7 @@ variants:
     wrapper: col-md-4
   - name: one-third-square
     title: One third Square picture
+    wrapper: col-md-4
   - name: news-thumb
     title: News Listing Thumbnail
     wrapper: col-3 col-md-2

assets/components/molecules/key-number/key-number-hn-link.twig

@@ -1,4 +1,3 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
 <a class="card link-trapeze-horizontal" href="#">
   <div class="card border-0 bg-white m-0 h-100">
     <div class="card-header border-0">

assets/components/molecules/key-number/key-number-hn.twig

@@ -1,4 +1,3 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
 <div class="card">
   <div class="card border-0 bg-white m-0 h-100">
     <div class="card-header border-0">

assets/components/molecules/key-number/key-number-large.twig

@@ -1,4 +1,3 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
 <div class="key-number-large">
   <div class="card border-0 bg-white m-0 h-100">
     <div class="card-header border-0">

assets/components/molecules/key-number/key-number.twig

@@ -1,4 +1,3 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
 <div class="key-number">
   <div class="card border-0 bg-white m-0 h-100">
     <div class="card-header border-0">