Layouts

Layouts work within your website's themes to give you control over how your media is displayed

Phil Jenkins avatar
Written by Phil Jenkins
Updated over a week ago

All of our themes have layout options. Layouts are designed to give your project the flexibility it needs to allow you to present it to it’s fullest. Each layout is designed with specific media aspect ratios or presentation modes in mind, so whether your imagery is formatted to portrait or landscape, or you want to feature video and imagery in unique ways, there will be a layout option that works best for each of your projects. 

Set your global layouts from the Customisation menu or use the Layout tab in your Project and Blog tools to quickly change layouts individually for each item as you need to.

When you change your layout you won’t need to reformat media in your projects, blog posts, images or video, so feel free to play with different layouts as often as you wish.

Our themes are designed and built with specific styles and uses in mind so not all of the layouts below will be available with each theme, but wherever possible we include as many as we can.

Stacked

All media in your project is stacked in one column vertically; displayed at the same width and ordered from the top of the page to the bottom in the same sequence as the items appear in your Project Media view. Stacked is a very simple and forgiving layout that allows for variety in the types and sizes of media you have. Choose a stacked view if your project comprises media of varying aspect ratios or if you’re looking for a view that looks like a feed. A great layout if you want to present your project as a case study or a journey.

Featuring a large view of a single media item from your project with thumbnails ordered below. Tapping on any thumbnail replaces the currently visible media item with the large view of that thumbnail. Thumbnails are ordered from the top left in rows and follow the ordering of your project media items. 

Gallery uses a fixed aspect ratio and may crop your media to fit the frame so this layout is especially suited to projects where all the media has very similar aspect ratios. A good choice for photography and film projects created from a single shoot or that are shot with a specific theme in mind.

Slideshow

A very simple layout with just one large media frame. Navigate through your media items one at a time using next and previous buttons. Some themes also feature progress icons or text to let your viewers know where they are in the sequence. Slideshow suits projects where all of the media has very similar aspect ratios and can be useful if you need to collect together a portfolio of unrelated work or if you want your viewer to see your project in a set sequence.

Spotlight

Featuring a unique pairing of large and small thumbnails, allowing you to focus attention to distinct projects. If you are looking to highlight specific projects from your portfolios, or important media within a project, without looking overcrowded or busy, then this is the layout for you!

Tapping each thumbnail opens a larger version in a lightbox, over the thumbnail grid.

For each row, spotlight's width and height are balanced with a simple mathematical formula - so you may find that your smaller media items are slightly cropped to make sure that the height of the two thumbnails fits perfectly to the height of the larger thumbnail. As with all layouts, cropping is optional, so you can use this layout uncropped too, although the result can be quite odd!

Thumbnails

All media items are displayed as thumbnails, ordered from the top left in rows and matching the ordering of your project media items. Tapping any thumbnail opens that media item in theatre mode - which introduces a semi-transparent background and a large view of your media over the top of your Fabrik site. Navigate through your media items with next and previous buttons or close theatre mode to return back to the thumbnail view at any point. 

Tapping each thumbnail opens a larger version in a lightbox, over the thumbnail grid.

Thumbnails is a great choice if you want your audience to focus on a single media item at a time, making it a useful layout for viewing video and imagery with a lot of detail. This layout is versatile and suits projects that have varied media types and aspect ratios.

Video

Similar to the Gallery layout but specifically focused to video projects. The large media frame houses any video media you add to a project and sits on top of a thumbnail display of your image media. 

Tapping an image thumbnail opens a larger version in a lightbox, over the top of the media. 

Video will always features video before image media which makes this layout an excellent choice for film projects that have primary video media and supporting stills images.

Strip

All media in your project is displayed horizontally in one row, using the full height of your browser. Media slides from right to left as your viewers navigate through your project media with the next button, focusing on one item at a time. Strip is a great layout choice for photographic projects that have media with varied aspect ratios or projects primarily comprised of portrait or square images.

Scatter

An alternative to our spotlight layout, scatter uses the same mathematical relationship between small and large thumbnails, but in a different order that makes the placement of thumbnails look more random, and less constrained.

Tapping each thumbnail opens a larger version in a lightbox, over the thumbnail grid.

Use scatter uncropped to create some awesome displays that still perfectly flex to fit all different screen sizes.

Did this answer your question?