Add a new parameter for low-resolution background image, and trigger it if viewport width is smaller than 600px ( => mobile )

Author: cdujeu

core/src/plugins/gui.ajax/manifest.xml

@@ -120,6 +120,19 @@
                       label="CONF_MESSAGE[Background Attributes (6)]" description="CONF_MESSAGE[Attributes of the image used as a background]"
                       mandatory="false" expose="true" default="background-repeat:repeat;background-size:140%;background-position:50% 50%;"/>
 
+        <global_param name="WELCOME_PAGE_BACKGROUND_LOWRES" group="CONF_MESSAGE[Page Background Images]" type="image" label="CONF_MESSAGE[Low-Resolution Background]" description="CONF_MESSAGE[Make sure to use a smaller resolution image, otherwise mobile loading is very slow.]" mandatory="false"
+                      editable="true"
+                      uploadAction="store_binary_temp"
+                      loadAction="get_global_binary_param"
+                      defaultImage="plugins/gui.ajax/res/themes/orbit/images/hires-photos/03-mobile.jpg"
+                      expose="true"
+                />
+
+        <global_param name="WELCOME_PAGE_BACKGROUND_ATTRIBUTES_LOWRES" group="CONF_MESSAGE[Page Background Images]" type="select"
+                      choices="background-repeat:no-repeat;background-position:50% 50%;|CONF_MESSAGE[Center in Page (no-repeat)],background-repeat:repeat;background-size:140%;background-position:50% 50%;|CONF_MESSAGE[Fetch Window (repeat vertically)],background-repeat:no-repeat;background-size:100%; background-position:center center;|CONF_MESSAGE[Fetch Window (no repeat)],background-repeat:repeat;|CONF_MESSAGE[Tile (repeat both directions)]"
+                      label="CONF_MESSAGE[Background Attributes (Low Resolution)]" description="CONF_MESSAGE[Attributes of the image used as a background]"
+                      mandatory="false" expose="true" default="background-repeat:repeat;background-size:140%;background-position:50% 50%;"/>
+
         <global_param name="CUSTOM_SHAREPAGE_BACKGROUND_1" group="CONF_MESSAGE[Minisite]" type="image" label="CONF_MESSAGE[Custom Background (1)]" description="CONF_MESSAGE[Image used as a background]" mandatory="false"
                       editable="true"
                       uploadAction="store_binary_temp"

core/src/plugins/gui.ajax/res/js/ui/prototype/class.AjxpPane.js

@@ -519,6 +519,10 @@ Class.create("AjxpPane", {
             bStyles.push("background-image:url('"+bgrounds[paramPrefix+index]+"');" + (bgrounds[paramPrefix + 'ATTRIBUTES_'+index]?bgrounds[paramPrefix + 'ATTRIBUTES_'+index]:''));
             index++;
         }
+        if(document.viewport.getWidth() < 600 && bgrounds[paramPrefix+'LOWRES']){
+            // This is probably a mobile, let's force switching to low res.
+            bStyles = ["background-image:url('"+bgrounds[paramPrefix+'LOWRES']+"');" + (bgrounds[paramPrefix + 'ATTRIBUTES_'+'LOWRES']?bgrounds[paramPrefix + 'ATTRIBUTES_'+'LOWRES']:'')];
+        }
         if (bStyles.length) {
             i = Math.floor( Math.random() * bStyles.length);
             var bg = bStyles[i];

core/src/plugins/gui.ajax/res/themes/orbit/css/media.css

@@ -180,13 +180,7 @@ and (max-width : 420px){
         font-size: 20px;
         font-weight: lighter;
         text-transform: uppercase;
-        margin: 0px 0;
-    }
-
-    div#background-imager{
-        background-image: url(../images/hires-photos/03-mobile.jpg) !important;
-        background-position: 50% 50%;
-        background-repeat: repeat repeat;
+        margin: 0 0;
     }
 
     div.dialogBox{

core/src/plugins/gui.mobile/ajxp-mobile.css

@@ -104,12 +104,6 @@ a.m-2.disabled {
     background-image: url('../gui.ajax/res/themes/vision/images/grid_t.png');
 }
 
-.ajxp_theme_orbit div#background-imager{
-    background-image: url(../gui.ajax/res/themes/orbit/images/hires-photos/03-mobile.jpg) !important;
-    background-position: 50% 50%;
-    background-repeat: repeat repeat;
-}
-
 #uploadBrowseButton{
     display: none !important;
 }