HOW TO UPLOAD IMAGES & FILES


S04 | E07 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  3 min read |  2 min video

Web School Series 4 Episode 7

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

You already know that you can upload images either in the Files area, or in the Visual Page Editor when you upload a new image via the image component or background image. In this Episode, we'll look at some of the best practice tips for optimising your images and some of the functionality that lets MOBLE do the hard work for you.


UPLOADING IMAGES

There are 3 main ways to upload images on your MOBLE website. Let's have a look at each.

1. IN THE FILES AREA
  • Go to the Files Area
  • In the top right '+ Add File'
  • Upload an Image from your computer
  • Assign the 'Type' to 'Image'
  • Ensure you apply your Image Properties
    • 'Title' this will display in the Widget if you choose to display 'Title'
    • 'Summary' will display this in certain Widgets, if you elect to display Summary in the Widget Component
    • 'Alternative Text' is important for SEO as it lets Search Engines know about the Image. Though also, Screen Readers for the Visually Impaired will read the Alternative Text.
    • 'Tag' your Image, if you would like to group it or assign it to your Widgets.
    • 'Sub Heading', 'Display Date', and 'Sort Order' are again important for your Widget preferences.

Upload Image Choose File

To Upload an Image Choose a File from your computer at set the image properties such as Tag and Alternative Text.

2. UPLOAD IMAGES IN BULK
  • On your computer place all of the images that you would like to upload into a folder.
  • Compress the folder as a .zip file:
    • PC: Press and hold (or right-click) the file or folder, select (or point to) Send to, and then select Compressed (zipped) folder. A new zipped folder is created in the same location.
    • Mac: Right mouse click and select "Compress Folder Name". A new zipped folder is created in the same location.
  • Rename the zipped folder to: import_files.zip.
  • Go to the MOBLE 'Files' 
  • In the top right hand corner click '+ Add File'.
  • Choose the zip file named import_files.zip.
  • Assign the file 'Type' to 'Image'.
  • Tag the Images. All images will be tagged at once.
    E.g. If the images are a Photoshoot, Tag the images once and all images will automatically be tagged and assigned your Photo Gallery Widgets, without you having to even go to the page!
  • Click 'Save' in the top right, and your images will now start to upload.
  • Depending on the size of your file, uploading images in bulk might take some time. Wait until the file has finished uploading. Do not close your browser.
  • Once uploaded, your images will now appear in the 'Files' area. Refresh your Browser if you don't see all the images. Again it might take a minute or so to upload them all.
  • You may now edit images individually, should you wish to.
Upload Images In Bulk

Upload Images in bulk by compressing your files into a zip file called import_file.zip.

3. UPLOAD IMAGES IN THE VISUAL PAGE EDITOR

In the Image Component: 

  • Upload a new Image from your computer.
  • The Image and Image Properties such as Title, Alternative Text and Tags will be automatically added to the Files area, and therefore used as the Default Properties for the image.
  • Browse an existing image from the Files area. Now you can override the Image Properties such as Alternative Text, so that it is customised for this single instance of the image, even though it is the same Image. A great solution for saving space, site speed, and SEO. You keep one image but optimise specifically in different instances.

In the Frames Drawer:

  • When you upload a Background Image you will again have options to Upload and Browse.

Upload an Image to the Files Area

Uploading a new Image from the Visual Page Editor will save it to the Files area so that it can be used again later.

Upload Image in the Image Component

Once you've uploaded a File, you can override the Properties in the Image Component/


WHAT IS THE FILE URL AND WHAT IS A CDN?

When you upload an image or file, it is uploaded into the cloud and is given its own URL. You can paste the URL into a browser just like any other web page.

Your MOBLE website has a Content Delivery Network to store images on Amazon Web Services (AWS). 

A Content Delivery Network (CDN) is a distributed network of servers and your images are mirrored across these servers. The advantage with your images across so many server locations is that they can be distributed to your users in the quickest possible time, no matter what country your users are located in. This is particularly important for images since they are larger files, shaving precious time off your page load speeds.

Image URL CDN

An image URL on your MOBLE CDN.