Skip to content

Commit

Permalink
Demos: Fix placeholder image references
Browse files Browse the repository at this point in the history 
Some of WET's code samples were referencing placeholder images from placeholder.com. But that site underwent changes in ownership in March 2023 and consequently ceased serving placeholder images.

This deals with it by replacing all references to via.placeholder.com with dummyimage.com.

Port of wet-boew/GCWeb#2448.
  • Loading branch information
@EricDunsworth
EricDunsworth committed Jan 6, 2025
1 parent 996ffd1 commit 91fee11
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 36 deletions.
16 changes: 8 additions & 8 deletions src/other/transitions/transitions-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@
<section>
<h3>Fade-in</h3>
<p>Hover mouse over space below to trigger fade-in (300ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=fade-in+test" class="wb-fade-in-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=fade-in+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=fade-in+test" class="wb-fade-in-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=fade-in+test" class="" alt="placeholder" />
</section>

<section>
<h3>Fade-out</h3>
<p>Hover mouse over space below to trigger fade-out (500ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=fade-out+test" class="wb-fade-out-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=fade-out+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=fade-out+test" class="wb-fade-out-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=fade-out+test" class="" alt="placeholder" />
</section>

<section>
Expand All @@ -45,15 +45,15 @@
<section>
<h3>Slide-left</h3>
<p>Hover mouse over space below to trigger slide-left (300ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=slide-left+test" class="wb-slide-left-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=slide-left+test" class="wb-slide-left-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</section>

<section>
<h3>Slide-right</h3>
<p>Hover mouse over space below to trigger slide-right (500ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=slide-right+test" class="wb-slide-right-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=slide-right+test" class="wb-slide-right-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</section>

<section>
Expand Down
16 changes: 8 additions & 8 deletions src/other/transitions/transitions-fr.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
<section>
<h3>Fade-in</h3>
<p>Hover mouse over space below to trigger fade-in (300ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=fade-in+test" class="wb-fade-in-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=fade-in+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=fade-in+test" class="wb-fade-in-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=fade-in+test" class="" alt="placeholder" />
</section>

<section>
<h3>Fade-out</h3>
<p>Hover mouse over space below to trigger fade-out (500ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=fade-out+test" class="wb-fade-out-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=fade-out+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=fade-out+test" class="wb-fade-out-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=fade-out+test" class="" alt="placeholder" />
</section>

<section>
Expand All @@ -46,15 +46,15 @@
<section>
<h3>Slide-left</h3>
<p>Hover mouse over space below to trigger slide-left (300ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=slide-left+test" class="wb-slide-left-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=slide-left+test" class="wb-slide-left-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</section>

<section>
<h3>Slide-right</h3>
<p>Hover mouse over space below to trigger slide-right (500ms)</p>
<img src="https://via.placeholder.com/350x150&amp;text=slide-right+test" class="wb-slide-right-test" alt="placeholder" tabindex="0" />
<img src="https://via.placeholder.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
<img src="https://dummyimage.com/350x150&amp;text=slide-right+test" class="wb-slide-right-test" alt="placeholder" tabindex="0" />
<img src="https://dummyimage.com/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</section>

<section>
Expand Down
20 changes: 10 additions & 10 deletions src/other/utility/utility-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,25 +338,25 @@
<p>Vertically centers an element. This is to be used jointly with the <a href="#d-flex"><code>d-flex</code> utility</a>.</p>
<h4>Working example</h4>
<div class="d-flex">
<img src="https://via.placeholder.com/100" alt="" class="d-flex align-self-center mrgn-rght-md" />
<img src="https://dummyimage.com/100" alt="" class="d-flex align-self-center mrgn-rght-md" />
<p class="d-flex align-self-center mrgn-lft-md">Paragraph is vertically aligned with sibling image.</p>
</div>
<h4>Code sample</h4>
<pre><code>&lt;div class="d-flex"&gt;
&lt;img src="https://via.placeholder.com/80" alt="" class="d-flex <strong>align-self-center</strong> mrgn-rght-md" /&gt;
&lt;img src="https://dummyimage.com/80" alt="" class="d-flex <strong>align-self-center</strong> mrgn-rght-md" /&gt;
&lt;p class="d-flex <strong>align-self-center</strong> mrgn-lft-md"&gt;Paragraph is vertically aligned with sibling image.&lt;/p&gt;
&lt;/div&gt;</code></pre>

<h3><code>align-self-end</code></h3>
<p>Vertically moves an element to the bottom. This is to be used jointly with the <a href="#d-flex"><code>d-flex</code> utility</a>.</p>
<h4>Working example</h4>
<div class="d-flex">
<img src="https://via.placeholder.com/100" alt="" class="d-flex mrgn-rght-md" />
<img src="https://dummyimage.com/100" alt="" class="d-flex mrgn-rght-md" />
<p class="d-flex align-self-end mrgn-lft-md">Paragraph is vertically moved to the bottom.</p>
</div>
<h4>Code sample</h4>
<pre><code>&lt;div class="d-flex"&gt;
&lt;img src="https://via.placeholder.com/80" alt="" class="d-flex mrgn-rght-md" /&gt;
&lt;img src="https://dummyimage.com/80" alt="" class="d-flex mrgn-rght-md" /&gt;
&lt;p class="d-flex <strong>align-self-end</strong> mrgn-lft-md"&gt;Paragraph is vertically moved to the bottom.&lt;/p&gt;
&lt;/div&gt;</code></pre>

Expand Down Expand Up @@ -685,7 +685,7 @@
<div class="row">
<div class="col-md-4">
<section>
<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<h3 class="h5"><a href="#" class="stretched-link">[Hyperlink text]</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
Expand All @@ -696,14 +696,14 @@
<h3 class="panel-title"><a href="#" class="stretched-link">[Hyperlink text]</a></h3>
</header>
<div class="panel-body">
<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="well position-relative">
<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<h3 class="h5"><a href="#" class="stretched-link">[Hyperlink text]</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
Expand All @@ -712,22 +712,22 @@
<h4>Code sample</h4>
<pre><code>&lt;div class="row">
&lt;div class="col-md-4">
&lt;img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;h3 class="h5">&lt;a href="#" class="stretched-link">[Hyperlink text]&lt;/a>&lt;/h3>
&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;/div>
&lt;div class="col-md-4">
&lt;div class="panel panel-default position-relative">
&lt;div class="panel-body">
&lt;img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;h3 class="h5">&lt;a href="#" class="stretched-link">[Hyperlink text]&lt;/a>&lt;/h3>
&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="col-md-4">
&lt;div class="well position-relative">
&lt;img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;h3 class="h5">&lt;a href="#" class="stretched-link">[Hyperlink text]&lt;/a>&lt;/h3>
&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;/div>
Expand Down
20 changes: 10 additions & 10 deletions src/other/utility/utility-fr.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,25 +335,25 @@
<p>Aligne un élément au centre verticalement. Cet utilitaire doit être utilisé conjointement avec <a href="#d-flex">l'utilitaire <code>d-flex</code></a>.</p>
<h4>Exemple pratique</h4>
<div class="d-flex">
<img src="https://via.placeholder.com/100" alt="" class="d-flex align-self-center mrgn-rght-md" />
<img src="https://dummyimage.com/100" alt="" class="d-flex align-self-center mrgn-rght-md" />
<p class="d-flex align-self-center mrgn-lft-md">Paragraphe centré verticalement avec l'image à côté.</p>
</div>
<h4>Exemple de code</h4>
<pre><code>&lt;div class="d-flex"&gt;
&lt;img src="https://via.placeholder.com/80" alt="" class="d-flex <strong>align-self-center</strong> mrgn-rght-md" /&gt;
&lt;img src="https://dummyimage.com/80" alt="" class="d-flex <strong>align-self-center</strong> mrgn-rght-md" /&gt;
&lt;p class="d-flex <strong>align-self-center</strong> mrgn-lft-md"&gt;Paragraphe centré verticalement avec l'image à côté.&lt;/p&gt;
&lt;/div&gt;</code></pre>

<h3><code>align-self-end</code></h3>
<p>Aligne un élément au bas. Cet utilitaire doit être utilisé conjointement avec <a href="#d-flex">l'utilitaire <code>d-flex</code></a>.</p>
<h4>Exemple pratique</h4>
<div class="d-flex">
<img src="https://via.placeholder.com/100" alt="" class="d-flex mrgn-rght-md" />
<img src="https://dummyimage.com/100" alt="" class="d-flex mrgn-rght-md" />
<p class="d-flex align-self-end mrgn-lft-md">Paragraphe placé au bas verticalement avec l'image à côté.</p>
</div>
<h4>Exemple de code</h4>
<pre><code>&lt;div class="d-flex"&gt;
&lt;img src="https://via.placeholder.com/80" alt="" class="d-flex mrgn-rght-md" /&gt;
&lt;img src="https://dummyimage.com/80" alt="" class="d-flex mrgn-rght-md" /&gt;
&lt;p class="d-flex <strong>align-self-end</strong> mrgn-lft-md"&gt;Paragraphe placé au bas verticalement avec l'image à côté.&lt;/p&gt;
&lt;/div&gt;</code></pre>

Expand Down Expand Up @@ -680,7 +680,7 @@
<div class="row">
<div class="col-md-4">
<section>
<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<h3 class="h5"><a href="#" class="stretched-link">[Lien hypertexte]</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
Expand All @@ -691,14 +691,14 @@
<h3 class="panel-title"><a href="#" class="stretched-link">[Lien hypertexte]</a></h3>
</header>
<div class="panel-body">
<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="well position-relative">
<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
<h3 class="h5"><a href="#" class="stretched-link">[Lien hypertexte]</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
Expand All @@ -707,22 +707,22 @@
<h4>Exemple de code</h4>
<pre><code>&lt;div class="row">
&lt;div class="col-md-4">
&lt;img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;h3 class="h5">&lt;a href="#" class="stretched-link">[Lien hypertexte]&lt;/a>&lt;/h3>
&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;/div>
&lt;div class="col-md-4">
&lt;div class="panel panel-default position-relative">
&lt;div class="panel-body">
&lt;img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;h3 class="h5">&lt;a href="#" class="stretched-link">[Lien hypertexte]&lt;/a>&lt;/h3>
&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="col-md-4">
&lt;div class="well position-relative">
&lt;img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;img src="https://dummyimage.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
&lt;h3 class="h5">&lt;a href="#" class="stretched-link">[Lien hypertexte]&lt;/a>&lt;/h3>
&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p>
&lt;/div>
Expand Down

0 comments on commit 91fee11

Please sign in to comment.