Add smaller mobile friendly images

modules/core/client/directives/tr-boards.client.directive.js

@@ -15,7 +15,7 @@
     .directive('trBoards', trBoardsDirective);
 
   /* @ngInject */
-  function trBoardsDirective() {
+  function trBoardsDirective($window) {
     return {
       restrict: 'A',
       replace: false,
@@ -33,7 +33,8 @@
             'url': 'https://www.flickr.com/photos/artfullife/3589991695',
             'license': 'CC',
             'license_url': 'https://creativecommons.org/licenses/by-sa/2.0/',
-            'file': 'flickr-bokeh.jpg'
+            'file': 'flickr-bokeh.jpg',
+            'file_mobile': 'flickr-bokeh--mobile.jpg'
           },
           'forestpath': {
             'name': 'Johnson', // Johnson Cameraface
@@ -81,15 +82,17 @@
             'url': 'https://aaoutthere.wordpress.com/',
             'license': 'CC',
             'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
-            'file': 'af-rainbow-people.jpg'
+            'file': 'af-rainbow-people.jpg',
+            'file_mobile': 'af-rainbow-people--mobile.jpg'
           },
           'happyhippies': {
             // Permission granted for Trustroots (asked by Mikael Korpela)
             'name': 'Antonio Fulghieri',
             'url': 'https://aaoutthere.wordpress.com/',
             'license': 'CC',
             'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
-            'file': 'af-happyhippies.jpg'
+            'file': 'af-happyhippies.jpg',
+            'file_mobile': 'af-happyhippies--mobile.jpg'
           },
           'desertgirl': {
             // https://www.facebook.com/agniete.melisa
@@ -103,14 +106,16 @@
             // Permission granted for Trustroots (asked by Mikael Korpela)
             'name': 'Andrea Nieblas',
             'url': 'https://www.flickr.com/photos/andreanieblas/',
-            'file': 'an-wavewatching.jpg'
+            'file': 'an-wavewatching.jpg',
+            'file_mobile': 'an-wavewatching--mobile.jpg'
           },
           'hitchgirl1': {
             // https://www.facebook.com/just.kozmic.blues
             // Permission granted for Trustroots (asked by Mikael Korpela)
             'name': 'Gytė',
             'url': 'https://www.facebook.com/upe.pati.teka',
-            'file': 'gh-hitchgirl1.jpg'
+            'file': 'gh-hitchgirl1.jpg',
+            'file_mobile': 'gh-hitchgirl1--mobile.jpg'
           },
           'hitchgirl2': {
             // https://www.facebook.com/matasirastrauskas
@@ -123,52 +128,59 @@
             // https://unsplash.com/photos/VNseEaTt9w4
             'name': 'Sven Scheuermeier',
             'url': 'https://unsplash.com/sveninho',
-            'file': 'ss-mountainforest.jpg',
             'license': 'CC',
-            'license_url': 'https://creativecommons.org/publicdomain/zero/1.0/' // https://unsplash.com/license
+            'license_url': 'https://creativecommons.org/publicdomain/zero/1.0/', // https://unsplash.com/license
+            'file': 'ss-mountainforest.jpg',
+            'file_mobile': 'ss-mountainforest--mobile.jpg'
           },
           'tribes-1': {
             // Permission granted for Trustroots (asked by Mikael Korpela)
             'name': 'Antonio Fulghieri',
             'url': 'https://aaoutthere.wordpress.com/',
             'license': 'CC',
             'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
-            'file': 'tribes-1.jpg'
+            'file': 'tribes-1.jpg',
+            'file_mobile': 'tribes-1--mobile.jpg'
           },
           'woman-bridge': {
             'name': 'Michael Hull',
             'url': 'https://unsplash.com/photos/JibIPPrvITE',
             'license': 'CC',
             'license_url': 'https://unsplash.com/license',
-            'file': 'mh-woman-bridge.jpg'
+            'file': 'mh-woman-bridge.jpg',
+            'file_mobile': 'mh-woman-bridge--mobile.jpg'
           },
           'nordiclights': {
             'name': 'Vincent Guth',
             'url': 'https://unsplash.com/photos/62V7ntlKgL8',
             'license': 'CC',
             'license_url': 'https://unsplash.com/license',
-            'file': 'nordic-lights.jpg'
+            'file': 'nordic-lights.jpg',
+            'file_mobile': 'nordic-lights--mobile.jpg'
           },
           'jungleroad': {
             'name': 'Dean Johns',
             'url': 'https://unsplash.com/photos/MgZWbdCKcGg',
             'license': 'CC',
             'license_url': 'https://unsplash.com/license',
-            'file': 'jungleroad.jpg'
+            'file': 'jungleroad.jpg',
+            'file_mobile': 'jungleroad--mobile.jpg'
           },
           'sahara-backpacker': {
             'name': 'Nova Togatorop',
             'url': 'http://novatogatorop.com/',
             'license': 'CC',
             'license_url': 'https://unsplash.com/license',
-            'file': 'ak-sahara.jpg'
+            'file': 'ak-sahara.jpg',
+            'file_mobile': 'ak-sahara--mobile.jpg'
           },
           'hitchtruck': {
             'name': 'Nova Togatorop',
             'url': 'http://novatogatorop.com/',
             'license': 'CC',
             'license_url': 'https://unsplash.com/license',
-            'file': 'nt-hitchtruck.jpg'
+            'file': 'nt-hitchtruck.jpg',
+            'file_mobile': 'nt-hitchtruck--mobile.jpg'
           }
         };
 
@@ -180,8 +192,12 @@
 
         // Add photo as a background to the element
         elem.addClass('board-' + key);
+
+        // For small screens, if mobile image exists, use it
+        var file = ($window.innerWidth <= 480 && photo.file_mobile) ? photo.file_mobile : photo.file;
+
         elem.css({
-          'background-image': 'url(/modules/core/img/board/' + photo.file + ')'
+          'background-image': 'url(/modules/core/img/board/' + file + ')'
         });
 
         // To prevent key being literally `key`: `{key: ...}`, we want it to be actual keyname such as `hitchroad`.