The Media Library allows you host all your images in one location and use them in a variety of places throughout your app such as image carousels, list images, background images, and more.

It lets you edit your images right with the system with our build in image editing tool and also provides thousands of high quality stock images from thousands of professional photographers. 

As such, the Media Library is a great way to speed up adding images to your app.

Some use cases of this feature include:

The Media Library provides amazing functionality as described in the introduction, but read on to see what some of the core features are and how to set them up.

Step 1: Access the Media Library
You can access the Media Library in the left side menu of the Control Panel and by triggering it throughout the Control Panel by clicking on a component that will require an image such as image carousels, list images, and background images.

Step 2: Drag and drop your images or click to find them on your device's local storage
Once they're uploaded, you will see a green success message letting you know they're ready for use.

We built the ability to edit images right within the system so that you don’t have to fuss with transferring them between third party programs. Here’s how you can edit your images:

Step 1: Access the Media Library
You can access the Media Library through the left hand menu of the Control Panel or through the clicking on a component in the content editor that will pull up the Media Library such as the image carousel, list image, background image, ect.

Note: The Content Editor is what exists between the menu on the left and the emulator on the right of the Control Panel.

Step 2: Hover over an image and click the green edit icon

Step 3: Choose from a variety of editing tools

Step 4: Click “Apply” and then “Save”

Step 5: Choose to replace your existing image or create a new one
I highly recommend choosing to create a new image. This way, your original image will still be in the Media Library in case you ever want to use it again.

Our stock images bring you a library of thousands of high quality, beautiful images from professional photographers around the world. Here’s how you can add them to your app:

Step 1: Access the Media Library through the Content Editor
The stock images are only available through the content editor, so if you don’t see them, it’s probably because you’ve accessed the Media Library through the left hand menu and not actually through the content editor.

Step 2: Click “Stock Images”

Step 3: Use a keyword to search for the type of image you want

Step 4: Select the image(s) you want to use

Step 5: Click “Insert Image(s)” in the bottom right hand corner

You can add images to a text box wysiwyg by following the instructions under the section called "How to add/embed an image and make it responsive" in our dedicated article about using the text wysiwyg feature.

In order to do so, you'll need the full sized image URL. Here's how you can get that.

Step 1: Open your Media Library and locate the image you want to use

Step 2: Right click on the image and select "Open Image in New Tab"

Step 3: Go to the new tab where the image opened up

Step 4: Remove the first part of the image URL before the second "http"
​The first part of the URL exists to shrink the image down so that it renders a scaled down version in the Media Library. 

Step 5: Load the new URL by pressing "Enter/Return" on your keyboard
​By removing the first part of the URL and loading the adjusted URL, you'll end up with the full sized image.

Step 6: Follow the instructions on our dedicated Text WYSIWYG tutorial
Again, you can access our dedicated article about using the text wysiwyg feature and follow the instructions under the section called "How to add/embed an image and make it responsive".

The Feature (aka Plugin) Icon/Image enables you to use icons as well as images. Most of the time, images will be much more visually appealing and make your app appear higher quality than icons will, however, there are some use cases where they come in handy.

Step 1: Go to an existing Feature (aka Plugin) and click “Image/Icon”

Step 2: Click “Icons” at the top

Step 3: Select the icon you want

 Step 4: Click “Insert” in the bottom right corner

Having worked with apps for years, we’ve learned a thing or two. So, to both help your app stand out and accomplish your primary goals, here are some tips you should consider.

Pro Tip 1: Adding Images To A Text Box
If you would like to add an image to a text box wysiwyg, you'll need to grab the image address by right clicking on the image and copying the image address. Once you have copied the image address, you will need to paste the address in the ‘Source’. (See Screenshot)

Pro Tip 2:  Add Your Logo/ Text To Your Images
With our Photo Editor, you can add your company logo to images that are hosted throughout your app! You can also add Text on top of your images to give them a additional information.  

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)