File Manager
All Video Tutorials / Editor 101 / File Manager
File Manager
Outside of fonts and layouts, Images are one of the most important aspects to a good looking website. And having an easy way to upload, organize, and use your images is just as important. In this video we are going to discuss everything you need to know about using File Manager. Let’s jump in.
Images
Accessing the File Manager is easy, simply click on the “Files” button in the top left corner of Editor. File Manager will automatically open up to the Images section. This section is where you can find every image used on your site. Images in Editor aren’t hidden or tucked away in a spot that’s hard to find, and even images uploaded directly from a page will be automatically added here for easy reference and editing. With all of these images being stored in one place, it can easily become disorganized. For that… we can use Folders.
Folders
Folders in the File Manager act similar to how they do on your own computer. You can title them whatever you would like, put images inside of them, and even put folders inside of folders! With this simple feature, your images in File Manager can always stay organized.
Views
Now that we know the basics about what is stored in File Manager, let’s talk about the two different ways to view your images.
The first is.. List View. List View is also a similar looking view to what you might see on your own computer. Each image is put in a list, with various image information in the row. The first column of information in each row is the “image id number”, this is a unique number that represents the image you uploaded. You will not need to use this number nor can you change it, but it will be used by Editor when referencing that specific image on a page. This means.. that even if you move your image to a different folder within File Manager, none of the images on your website pages will break. This is because Editor is referencing the image ID number rather than the folder location. The next column of information is the image thumbnail. This will show you a small preview of the image you uploaded. If it is hard to see what the image contains, don’t worry, our next view: “Grid View” will help solve that. Okay, next we have the File Name. This is the text that describes what your image contains. It is important here to name your files intentionally. This is because of search-ability for you and accessibility for your visitors. The next column is “Type”. This will show you what image type your file is formatted in.
Remember here, “png” typically includes a transparent background, while “jpeg” does not. Next is the upload date and size. These two columns show you when the image was uploaded to file manager and how big the file size is. This isn’t incredibly important information when using File Manager, but still handy to be able to reference. The last feature is called: “Locations on Site”. This allows you to see where your image has been used on the site.
All of this information is helpful to use at a glance, but what if you just want to find an image, and that preview image is too small? That’s why.. we’ve made.. “Grid View”. Grid View prioritizes displaying your images while hiding all of the other information. It’s truly the best way to see your images big and bold.
So that’s List View and Grid View: two easy ways to see all of your images and the details you need.
Upload
Now, let’s upload a new image to File Manager. Let’s say I want to add a new logo to our sponsored partners list. I’ll first navigate the folder I want to add an image to. Then, let’s click on the “Upload Image” button at the top of the File Manager. We can select the image from our computer that we want to select and click “Upload”. Editor will then dynamically resize the resolution of the image based on how it’s used. This means that you don’t need to adjust your image with an online “resizer” or compressor. Editor handles all of it… seamlessly.
You can see that the image appears in our “Scrolling Logos” folder now. When we click on the image a variety of buttons appear that allow you to edit the image you just uploaded. Let’s take a moment to go over everything you need to know about editing images in File Manager.
Editing Images in File Manager
The first setting is the File Name. Like I mentioned earlier, it is important to name your files accurately, so let’s do that now… Next we have a variety of buttons, each with specific actions. The first button is “Use”. You can see that right now it is greyed out… this is because we aren’t currently choosing which page to add it to. We will come back to this later. Okay, the next button is the preview button. Clicking this opens your image in full screen, so you can make sure every tiny detail is right before use! Crop is next. When you click this button you are taken the to crop tool. Here you can resize your image or crop out something from the background. Let’s click save. You’ll notice that back in the file manager we can see our cropped image is saved as a copy from the original image. Take note of that..
If we click on our original image again and select “Edit”, the Edit Image Tool appears with a handful of other useful features. This is such a powerful feature in Editor because it eliminates the need for separate image editing software for basic edits, you can do it all right here in Editor… We can see options like Filters, where we can apply greyscale, pixelate, polaroid, or other filters. We can also crop like before, but with aspect ratios now too. We can transform our image by rotating or reflecting. Point out something specific with the draw tool. Add text or even shapes! The Image Editing Tool is a one stop shop to get your photos website-ready. Let’s click save and apply on this as well. You can see how our edits were saved as a copy just like before. You will never have to worry about messing up your image because every time you make an adjustment… it saves.. as a copy.
The last two buttons in this menu are “Link” and “Delete”. When you click on the Link button you will be redirected to a URL that displays the image. We can copy this URL and use it anywhere on the internet. Maybe as a the URL to your business logo, or on an email marketing platform. The point is this: every image in File Manager has a custom URL that will never change, use it how you might need to. The last button is “Delete”. Clicking this button will open a pop up asking whether you are sure if you want to delete the image. This is where our “Location on Site” column comes into play. We can quickly see if the image is being used somewhere on the site. If its not, then you can delete with peace of mind, knowing that none of your pages change… If you try to delete an image that IS being used, Editor will prevent it until you replace the original image with something new. This helps to prevent user error and keeps your website looking great!
Files
Instead of adding an image to your site let’s say we wanted to upload our most recent PDF brochure. To do this, we need to go to the files section. Let’s click on the files button on the left. You’ll see that the folder section looks nearly identical to the image section giving you all of the same customization features such as folders and file naming. Let’s click the upload button to add our PDF to File Manager. We will select it from our computer, press upload, and add it to our desired folder, it’s truly as easy as that!
And you can see that we have the same file properties from earlier, such as “File Name”, “Type”, “Date”, “Size”, and “Location on Site”… Clicking on the PDF will also open the menu of buttons we saw earlier. We can “use” the file on our site, get the link to use elsewhere, or “delete” the document.
Adding images and files to File Manager is easy and intuitive using Editor. Let’s actually take a look at a real example on one of our website pages.
Uploading Image From Site
Adding a new employee photo to our staff page is easy using Editor, let me show you how. We will first go to our staff page from Page Manager. Then we will scroll down until we see the list of employees. Let’s click “Add New Staff Member” in the top right corner. I’ve filled out some of this information ahead of time so that we can just focus on the image. I’ll click on the add new image button and you’ll notice I’m redirected to… you guessed it, File Manager. We can navigate through our folders to find the exact image we are looking for. I’ll click on “Staff Photos” and then “Upload Image”… Now that the image is uploaded we can scroll down and click the “Use” button.
Now that we have the image selected, you will see a positioning tool that kind of looks like a mirror maze. Each of these differently sized boxes show you how your image will look as it is cropped to the frame on the page. Some of your images will be a page banner that are primarily long, horizontal photos. Others will be a vertical blog post preview image. It's important to consider how the image will be positioned regardless of its frame size. To do this, we'll click and drag the circle to place the focus on the subject of the photo. Once each of the differently sized frames makes the image still look good we can click “Save”. And just like that, the image is added to our staff list.
Two Closing Features
To wrap up the features of File Manager, I want to introduce you to two final features. The first is the “View Recent Uploads” button. Let’s head back to File Manager to check it out. We will find that button in the top right corner of File Manager. When we click it, it will only show us images or files that were uploaded recently and sorted by upload date. Pretty cool right?
The last feature is Search. When you have too many folders and can’t find the photo you are looking for, Search is the tool to use. This is one of the reasons naming your files properly comes in handy. Simple type in keywords from the file name and your images will appear.
I hope that you now have a comprehensive understanding of how to use File Manager in Editor. Take a look at our video on Image Best Practices to get a better understanding of how to choose the right photos for your site. You can also continue on with our Editor 101 series to learn about everything Editor has to offer. Until next time.