Настройка гостевого портала — адаптивное фоновое изображение

Настройка гостевого портала — адаптивное фоновое изображение, UniFi Network

kyleinprogress

Guest

20.09.2016 19:14:00

В настоящее время, когда вы настраиваете гостевой портал и загружаете фоновое изображение, отображается именно тот размер, который вы загрузили, независимо от размера экрана. То есть, если вы загрузите изображение размером 600x400, а смотрите на мониторе 1920x1080, у вас отобразится именно 600x400 и будет по центру экрана (если не выбрана опция плитки). Я внес несколько изменений в HTML/CSS, чтобы независимо от размера загруженного изображения оно занимало весь экран и автоматически масштабировалось под размер экрана. Это удобно, например, если загрузить качественную картинку 1920x1080 и смотреть на мобильном устройстве — она сжимается по высоте, и видно больше фона, при этом сохраняется пропорциональность.

Это довольно простое исправление, возможно, в следующий раз оно появится в портале из коробки, и не придется править шаблоны вручную.

Переходим к инструкциям!

Несколько замечаний и предположений:
- Пишу это, работая на контроллере версии 5.3.2
- Контроллер установлен на Ubuntu сервере, а не на рабочем столе, так что гостевой портал работает круглосуточно
- Всё делаю на «default» сайте, если вы настраиваете отдельный сайт — нужно будет подправить некоторые URL, добавив вашу siteID
- Использую актуальную версию Google Chrome, но должно работать во всех современных браузерах
- Похоже, есть ограничение на размер загружаемого фонового файла — у меня проблемы возникают с файлами больше 1 МБ, так что лучше держать размер меньше этого для стабильной работы

Заходим в контроллер и выбираем пункт «Guest Control». Разумеется, гостевой портал должен быть включен.
Выбираем следующие опции:
Template Engine: AngularJS
Override Default Templates: ставим галочку
Title: вводим любое название
Portal Customization: выбираем и загружаем фоновое изображение. Не ставьте галочку «Tile Background Image».
Добавьте любые другие настройки на ваше усмотрение — цвета, условия использования, приветственный текст.
Увидите предпросмотр вашего портала. Когда закончите, нажмите «Apply Changes».

Переходим по URL вашего портала. У меня это https://<ipaddress-of-controller>:8443/guest/s/default/#/
(Здесь как раз видно, что изображение не масштабируется — измените размер окна браузера, и фон будет просто обрезаться, а не подстраиваться под окно.)

В Chrome нажмите правой кнопкой по изображению и выберите «Inspect» («Просмотреть»). Откроется панель с HTML кодом — она может появиться либо снизу, либо справа, в зависимости от настроек.
В исходном коде найдите тег <body> и кликните по нему. Справа появятся CSS-свойства тега. Нас интересует свойство background-image — именно там задано фоновое изображение. Скопируйте это значение и сохраните в текстовый файл.

Теперь нужно зайти на сам контроллер и отредактировать несколько файлов. Для моего контроллера файлы находятся здесь:
/usr/lib/unifi/data/sites/default/app-unifi-hotspot-portal

Замените строку:
<link href="css/app.css?v=1.0.2" rel="stylesheet">
на
<link href="css/app.css?v=1.0.2" rel="stylesheet"> <link href="css/background.css" rel="stylesheet">

Зайдите в папку css и создайте новый файл background.css, в который добавьте следующий код:

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;
}

Обратите внимание, что URL — это то, что мы скопировали на шестом шаге.

Теперь вернитесь на страницу портала и обновите её. Вы увидите, что внешний вид не изменился, но теперь при изменении размера окна фоновое изображение подстраивается под размер экрана.

BlakDrgn Guest	#2 02.10.2018 00:02:00 Просто из любопытства, приходится ли каждый раз отменять это, чтобы поменять фон?

SeattleSi Guest	#3 20.10.2017 22:01:00 Всем привет! Я в такой же ситуации. У меня стоит 5.5.24 на Raspberry Pi, и я вижу то же самое, что и cderring. Искал index.html, но пока безуспешно. Заранее спасибо!

cderring

Guest

06.10.2017 20:55:00

Я бы с радостью этим занялся, но в мире Linux я немного слабоват. Когда дошёл до шага 7, обнаружил, что у меня нет такой структуры каталогов. У меня путь такой: "/usr/lib/unifi/data/sites/default/portalfile/<длинная_строка>", и дальше ничего нет. Я не совсем понимаю, где у меня находится фон.

Я запускаю Controller 5.5.20 на Ubuntu 16.04 LTS, размещённом в Azure. В моём исходном коде, который ссылается на фон, есть вот этот элемент: <body unifi-portal-custom-body="" unifi-portal-custom-body-background-color="mainCtrl.getHotspotConfigModel().bg_color" unifi-portal-custom-body-background-image="mainCtrl.getHotspotConfigModel().getBgImageUrl()" unifi-portal-custom-body-background-image-tile="mainCtrl.getHotspotConfigModel().bg_image_tile" data-gr-c-s-loaded="true" class="ng-isolate-scope" style="background-color: rgb(35, 48, 65); background-image: url("/guest/s/default/portalfile/59d7e84de4b02287c7692335?portalfile=true"); background-repeat: no-repeat; background-position: center center;">

Мне стоит искать в /guest/s/default/portalfile/? Буду очень признателен, если кто-то подскажет, в каком направлении копать.

hitman67 Guest	#5 22.09.2017 05:32:00 Огромное спасибо за полезный пост. У меня есть один вопрос: не перезапишет ли это следующее обновление прошивки? Энди

alex_cambui Guest	#6 25.12.2016 13:52:00 Отлично, спасибо. Пара моментов, которые я понял из вашего поста и которые могут помочь новичкам вроде меня в будущем, если кто-то будет читать это позже. Пункт номер 6 звучит так: «В исходном коде найдите тег <body> и кликните по нему. Справа появятся CSS-свойства этого тега. Вам нужно найти свойство background-image. Именно там задаётся фоновое изображение. Нужно скопировать его и сохранить в текстовом файле». Я разобрался, но новичкам, возможно, будет понятнее, если написать так: «...вам нужен URL из свойства background-image...». Пункт номер 8 — файл, который нужно редактировать, называется index.html — возможно, стоит уточнить, что именно в этом файле нужно заменить строку кода. Глупые моменты, которые большинство и так поймёт, но на всякий случай! Отличное решение — спасибо!

Читают тему (гостей: 1)