Longform content recipe book - full-width scrolling image galleries

Full-width scrolling image galleries

These gallery options provide full-screen scrolling galleries. Use full-screen scroll effect image galleries to create visually stunning pages.

The long-form components package contains two styles of full-width scrolling gallery, each one having a dark and light caption option.

Style 1 - This style transitions between the images with a fade effect while the caption scrolls.

Style 2 - This style transitions between the images with a vertical swipe effect.

Please note the scroll effect is not supported on iOS devices. On these devices, the image and caption will scroll together.

Recommendations:

• We recommend using one style of gallery per article to provide a consistent user experience
• Only use one or two galleries per article, so as not overwhelm the user

Items to note:

• Source and source link text will always display in the bottom right-hand corner on the gallery Style 1.
• The source link will not be clickable. We recommend crediting images separately at the bottom of your article.
• Editing the image caption in the right-hand column list of images in the editor will not affect the image already placed inline.
• Image titles will not display.
• The images will fill the available browser window size, so do not expect your image to match your uploaded size exactly.
• At mobile, the images will be cropped to a portrait size.
• The ”full’ gallery styles will only work if the story layout width option of ‘full’ is selected.
• The scroll effect is not supported on Style 2 galleries for iOS devices. On these devices, the image and caption will scroll together.
• The source and source link sit under the caption and scroll on Style 2.

Gallery style 1 dark

Reveal
This section reveals more images as you scroll.

You can add summaries over images

There is one text box per image which is left-aligned

Any text can go here

Gallery style 1 light

Reveal
This section reveals more images as you scroll.

You can add summaries over images

There is one text box per image which is left-aligned

Any text can go here

Gallery style 2 dark

Gallery style 2 light