Levente Hunyadi

Test suite

Layout

sigplus galleries can be aligned to the left or right, either allowing or not allowing text to flow around the gallery, or can be centered. Alignment is sensitive to text directionality (left-to-right vs. right-to-left languages. In addition, sigplus features two different layout modes: fixed layout where images are aligned in a row, column or grid, and flow layout, which supports laying out images in a compact free-flow manner. The examples that follow illustrate the various layout modes.

Alignment and text flow

Text following the activation tag of a left-aligned image gallery that permits text wrapping around should appear to the right of the gallery. Left-aligned image galleries are implemented as floating elements.

This paragraph is by Cicero, and is meant to demonstrate text flow. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

Centered image galleries should clear any text from both their left and right side. Any text following the gallery activation tag will appear below the gallery. Likewise, left- and right-aligned image galleries that do not permit text wrapping around are rendered in a similar manner.

As shown here, text following a right-aligned image gallery activation tag should appear to the left of the gallery provided that text is allowed to wrap around. The example to the right shows a slider with column arrangement and vertical orientation.

This paragraph is by Cicero, and is meant to demonstrate text flow. At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat...

Orientation

Images in a gallery can be arranged in a row, in a column, or in a grid, the latter being shown below. Images can scroll horizontally or vertically. The examples below illustrate the difference between horizontal (to the left) and vertical (to the right) orientation with grid arrangement.

Flow layout vs. fixed layout

Image galleries are generally rendered in fixed layout and utilize a slider. However, if all images are to be shown without navigation controls, it is more practical to render the gallery in flow layout. Flow layout can be combined with left, center or right alignment, the effect of each is shown below. The example also demonstrates the differences between whether image cropping on preview image generation is allowed. Preview images in all three galleries below have a preview image width and height of 150 set.

Text following an image gallery with flow layout does not wrap around the images.

Donations in EUR
Donations in USD

This website uses cookies to manage authentication, navigation, and other functions. By using our website, you agree that we can place these types of cookies on your device.

View e-Privacy Directive Documents

You have declined cookies. This decision can be reversed.

You have allowed cookies to be placed on your computer. This decision can be reversed.