You can watch the video below
In this article, you will learn how to upload an 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.
You can find the new Image Manager in:
- Image element
- Any section element
- Video element
How it works: On different devices, Pagefly will generate a copied image with relevant size 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 the 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:
- Upload from computer
- Import from Internet
- 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 [
] > 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 [
]
Extra tip: It’s handy to remember that you can even drag and drop to upload images if you’re in the Image Manager.
If you drag in 1 image, that image is selected by default.
If you drag in multiple images at the same time, no image is selected by default.
On-hover options
When you hover over an uploaded image, you can find 3 options:
- Re-select another image from Image Manager. The Image Manager will pop up.
- Edit image
- Remove the image from display
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.
Let’s look at the My Images tab first.
Upload button
Inside the Image Manager, you have 2 options to add images in. You can:
- Import from the Internet
- Upload from computer
Extra tip: It’s handy to remember that you can even drag images from your computer and drop 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, images are sorted by:
- Date: Most recently uploaded photos are placed first. As you scroll down, you can find earlier photos.
- Name: All photos are arranged in alphabetical order, from A to Z.
Image Search
You can search for one, or multiple images that have similar names using the Image Search.
Image editing
By checking on the box, you can select multiple images at the same time.
Rename
You can rename the images directly inside the Image Manager, by hovering over its name and clicking. After that, the name is instantly editable.
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 the Trash tab.
Now let’s see what’s in the Trash tab.
In the 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:
1. Delete forever
Important: If your image is used on various pages at the same time, if you delete it on one page, the image will be removed from other pages too. There’s no way to restore them all together. You will be notified as below.
2. Restore. You can restore any deleted images back to My Images tab any time.
Edit
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.
Inside the Image Manager, while hovering over the image, you can:
- Edit the image by choosing the [
] option - Zoom in on 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 customized 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 girl for desktop viewers.
- Then, on the Laptop view, you don’t upload a new image, so laptop viewers can see the same image as desktop viewers – an image of a girl in the forest.
- On Tablet, use an image of a tree for tablet viewers.
- At last, on Mobile, use an image of Christmas ball ornaments for mobile viewers.
Et voila!
PageFly Assets theme – DO NOT DELETE
This is the place that contains all the images that you upload to the image manager. You can find this by going to the Shopify Admin > Online Store > Themes > scroll down to see the PageFly Assets theme – DO NOT DELETE.
And one more important thing: DO NOT delete this because if you delete this, then all your images will be lost.
This video will let you know about creating the basic layouts with the Image element.
