Skip to main content
Galleries
Updated over a week ago

To display images in a sequence, Cargo offers several gallery layout modes — Grid, Columnized, Justify, Freeform, and Slideshow — each with extensive options.

To use, click the “Add...” button in the top menu bar and choose “Gallery”. If you have any images selected, they will be automatically added into the gallery. Galleries can also be created by selecting multiple images and opening the image settings window.


If you have no images selected, the gallery will be created with placeholder content; you can drag any item from your Images menu and hold it over a placeholder to replace that item inside the gallery. Aside from replacing the placeholder items, you can also add items into the gallery by dragging them from the Images Menu or your desktop.

To delete a gallery, select and delete all of its contents or open its settings window and click the “Remove Gallery” link in the bottom left.

With the exception of the Slideshow gallery, each gallery mode adds layout-specific options to each of the images or videos it contains. These options are visible in the settings whenever an image or video is inside a gallery (right-click to open it).

Grid

Displays images in discrete rows and columns. Each row takes on the height of the tallest item in the row. The Vertical Align option lets you control whether the items in each row are aligned to the top, bottom or center of the tallest item. Horizontal Align controls the horizontal position of incomplete rows. ​

Columnized

Displays images in columns with a ragged bottom edge. Gallery items are sorted vertically but not horizontally: each consecutive item is placed in the first open position closest to the top of the gallery. This vertical order is highly variable and dependent on the size of the gallery’s gutters and the width of the browser window; the layout that you see will not necessarily be the one everyone else sees.

Justify

Lays out images in rows of uniform height as if the images were words in a text document. There are four possible horizontal alignments: Left-, Right- and Center-aligned galleries prioritize a consistent row height, while the Justify alignment (signified by the “← →” icon) will allow for varied row heights in order to ensure that each row fills the entire width of the gallery.

Justify adds an additional option to the editor overlay to allow you to individually shape each row in the gallery. By default, each row will end as soon as there is no longer room to place another item. To override this, hover over the right edge of a gallery item and look for a red line. If it is solid, it indicates that the hovered gallery item has been designated as the end of a row. Click the line to toggle this end-row designation on or off. You can also click and drag the line to shift the end of the row to an adjacent item. Once the end of a row has been designated, the entire layout of the justify gallery is locked, and gallery items will not re-flow or change lines. You can unlock the layout by clicking the “Clear all Designated Rows” link in the bottom right corner of the gallery settings window.

Freeform

The images can be dragged anywhere within the gallery area. Dragging images outside the top or bottom borders of the gallery will expand the gallery to accommodate their new position. Use the “Shift”, "Fit to Width", and "Zoom" tools inside the gallery settings to move or scale all of the gallery items at once.

In addition, there is also a "Magnetic Snap" feature within the gallery settings to assist in making precise changes to your layout. With this setting active, gallery items will snap to each other and the edges of the gallery when they are dragged. Look for a gray outline behind the gallery item while dragging: it will turn red when the "snap" behavior is activated. A setting of 0% will let images snap directly next to each other; other percentages will force that distance (relative to the width of the gallery) between snapped edges, allowing for the appearance of precise gutters between gallery items.

Slideshow

Displays images in a timed cycle. The three transition modes are Fade, Slide, and Scrub. Scrub-transition slideshows allow the viewer to click and drag the slideshow to progress the slideshow by many slides in a single gesture, or to hold the left or right navigation buttons to animate the progression of images.

To reorder or remove items inside a slideshow, open the slideshow settings and click “Show Slides” to display a modifiable thumbnail view of the gallery’s contents. After making your changes, click outside to bring back the slideshow.


Did this answer your question?