CubeSites Help
Brand and design

Brand and design

Images and media

Upload, file and find images, set focal points, and generate starting points with AI.

  • 4 minute read
  • 4 interactive walkthroughs
  • For everyone adding pictures to a site

Adding images#

Media is the workspace shelf, shared by every website you own. Upload files by dropping them in, or let an image field upload for you the first time you use one. JPEG, PNG, GIF, WebP and SVG are accepted, up to 10 MB each.

SVG is worth a note: it is a drawing rather than a photograph, so it stays sharp at any size. Logos and icons belong in SVG where the source is available.

Your Company
CubeSitesYour Company
  • Home
  • Websites
  • Licences
  • Templates
  • Media
  • Cube apps
  • Settings
AI drafts, you decide4 of 100 drafts used this monthTrial9 days left

Media

Search by file nameUpload
FoldersAll imagesNo folderSite imagesProductsProduct ACategoriesCategory A
boiler-room.jpgteam-van.jpgoffice.jpg
Focal pointDrag the dot to choose how the image crops in different shapes.

Step 1 of 3

Upload

Drop files in, up to 10 MB each: JPEG, PNG, GIF, WebP or SVG. One upload serves every website in the workspace.

Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.

  1. 1Open Media and create a folder or two before uploading.
  2. 2Drop the files in, or upload from an image field where you need them.
  3. 3Rename anything that arrives with an unhelpful file name.

Folders, search and reuse#

Folders are for people, not for the website: they organise the shelf without changing anything about how images are used. Folders can sit inside folders, three levels deep: open a folder, then New folder makes one inside it. Removing a folder removes the folders inside it too, and their images stay in the library, in no folder.

Pictures uploaded on a product file themselves under Products, in a folder named after the product, and pictures for a category under Categories. Rename the product or category and its folder follows, unless you have renamed the folder yourself. Choosing a picture that is already in the library never moves it.

Right-click a picture, or use its menu, to rename and describe it, download it, copy its link, move it to another folder or delete it. Search finds by file name, so tidy naming at upload pays off. Using the same image in several places is normal and costs nothing; it is one file on the shelf.

Your Company
CubeSitesYour Company
  • Home
  • Websites
  • Licences
  • Templates
  • Media
  • Cube apps
  • Settings
AI drafts, you decide4 of 100 drafts used this monthTrial9 days left

Media

Search by file nameUpload
FoldersAll imagesNo folderSite imagesProductsProduct ACategoriesCategory A
boiler-room.jpgteam-van.jpgoffice.jpg
Focal pointDrag the dot to choose how the image crops in different shapes.

Step 1 of 4

Folders for people

They organise the shelf without changing anything about how images are used.

Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.

Good to know: A photo used on the home page and in a blog post arrives from one upload. No duplicates, no drift.

Focal points#

Images appear in different shapes around a site: wide in a hero, square in a card, tall on a phone. The focal point tells CubeSites which part must not be cropped away. Drag the dot onto the face or the subject, and every shape crops around it.

A picture that keeps cutting someone's head off in one place is almost always a missing focal point rather than a wrong picture.

Your Company
CubeSitesYour Company
  • Home
  • Websites
  • Licences
  • Templates
  • Media
  • Cube apps
  • Settings
AI drafts, you decide4 of 100 drafts used this monthTrial9 days left

Media

Search by file nameUpload
FoldersAll imagesNo folderSite imagesProductsProduct ACategoriesCategory A
boiler-room.jpgteam-van.jpgoffice.jpg
Focal pointDrag the dot to choose how the image crops in different shapes.

Step 1 of 2

Drag the dot

The focal point tells CubeSites which part must not be cropped away, whatever shape the image is used in.

Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.

  • The subject sits inside the dot
  • Checked in a square card and a wide hero
  • Descriptions written for every image used

Generating images with AI#

The Generate tab in the image dialog makes a picture from your description: "a van parked outside a terraced house, warm afternoon light". Results cover AI images on the allowance shown in the Media card.

Generated images arrive with an empty description field. Fill it in like any other image, and treat the result as a starting point: replace anything that claims to show a real place, product or person with a real photograph of it.

Choose an image

From the library, or generate one to use as a starting point.

LibraryGenerate
Describe the image you need, then choose Generate.
Drop images here. JPEG, PNG, GIF, WebP or SVG, up to 10 MB.
Describe the image for screen readersEngineer fitting a new boiler
CancelUse this image

Step 1 of 3

The Generate tab

Beside the library, one tab where images are made rather than found.

Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.

Before you continue: Never use a generated image to show a real customer's job, a real team member or a real product. If it should be a photograph, take one or buy one.

Common questions

Where are uploaded files kept?

In the workspace, hosted with your sites. Nothing is stored with a third party just because a site uses it.

Do big images slow the site down?

Every image is resized and served in modern formats automatically, so a large upload does not weigh on visitors. An absurdly large source file is still worth avoiding.

Something here out of date, or a step that did not match what you see? Tell us and we will correct the guide. Never send a password or an API token.