Media Browser

Created by chris.joinson@airangel.com, Modified on Mon, 21 Feb, 2022 at 12:13 PM by Mark Jones

TABLE OF CONTENTS

Introduction
Location
Uploading Files
Placing Images
- From the Portal Editor
- Using Code

Introduction

The media browser allows to upload and store images and fonts that can be used on customer facing portal pages.

Location

Steps	Description
1	Log into the platform
2	Select the Account Menu dropdown located at the top right of the screen and click Settings.
3	Within the settings page, locate and select the Media Browser icon which will open the Media Browser pop-up.

Uploading Files

Within the Media Browser

Steps	Description
1	Navigate to the Media Browser using the steps above.
2	Either select the Directory (folder) you wish to place your files, or create a new Directory by clicking Add Directory.
3	When you're within the chosen Directory, click Upload. The Upload pop-up will appear.
4	Select Add File. Your PCs file browser will open.
5	Navigate to your chosen file within the file browser and select it.
6	The file will be placed within the Upload Pop-up. Repeat step 4 & 5 if you have more files to add.
7	Once all files are present in the Upload pop-up, select Upload.
8	Your files will be placed into your chosen directory.

From the Portal Editor

Steps	Description
1	Navigate to the portal editor by selecting the Portals page in the left side navigation menu.
2	Select the portal you want to add images to from the portals table.
3	Scroll down to the configuration panel and select the Images tab.
4	Within the Images tab, navigate to the section you wish to upload an too and select Change Image. The image Pop-up will appear.
5	Select the Folder Icon located at the top right of the pop-up.
6	The Media Browser will appear. Use the steps above to upload an image.

Find the Image Path URL

Steps	Description
1	Navigate to the Media Browser using the steps above.
2	Find the image you wish to get the Image Path URL for.
3	Select the image within the table.
4	A pop-up will appear with the URL path. Select the copy the URL path using CTRL+C.

Placing Images

From the Portal Editor

Steps

Description

Navigate to the portal editor by selecting the Portals page in the left side navigation menu.

Select the portal you want to add images to from the portals table.

Scroll down to the configuration panel and select the Images tab.

Within the Images tab, navigate to the section you wish to upload an too and select Change Image. The image Pop-up will appear.

Select the Folder Icon located at the top right of the pop-up.

The Media Browser will appear. Navigate to the directory (folder) that your images are saved in.

Select the image you wish to use by clicking the tick box to the right of the file table.

Click Select.

You will be returned to the Image Pop-up.

There are a number of options here to customise your images placement.

Field	Field Type	Requirement	Description
Path	Text Input	Required	The path to where the file is stored. This is automatically input when the file is selected.
Position	Dropdown	Required	The position the image will take within it's container.
Repeat	Dropdown	Required	Choose whether you wish for the image to repeat if it's not big enough to cover the entire container.
Best Fit	Tickbox	Optonal	Select this option if you wish to cover the entire container.

Once you've customised your image placement, click Ok.

Using Code

If you wish to place images within a portal Content Block, you can do so using the code editor. Basic knowledge of HTML and CSS is recommended to complete this action.

Steps	Description
1	Navigate to the portal editor by selecting the Portals page in the left side navigation menu.
2	Scroll down to the Login Pag Content tab.
3	Either, select a Content block that is already present, or created a new content block by selecting Add Content. For more information on portal content, click here.
4	Once you have selected your content block, the content editor pop-up will appear. Select the white space within the pop-up to bring up the edit interface.
5	Click Source at the top left of the editor to enter the code view.
6	Enter the following code into your code view: <img src="{Image Path Here}"> If needed, navigate to the media browser using the steps above, copy the image's path and paste the copied path into the code above, replacing '{Image Path Here}'.
7	Once complete, your code should look something like this: <img src="https://media-eu.wifiportal.io/marketingdemo/TestImage.jpg">
8	Click Ok and Save.