PageFly - Use Image Manager to upload media files

84 views 0

In this article, you will learn how to upload image and use the Image Manager to edit and organize your images. The new Image Manager is built to essentially help you save time on designing and improving work efficiency.

pagefly image element 1

You can find the new Image Manager in:

  • Image element
  • Any section element
  • Video cover image of the Video element

How it works: On different devices, PageFly will generate a copied image with the dimension relevant to that device to boost image loading and page speed.

For example, on All view, you upload “my-image-01” with the dimension of 1140 x 760.

As a result, on laptop, you’ll find a new image called “my-image-01-994×663”.

On tablet, you’ll find one called “my-new-image-01-738×492”.

Finally, on mobile, you’ll find one called “my-new-image-01-290×132”.

Upload an image

You have 3 options to upload an image:

  1. Upload from computer
  2. Import from the Internet
  3. Select from Image Manager

Upload from computer

Choose the first option Upload from computer [] > then, pick the image from your device.

While the image is being uploaded, you will see a progress bar that indicates the process.

Import from the Internet

Moreover, you can upload your file using its image address.

Select Import from Internet [pagefly-image-element-import-from-internet] > copy the image address and paste to the input.

Select from Image Manager

If you want to use a recently uploaded image, simply choose Select from Image Manager [pagefly-image-element-select-from-image-manager]

On-hover options

When you hover over an uploaded image, you can find 3 options:

  1. Re-select another image from Image Manager. The Image Manager will pop up.
  2. Edit image
  3. Remove the image from display

pagefly-image-element-6

The Image Editor offers some basic but essential tools for you to edit the image. You can resize, flip, rotate, or even crop the image.

Use the Image Manager

The Image Manager has 2 tabs: My Images and Trash.

pagefly-image-manager-1

Let’s look at My Images tab first.

Upload options

Inside the Image Manager, you have 2 options to add images in. You can:

  • Import from the Internet
  • Upload from computer

pagefly image manager 2

Extra tip: It’s handy to remember that you can even drag images from your computer and drop to add files.

If you drag in 1 image, it is selected by default.

If you drag in multiple images at the same time, no image is selected.

View options

You will find 2 view options for your images, which are:

  • Grid view
  • List view

By default, uploaded images follow the order of:

  • Date: Most recently uploaded photos go on top. As you scroll down, you can find earlier photos.
  • Name: All photos are arranged in alphabetical order, from A to Z.

You can search for one, or multiple images having similar names using the Image Search.

pagefly image manager 4

Image editing

By checking on the box, you can select multiple images at the same time.

Rename

You can rename the images by hovering over its name and making a click. After that, the name is edible instantly.

Delete

You can select one or multiple images to delete, simply by clicking on them > hit Move to Trash button.

Deleted images will be moved to Trash tab.

pagefly image manager 8

Now let’s see what’s in Trash tab.

In Trash tab, you can find similar options as in My Images tab. These alike buttons are:

  • Upload from computer
  • Import from Internet
  • View options: Grid or List layout

There are 2 buttons that we should pay attention to. They are:

  • Delete forever

*Important: If your image is used in various pages at the same time, if you delete it in one page, the image will be removed from other pages too. There’s no way to restore them all together.

  • Restore. You can restore any deleted images back to My Images tab any time.

pagefly-image-manager-10

Edit

The Image Editor offers some basic but essential tools for you to edit an image.

You can resize, flip, rotate, or even crop the image.

Inside the Image Manager, while hovering over the image, you can:

  1. Edit the image by choosing the [pagefly-image-manager-edit-option] option
  2. Zoom in the images by selecting the [] option

Create custom design with different images

A special treat for the Image element is, you can upload different images to use on different devices. By using this feature, you can bring custom experiences for different groups of customers, thus enhancing your brand image.

Let’s look at the video example below:

  • First, on All view, use an image of a deer in the forest for desktop viewers.
  • Then, on Laptop view, you don’t upload new image, so laptop viewers can see the same image as desktop viewers – an image of a deer in the forest.
  • On Tablet, use an image of a flamingo with blue background for tablet viewers.
  • At last, on Mobile, use an image of 2 zebras for mobile viewers.

Et voila!

 

Was this helpful?