From 9ff5f65fa83b9e0db86c2f9ece0e3466972a1060 Mon Sep 17 00:00:00 2001
From: Rudger Gravestein <rudgergravestein@gmail.com>
Date: Thu, 14 Sep 2017 12:59:13 +0200
Subject: [PATCH 1/2] Update holder.js image data-src + create theme

to fix the images
---
 docs/4.0/examples/album/index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/4.0/examples/album/index.html b/docs/4.0/examples/album/index.html
index ecd3f35176..ccc65d6b72 100644
--- a/docs/4.0/examples/album/index.html
+++ b/docs/4.0/examples/album/index.html
@@ -65,41 +65,41 @@
 
           <div class="row">
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280/thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
           </div>
@@ -128,7 +128,7 @@
     <script src="../../../../assets/js/vendor/holder.min.js"></script>
     <script>
       $(function () {
-        Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
+        Holder.addTheme("thumb", { bg: "#55595c", fg: "#eceeef", text: "Thumbnail" });
       });
     </script>
     <script src="../../../../dist/js/bootstrap.min.js"></script>

From a96d2e2bd44fa2a7d96ec485cf0051be0b12909e Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 15 Sep 2017 13:20:25 +0300
Subject: [PATCH 2/2] album/index.html: Refactor Holder code.

---
 docs/4.0/examples/album/index.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/4.0/examples/album/index.html b/docs/4.0/examples/album/index.html
index ccc65d6b72..e086e7486b 100644
--- a/docs/4.0/examples/album/index.html
+++ b/docs/4.0/examples/album/index.html
@@ -125,12 +125,14 @@
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
     <script src="../../../../assets/js/vendor/popper.min.js"></script>
+    <script src="../../../../dist/js/bootstrap.min.js"></script>
     <script src="../../../../assets/js/vendor/holder.min.js"></script>
     <script>
-      $(function () {
-        Holder.addTheme("thumb", { bg: "#55595c", fg: "#eceeef", text: "Thumbnail" });
+      Holder.addTheme('thumb', {
+        bg: '#55595c',
+        fg: '#eceeef',
+        text: 'Thumbnail'
       });
     </script>
-    <script src="../../../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>