Filmstrip Page Extension

• Filmstrip Page Extension
• Slider Revolution Filmstrip Block
• Slider Revolution · Filmstrip Panel
• Settings Section

Filmstrip Page Extension

The Filmstrip Page Extension places a Slider Revolution filmstrip directly into a post or page. This is the same kind of functionality found in the full Filmstrip addon, but does not require building a module in the Module Editor first. A filmstrip is a row of media items that moves continuously or that the visitor can move through, arranged either as a flat strip or on a three dimensional form such as a sphere, funnel or helix.

There are two ways to create one, and both are reached from the WordPress block editor.

The first is the Slider Revolution Filmstrip block, which is added by editing any post or page, clicking the block inserter, searching for Filmstrip, and clicking Slider Revolution Filmstrip.

This block supplies its own media, either from images and videos chosen by hand or from the featured images of posts.

The second is to convert a gallery that already exists on the page. Select a WordPress Gallery block ¹ or a WooCommerce product gallery, open the Settings tab in the block sidebar using the gear icon ², and under Slider Revolution · Filmstrip find the Turn into Filmstrip setting ³.

Switching Turn into Filmstrip on converts the gallery, and the gallery’s own images become the filmstrip’s media.

Once a filmstrip exists, both routes offer the same Settings section, described in full below. The only difference is where the media comes from. The block chooses its own and so carries a Source section, while a converted gallery uses the images already placed in it.

Slider Revolution Filmstrip Block

The Filmstrip block places a filmstrip into a post or page and supplies its own media. Selecting it shows a Source section controlling where that media comes from, which appears before the Settings section that governs how the filmstrip looks and behaves.

Source Section

Sets where the filmstrip takes its media from. Media can be chosen by hand, or pulled automatically from the featured images of posts, in which case this section also controls which posts are used and the order they appear in. This section belongs to the Slider Revolution Filmstrip block only, because a converted gallery already has its own images.

Source (Dropdown)

Sets whether the filmstrip shows media chosen by hand or the featured images of posts. Choosing Posts — featured images reveals the settings that control which posts are drawn from and how they are ordered.

Options:

• _{Images / videos}: The filmstrip shows images and videos picked by hand through the block’s own media controls.
• _{Posts — featured images}: The filmstrip shows the featured image of each post matching the query set below.

Post Type (Dropdown)

Sets which type of post the featured images are taken from. The list offers the post types registered on the site that support featured images, so a site with custom post types will offer more than one entry.

Options:

• _Posts: Featured images are taken from standard blog posts.

How Many (Number, range, slider)

Sets how many posts are drawn into the filmstrip. Posts without a featured image contribute nothing, so the number of items shown can be lower than the number set here. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₁: Minimum.
• ₃₀: Maximum.

Order By (Dropdown)

Sets which property of the posts decides the order their featured images appear in.

Options:

• _Date: The posts are ordered by the date they were published.
• _Title: The posts are ordered alphabetically by title.
• _{Menu order}: The posts are ordered by the manual menu order value set on each post.
• _Random: The posts are shuffled into a different order each time the page loads.

Order (Dropdown)

Sets whether the ordering runs forwards or backwards.

Options:

• _{Newest first}: The order set by Order By runs in descending order.
• _{Oldest first}: The order set by Order By runs in ascending order.

Slider Revolution · Filmstrip Panel

The Slider Revolution · Filmstrip panel appears in the Settings tab of the block sidebar when a WordPress Gallery block or a WooCommerce product gallery is selected, and contains the Turn into Filmstrip toggle that allows you to convert the gallery into a filmstrip. The images in the gallery become the filmstrip’s media, so this panel has no media source settings of its own.

Turn into Filmstrip (Toggle)

Sets whether the selected gallery is displayed as a filmstrip. Switching it on converts the gallery and reveals the Settings section that controls the filmstrip. Switching it off returns the gallery to its normal appearance and hides those settings, which keep their values in case it is switched on again.

Settings Section

Through the Settings section, in the block sidebar, control how a filmstrip is arranged, how it moves, and how its media items are shaped and sized. Settings are identical whether the filmstrip is a Slider Revolution Filmstrip block or a gallery converted with Turn into Filmstrip.

Preset (Dropdown)

Sets the arrangement the media items are placed in and the way they move. Some presets add settings of their own to this section. Changing the preset also replaces the current Strip Height with a height suited to the new arrangement.

Options:

• _{Auto Marquee}: Runs the items in a single unbroken line that loops around without stopping.
• _Coverflow: Lays the items out in a row with the focused item facing forward and the items on either side angled away from it.
• _{Card Stack}: Piles the items on top of one another, with each item behind the front one offset and rotated.
• _Cascade: Arranges the items in a receding line, with each item smaller than the one in front of it.
• _{3D Showcase}: Wraps the items around a curved surface which the viewer looks at from the outside or from within.
• _Path: Distributes the items along a drawn path such as a line, wave, arc or circle.
• _{Zoom Focus}: Shows the focused item at full size and scales the items on either side of it down.
• _{3D Sphere}: Maps the items onto a continuously rotating sphere, arranged in horizontal rows.
• _{3D Tornado}: Maps the items onto a continuously rotating funnel, arranged in horizontal rows.
• _{3D Spiral}: Maps the items onto a continuously rotating helix which scrolls along its own axis.

