Editing

Add images and photos

Every image in your theme design, such as an Image block, a Gallery or a section's background, is set in an image field in the right sidebar. You can upload your own file, reuse one from the project's media library, pick a free photo from Unsplash, or link an image by its address. The images of your posts and pages come from Ghost: you change them in Ghost Admin.

Add an image

  1. Open your project in Fantasma.

  2. Select the block or section, such as an Image block.

  3. In the right sidebar, click the image field, such as the one next to Image under General. A popup opens. The field shows the current image's file name, or a prompt to add one while it is empty.

  4. If an image is already there, point at its preview at the top of the popup and click Change. The list of sources appears.

  5. Choose where the image comes from:

    • Upload opens your computer's file picker. The image is used as soon as it uploads.
    • Open media library shows the images already uploaded to this project.
    • Search Unsplash shows free photos. It is offered for Image blocks, galleries and background images.
    • Insert from URL shows an Image URL field. Enter the address of an image on another site, such as https://example.com/images/cover.jpg, and press Enter.

    Remove takes the image away.

The Choose image window with Project and Unsplash sources, a search field, image usage filters and an Upload images button
  1. In Alt text, at the bottom of the popup, describe what the image shows, such as "Five people drawing at a table full of sketches". An orange mark next to Alt text means it is still empty.

You can also drag image files onto the open popup, or paste an image you copied, to upload it.

Pick a photo from Unsplash

  1. In the popup of the image field, click Search Unsplash. The Choose image window opens with Unsplash selected.
  2. Type a word in the search field.
  3. Click a photo to use it.

The photo stays on Unsplash and does not count toward your project's image limit. Its alt text comes from Unsplash, and you can change it in Alt text. In an Image block, the photographer's credit is added to the image's Caption.

Reuse images from the media library

The Project source in Choose image holds every image uploaded to this project. Switch between Project and Unsplash in the same window.

  • Search by file name in the search field, and show All images, the images In use, or the Unused ones.
  • Click the upload button, Upload images, or drop files onto the dialog, to upload several at once.
  • Click an image to use it.
  • To delete an image, point at it, click the three dots in its corner, and select Delete. Only an image that nothing in the project uses can be deleted.

Uploading the same file again reuses the copy already in the library.

Image limits

Limit Value
File types JPEG, PNG, GIF and WebP. SVG is not accepted.
One file Up to 1.5 MB
Image size Up to 8192 px on each side, and up to 40 million pixels in all
Images per project 50
All images in a project 50 MB

At either project limit, an upload fails with a message. Delete unused images in the media library to make room. Images added by URL or from Unsplash do not count.

An image wider than 2000 px is scaled down to 2000 px when you upload it, and Fantasma makes smaller copies of it. For an uploaded image, Display resolution, under the preview in the field's popup, picks which of these sizes the image uses, 1600 px by default. Choose a smaller size for an image that shows small on the page.

Uploaded images go into your theme file, the ZIP that you download or publish to Ghost. An image added by URL or from Unsplash stays at its address and loads from there.

Limits lists every limit of a project.

Was this article helpful?