Exhibeo Help

Add some images, change some settings, and out pops an HTML5 web gallery or slideshow!

Finding your way around

The first screen you'll see is the Preview screen. This screen consists of four sections, the Theme Selector (left of the screen), the Live Preview (center), the Theme Settings (right, hidden in new documents), and the Slide Viewer (bottom of the screen).


The Theme Selector will be visible in new documents by default. The selected theme will be visible in the Live Preview. To access the Theme Selector, click the Theme Selector button at the top left of the window.


The Live Preview displays the current theme you have selected. In new documents, placeholder images will be used. Drop your own images into the Slide Viewer to populate the selected theme with your images. The Live Preview is fully interactive. You can navigate through your image presentation in the same way your site visitors would on the web.


The Theme Settings can be accessed by clicking the Theme Settings button at the top right of the window. It's in here that you can change the settings of the selected theme. The options available depend on the currently selected theme and are all self-explanatory.


The Slide View allows you to quickly add, reorder, and delete the images in your current presentation.


Add images by dragging and dropping them into Exhibeo or clicking the Add Images button.


The Thumb View can be accessed by clicking the Thumb View button at the bottom right of the window. The appearance of thumbnails can be edited in this view, if a theme that supports thumbnails is selected (such as Bloxx).


The Image View is used to edit the appearance of the main images and add titles and descriptions.


When you're happy with the way your image presentation looks, hit the Export… button at the bottom right of the window and select whether you want to Export to HTML, or Export to Freeway.

Note: Exporting in demo mode will output sample images only.


Working with images

All themes contain images, and some themes contain both images and thumbnails. Images and thumbnails can each be cropped, scaled, rotated, and, in supported themes, resized. This can be done individually or on a selection of images. The changes made to images are global to all themes (other than themes that do not support resizing).

Editing thumbnails

If the theme you're working on supports thumbnails, they can be edited in the Thumb View by hovering over the thumbnail and using the controls in the bottom of the image cell.

The Slider controls the scale of the thumbnail.


The Crop button puts the thumbnail in Crop mode where Crop handles are placed on the thumbnail to allow precision cropping. Images can also be panned inside the thumbnail area when in Crop mode by clicking and dragging anywhere on the image. Note that thumbnails remain centered in the thumbnail area when cropping, so will always grow and shrink from both sides.


The Rotate buttons allow thumbnails to be rotated in either direction.


Selected thumbnails can be cropped to a specific aspect ratio by using the Thumbnail Cropping submenu of the Image menu or the Contextual menu (opened by right/Control-clicking on the thumbnail). Options available are:


Thumbnails can also be scaled beyond their original sizes (supported themes only). Use the Thumb Sizing slider at the bottom of the window (in all views) to scale all thumbnails.

Editing images

Images are edited in the Image view. The Slider controls the scale and the Rotate buttons control the rotation of the thumbnail. There is no Crop button; instead the Crop handles are visible on the image at all times, and the image can be panned around inside the image-well by clicking and dragging on any part of the image. Click inside the Add a title… and Add a description… fields to give images titles and descriptions. When you're ready to move on to the next image, click the Previous Image and Next Image buttons to skip through your images. Clicking the Tick button will close Image view.

Images can be cropped to a specific aspect ratio by using the Image Cropping submenu of the Image menu or the contextual menu (opened by right/Control-clicking on the thumbnail). To apply these to multiple images, select the images' thumbnails in the Thumb View and use the Image Cropping submenu in the Image menu. The options available are:


Images can also be resized. Use the Thumb Sizing slider at the bottom of the window (in all views) to scale all thumbnails.

Adding titles, descriptions, and links

Titles, descriptions, and links can be applied to each image in the Image view (see previous section). Once the Image view is open, click the text "Add a title...", "Add a description...", or "Add a link..." and add type to add. Note that links are not supported in the Focus theme.

Resetting thumbnails and images

Thumbnail and image transformations can easily be reset by selecting a thumbnail (or several thumbnails) and choosing Reset Thumbnail Transformations, or Reset Image Transformations from the Image menu, or by opening the Contextual menu for the thumbnail or image you wish to reset.

Exporting your work

Selecting Export to Freeway will generate an xbExport file that can be used with the Exhibeo Action (located in the Help menu) to automatically place your image presentation in Freeway. Just select the file, position the item, and publish.

Selecting Export to HTML will generate the files and code you need to add the image presentation to your site. Once complete, a button will be displayed next to the Export button, which, upon clicking, will show the output files in the Finder. Open the ExhibeoExport.html page using your default browser. You will see a preview of your presentation at the top of the window, followed by a block of code to copy into the <head> element of your web page, and another to copy into the <body> element of your web page. If there are any specific requirements for the presentation, they will be displayed in comments in the code and/or in a message area below the code.

Note: if you're not using Freeway, the directories alongside the ExhibeoExport.html page will need to be uploaded to your web server next to the page containing the image presentation.