Use @2x & @3x fallback images in the filepicker. Fix #952

CHANGELOG.md

@@ -7,6 +7,7 @@
     * Fixed issue `admin.super` or `admin.users` users changing the account when saving another user [#713](https://github.com/getgrav/grav-plugin-admin/issues/713)
     * Fix issue where non `admin.super`/`admin.users` users could see other users profiles [#713](https://github.com/getgrav/grav-plugin-admin/issues/713)
     * Fix removing responsive image from page media [#111](https://github.com/getgrav/grav-plugin-admin/issues/111) [#952](https://github.com/getgrav/grav-plugin-admin/issues/952)
+    * Use @2x & @3x fallback images in the filepicker. [#952](https://github.com/getgrav/grav-plugin-admin/issues/952)
 
 # v1.2.10
 ## 1/30/2017

themes/grav/app/forms/fields/filepicker.js

@@ -70,9 +70,17 @@ export default class FilePickerField {
         let renderOption = function renderOption(item, escape) {
             let image = '';
             if (imagesPreview && folder && item.status === 'available' && item.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
+                var insertTextInStringAt = function insertTextInStringAt(string, index, text) {
+                    return [string.slice(0, index), text, string.slice(index)].join('');
+                };
+
+                let fallback1 = insertTextInStringAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@2x');
+                let fallback2 = insertTextInStringAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@3x');
+
                 image = `
-                    <img class="filepicker-field-image" 
-                         src="${config.base_url_relative}/../${folder}/${item.name}"/>`;
+                    <img class="filepicker-field-image"
+                         src="${config.base_url_relative}/../${folder}/${item.name}"
+                         onerror="if(this.src=='${fallback1}'){this.src='${fallback2}';this.onerror='';}else{this.src='${fallback1}'};" />`;
             }
 
             return `<div>