Update docs for image placeholders to use Unsplash (#184)

Author: thibaudcolas

docs/guides/overriding-template-tags.md

@@ -161,7 +161,7 @@ content defined in `patterns/atoms/images/image.yaml`.
 The downside of this approach is that we render the
 same template where an image can be rendered in a different size.
 So, if `patterns/atoms/images/image.html` has something like
-`<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="Placeholder">`
+`<img src="https://source.unsplash.com/200x200?ocean" width="200" height="200" alt="">`
 inside, this means that we will render image of size `200x200` few times.
 
 Probably, in the majority of cases, it's ok to render the same
@@ -194,11 +194,11 @@ tags:
         # Override {% image avatar fill-200x200 %}
         avatar fill-200x200:
             raw: >
-                <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="Placeholder">
+                <img src="https://source.unsplash.com/200x200?ocean" width="200" height="200" alt="">
         # Override {% image avatar fill-200x400 %}
         avatar fill-200x400:
             raw: >
-                <img src="http://via.placeholder.com/200x400" width="200" height="400" alt="Placeholder">
+                <img src="https://source.unsplash.com/200x400?ocean" width="200" height="400" alt="">
 
 # Override context, if needed
 ```
@@ -233,7 +233,7 @@ tags:
         avatar fill-200x200 as avatar_thumbnail:
             raw:
                 file: "/path/to/avatar/file"
-                url: "http://via.placeholder.com/200x200"
+                url: "https://source.unsplash.com/200x200?ocean"
 ```
 
 Note that the example above will only work if our `image` is a
@@ -249,7 +249,7 @@ tags:
             target_var: avatar_thumbnail
             raw:
                 file: "/path/to/avatar/file"
-                url: "http://via.placeholder.com/200x200"
+                url: "https://source.unsplash.com/200x200?ocean"
 ```
 
 Note the `target_var` field.

docs/recipes/image-include.md

@@ -1,5 +1,7 @@
 ## Image include
 
+To create test cases for images, we recommend using an image hotlinking service like [Unsplash](https://unsplash.com/) or [placeholder.com](https://placeholder.com/).
+
 ```jinja2
 <img src="{{ imageSmall.url }}" data-src="{{ imageLarge.url }}" width="{{ width }}" height="{{ height }}" alt="{{ imageLarge.alt }}" class="{{ classList }} lazyload">
 ```

docs/recipes/image-lazyload.md

@@ -13,11 +13,11 @@ tags:
     slide.image fill-100x71 as imageSmall:
       target_var: imageSmall
       raw:
-        url: '//placekitten.com/100/71'
+        url: 'https://source.unsplash.com/100x71?ocean'
     slide.image fill-829x585 as imageLarge:
       target_var: imageLarge
       raw:
-        url: '//placekitten.com/829/585'
+        url: 'https://source.unsplash.com/829x585?ocean'
         width: '829'
         height: '585'
 ```