Advice and answers from the Moonfruit Team

Accessing the image gallery app

  1. Log into the site editor and click the 'Insert' tab.
  2. Under the 'Apps' heading in the left sidebar, choose 'Image gallery'.
  3. A gallery widget will appear on your page.

Adding images

  • Double click your gallery until a + sign appears.
  • Click the + sign to select an image from your File Manager, or upload a new one.

Rows/columns

  • The default image gallery will have 4 columns and one row. If you add a 5th image, a second row will be introduced to accommodate the 5th image you add. 
  • You can change the number of columns by clicking once on the gallery widget > Floating editor - 'Gallery' tab. Change the column number to 6 for example, then hit return on your keyboard. NB: If you have less than 6 images in the gallery however, the column number will snap back to 4. 

Editing style and size  

  • Resize - Click to select the gallery then click, hold and drag a corner out/in to resize.
  • Image cropping on/off - Click to select the gallery > Floating editor box - 'Gallery' tab. Cropping image will create a square crop in the gallery. Keeping aspect ratio will display the original shape (landscape or horizontal).
  • Gap and padding - Click to select the gallery > Floating editor box - 'Gallery' tab. Change the padding to create a larger white space around each image. The gap indicates the amount of space between each 'cell'.
  • Colours - Click to select the gallery > Floating editor box - 'Style' tab. Change the colour of your gallery background/border, or remove borders completely by changing the border size to '0'.
  • Rounded corners - Click to select the gallery > Floating editor box - 'Style' tab. Change the corner radius above 0 to create rounded corners around your images.

 Image alt tags

  1. You can apply ‘alt tags’ to individual images by double clicking twice on one until the 'Thumb' tab shows in the floating editor.
  2. Select 'Turn on caption' and add your image caption.

 Rearranging your images

  1. Double click twice on an image until the 'Thumb' tab shows in the floating editor.
  2. Click, hold and drag image over the top of another to swap the position.

 Deleting images

  1. Double click twice on an image until the 'Thumb' tab shows in the floating editor.
  2. Click the trash can icon under the 'Thumb' tab to remove the image from the gallery.

Pro tip: ‘Delete’ on your own keyboard will work as well.

Did this answer your question?