Home

sigplus has various layout modes, each suited for a particular purpose. This article compares fixed layout, flow layout and packed layout.

Fixed layout

Fixed layout arranges items in a regular grid where each grid cell has an equal width and height, and scrolls in discrete steps such as an entire column or an entire page on a single mouse click. You can set how many rows and columns fixed layout consists of. Items in rows and columns are aligned with each other, and no image is cut in half (one part visible on one gallery page and the other part visible on the next gallery page). Fixed layout respects the container size, and scales down images while keeping the grid structure and aspect ratio when there is insufficient space. (Try resizing the browser window to test this behavior.)

{gallery layout=fixed source=impressionist /}

Row-major and column-major layout

When a gallery with fixed layout has multiple rows and columns, items can be arranged in row-major layout or column-major layout. In row-major layout, consecutive items are stacked into a row, and rows are stacked one below the other:

In column-major layout, in contrast, consecutive items are stacked into a column, and columns are arranged one next to the other:

sigplus chooses row-major vs. column-major layout based on gallery orientation, which can be either horizontal or vertical. The default is horizontal. In horizontal orientation, the rotator moves from left to right, and images are ordered in columns such that when you click the left or right navigation button, neighboring images (1 and 2 or 3 and 4) disappear:

{gallery layout=fixed rows=2 cols=2 rotator_orientation=horizontal rotator:step=page source=impressionist /}

In vertical orientation, the rotator moves from top to bottom, and images are ordered in rows:

{gallery layout=fixed rows=2 cols=2 rotator_orientation=vertical rotator:step=page source=impressionist /}

In other words, sigplus normally chooses a natural layout (column-major vs. row-major) based on the orientation (horizontal vs. vertical) of the rotator. However, you can force any particular layout irrespective of orientation. For example, the following illustrates row-major layout with the default orientation:

{gallery layout=fixed rows=2 cols=2 rotator:layout=row rotator:step=page source=impressionist /}

Compare that with the following, which illustrates column-major layout with the default orientation:

{gallery layout=fixed rows=2 cols=2 rotator:layout=column rotator:step=page source=impressionist /}

Unless you explicitly set row-major or column-major layout, sigplus assumes one based on the rotator orientation, as explained above: horizontal orientation implies column-major layout and vertical orientation implies row-major layout.

Flow layout

Flow layout mimics the flow of text in a paragraph: images are laid out one next to the other without additional space as if they were letters in a piece of text. Flow layout respects container size, and breaks into multiple lines when there is insufficient space.

{gallery layout=flow limit=4 lightbox=none source=impressionist /}

Packed layout

Packed layout, as its name suggests, packs images one close to the other either horizontally or vertically. Images always occupy a single row or column, and users can uncover hidden parts of the gallery with scrollbars or scroll gestures. A custom scrollbar substitutes the standard browser scrollbar to help the gallery blend with the web page.

{gallery layout=packed source=impressionist /}

Hidden layout

Hidden layout shows no gallery on the web page. However, you can assign an identifier to hidden galleries and open them in a pop-up window.

{gallery id=impressionistgallery layout=hidden source=impressionist /}