Guest Portal Customization - Responsive Background Image [ New ]  



Currently, when you customize the guest portal and upload a background image, whatever size you upload is what is displayed, regardless of the screen size. So if you upload a 600x400 image, but view it on a 1920x1080 monitor, you'll get a 600x400 image centered in the screen (unless you select tile).

 

I made a few tweaks to the HTML/CSS so that regardless of what size image you upload, you get a full screen background image and it resizes based on the size of the screen. This is nice when you upload a nice 1920x1080 sized picture and view it on mobile, it shrinks it to the height so you can see more of the background image and it's all proportional. 

 

This is a pretty easy fix, so maybe it'll make it's way into the portal in an upcoming version so we don't have to modify the templates by hand.

 

On to the directions!

 

A couple of notes/assumptions:

  • I'm writing this up as I'm running controller version 5.3.2
  • I'm running the controller on a ubuntu server, not on a desktop so the guest portal is available 24/7
  • I'm doing this all from the default site, so if you are trying to do this on a separate site, you'll need to modify some of the URLs to include your siteID
  • I'm using an up-to-date version of Google Chrome to do this. It should work on most modern browsers though.
  • There appears to be a limit on the filesize the background upload will accept. I seem to get a problem above 1M, so try and keep the filesize below that for best results.
  1. Log into your controller and click the "Guest Control" option. You'll obviously need to enable to guest portal.
  2. Select the following options:
    1. Template Engine: AngularJS
    2. Override Default Templates: Check
    3. Title: Whatever you want
    4. Portal Customization: Select a background image and upload it. Do NOT check the "Tile Background Image" option.
    5. Add any additional customization you would like such as colors, terms of service, and welcome text.
  3. You should see a preview of what you want your portal to look like. Once that's done, click "Apply Changes".
  4. Navigate to your portal URL. Mine is https://<ipaddress-of-controller>:8443/guest/s/default/#/ (At this point, you can see what I mean by the image not scaling. Change the size of your browser window and you'll see the background image just gets cropped, not resized.)
  5. In Chrome, right click on the image and select "Inspect". You'll see a box pop up with the HTML either on the bottom or to the right depending on how you have Chrome setup.
  6. In the source code, look for the the <body> tag and click on it. You'll see the CSS properties of the tag show up on the right. What you're looking for is the background-image property. This is where the background image is being set. We need to copy this and save it in a text file.
    Screen Shot 2016-09-20 at 1.59.30 PM.png    
  7. Now we need to hop on the actual controller and edit some files. For my controller, the files are located here: 

    /usr/lib/unifi/data/sites/default/app-unifi-hotspot-portal

  8. Replace this line of code:
    <link href="css/app.css?v=1.0.2" rel="stylesheet">
    with 
    <link href="css/app.css?v=1.0.2" rel="stylesheet">
<link href="css/background.css" rel="stylesheet"> 
  9. Go into the css folder and create a new file called background.css and add this:
    html {
  background: url(/guest/s/default/portalfile/57e17c510cf2e0ad3cbc8fde?portalfile=true) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
     Notice the URL is what we copied up in step 6.
  10. Now, go back to your portal page and refresh. It should look exactly the same, but now when you change the window size, the background image adjusts to fit the screen size.


Note

A couple of points that I worked out from your post that would help for novices like me in the future, just in case anyone reads this in the future.

 

Point number 6 reads 'In the source code, look for the the <body> tag and click on it. You'll see the CSS properties of the tag show up on the right. What you're looking for is the background-image property. This is where the background image is being set. We need to copy this and save it in a text file.'

 

I worked it out, but it might be easier for novices if it read '..what you're looking for is the URL for the background-image property...'

 

Point number 8 - the file that you want to edit is called index.html - replace this line of code in index.html perhaps.


Full article

https://community.ubnt.com/t5/UniFi-Wireless/Guest-Portal-Customization-Responsive-Background-Image/td-p/1682050