Path Shape (Dropdown)

Sets the geometry of the path the media items are distributed along.

Options:

• _Wave: The items follow a repeating sine wave.
• _S-Curve: The items follow a single S shaped bend.
• _{Arc (up)}: The items follow an arc that bows upward in the middle.
• _{Arc (down)}: The items follow an arc that bows downward in the middle.
• _Circle: The items are distributed around a closed circle.
• _Zig-Zag: The items follow a path of alternating straight diagonals.
• _{Straight line}: The items follow a straight line.

Edge Shrink (Number, range, slider)

Sets how much the media items shrink as they move away from the focused position toward the ends of the path. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₀: Minimum. Every item is shown at the same size regardless of its position on the path.
• ₇₀: Maximum. Items at the ends of the path are reduced to their smallest size relative to the focused item.

Curve (Number, range, slider)

Sets how pronounced the shape chosen in Path Shape is. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₀: Minimum. The path is flattened into a straight row whatever shape is chosen.
• ₁₀₀: Maximum. The chosen shape is applied at its full depth.

Spiral Width (Number, range, slider)

Sets how far the helix swings out to the left and right as it turns. The spacing between the coils running down the helix is set by Gap rather than here. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₀: Minimum. The helix is at its narrowest.
• ₁₀₀: Maximum. The helix is at its widest.

Direction (Dropdown)

Sets which way the filmstrip travels.

Options:

• _Left: The items move toward the left of the screen.
• _Right: The items move toward the right of the screen.
• _Down: The items move toward the bottom of the screen.
• _Up: The items move toward the top of the screen.

Speed (Number, range, slider)

Sets how fast the filmstrip travels. Higher values move the items more quickly. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₅: Minimum. The filmstrip moves at its slowest.
• ₂₀₀: Maximum. The filmstrip moves at its fastest.

Gap (Number, pixels, range, slider)

Sets the space in pixels between one media item and the next. On the 3D Spiral preset this sets the spacing between the coils of the helix rather than a horizontal gap. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₀: Minimum. The items sit flush against each other with no space between them.
• ₁₂₀: Maximum. The items are spaced as far apart as the setting allows.

Visible Cards (Dropdown)

Sets how many media items the cascade shows at once.

Options:

• _{Auto (fit width)}: The number of items is worked out from the width of the container, and is recalculated when the container is resized.
• ₃: Three items are shown at once.
• ₄: Four items are shown at once.
• ₅: Five items are shown at once.
• ₆: Six items are shown at once.
• ₇: Seven items are shown at once.
• ₈: Eight items are shown at once.
• ₉: Nine items are shown at once.
• ₁₀: Ten items are shown at once.
• ₁₁: Eleven items are shown at once.
• ₁₂: Twelve items are shown at once.

Strip Height (Number, pixels, range, slider)

Sets the height in pixels of the area the filmstrip occupies on the page. Changing Preset replaces this value with one suited to the new arrangement, so set the height after choosing the preset rather than before. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₈₀: Minimum. The filmstrip occupies the shortest area available.
• ₁₀₀₀: Maximum. The filmstrip occupies the tallest area available.

Edge Fade (Number, range, slider)

Fades the filmstrip out toward its two ends so the items disappear gradually instead of stopping at a hard edge. On the three dimensional presets this hides the near edge of the form rather than the ends of a strip. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₀: Minimum. No fade is applied and the filmstrip ends at a hard edge.
• ₅₀: Maximum. The fade reaches as far into the filmstrip as the setting allows.

Image Ratio (Dropdown)

Sets the width to height proportion each media item is displayed at. Every item in the filmstrip uses the same proportion regardless of the dimensions of the original file.

Options:

• _1:1: The items are square.
• _4:5: The items are taller than they are wide, in a portrait proportion.
• _3:4: The items are taller than they are wide, in a slightly narrower portrait proportion than 4:5.
• _4:3: The items are wider than they are tall, in a landscape proportion.
• _3:2: The items are wider than they are tall, in a wider landscape proportion than 4:3.
• _16:9: The items are wider than they are tall, in a widescreen proportion.

Fit (Dropdown)

Sets how each media item fills the shape set by Image Ratio when the original file is a different proportion.

Options:

• _Cover: The media fills the whole item and any part that does not fit within the proportion is cropped off.
• _Contain: The whole of the media is shown within the item, which can leave empty space on two of its sides.

Corner Radius (Number, pixels, range, slider)

Sets how far in pixels the corners of each media item are rounded. The value can be set with the slider or typed into the field beside it, as the two are mirrored.

Options:

• ₀: Minimum. The corners are square.
• ₁₂₀: Maximum. The corners are rounded as far as the setting allows.

Drag to scrub (Toggle)

Sets whether the visitor can drag the filmstrip with the mouse or a finger to move through the media items by hand.