Updated: 07 October 2024 for Release v202

About Parameters

This manual is about the specific parameters to add and change and explains what it does.

In the article How to find different parts and add/change parameters you will find more information on how to add parts to a page and add a parameter to that part.

Common Terms

You'll see the word “boxed" used in various cases in this document. "Boxed" means fitting the width of the website layout, which is smaller than the entire width of the screen on most devices.

General parameters

These are applicable to most if not all parts.

animations

Animations will subtly animate images as your mouse cursor moves over them. Values can be combined (e.g. "zoom twist" will both zoom and twist an image). The names should be self-explanatory: please experiment!

Possible values:

zoom, twist, shadow, glow, saturate, desaturate, slide, skew, shift

Padding: pTop, pBottom

Padding above (pTop) or below (pBottom) the part.

Possible values:

[a value in pixels] Typically "20px" or "30px", etc.

Background Colour: bgColor

Background behind the part.

Possible values:

[a background] 
Can be any kind of css shorthand for the background property: 
a simple color ("red"), a hexadecimal color ("#f00"), a background image, a gradient, or a combination.

🚧

Tool Tip! Please check colours meet contrast guidelines to keep your site accessible. We recommend WebAIM/contrastchecker or Color Review

contentAlign

Most parts with text, like descriptions, teasers, etc. can be aligned to the left edge of the content box, whereas normally they are slightly centered.

Possible values:

[empty], left

Sticky Parts

Parts that are present on every page on the website.

Main menu

Layout variant

‘variant’ by default displays only shortcuts, and the full main menu is behind the Hamburger.

"suckerfish" = drop-down menus for each main menu item.

"shortcuts-unified" = puts the logo, service menu and shortcuts all on one line.

"shortcuts-unified-alt" = splits the shortcuts from the service menu. With the logo centered the shortcuts sit on one side, the service menu on the other.

Possible values:

[empty] (default), suckerfish, shortcuts-unified, shortcuts-unified-alt

Suckerfish variations: suckerfishMode

‘suckerfishMode’ accepts a combination of values. By default it has the logo above the menu.

"unified" = has the logo, menu and service menu on one line.

"on-top" = keeps the full menu on top, even in combination with a showcase banner.

"small" = means the sub-menu's aren't the full width.

"right" = aligns the main menu to the right, underneath the service menu.

Possible values:

[empty] (default), unified, on-top, small, right

Social Media Icons: socials

Display social media icons in the menu.

Possible values:

[empty] (default), 1 or true

unfoldedMenu

Display menu items all folded out: all lower level menu-items are at once visible. The main menu is split into columns: to let the second column start with the 4th top-level item enter the number 4.

Possible values:

[a number]

showcaseBgColor

The color for the background behind a boxed showcase.

Possible values:

[#hexcode]

Slideshow: autoSlide

If the slideshow is enabled for the showcase banners, it's possible to set it to automatically go to the next slide after a number of seconds. Set the number of seconds (e.g. "4") in this parameter to enable this feature.

Possible values:

[a number]

showcaseProductions

Switch the header to showcase mode (e.g. transparent) on production detail pages.

🚧

Take note! Be sure to set the production hero to the "showcase" variant.

Possible values:

true, false (default)

Footer

There are no Parameters for this part

Post Footer

postFooter

Layout variant.

"boxedLeftRight" = spreads the post-footer across the width of the page. This is the default if not used.

"fullWLeft" = aligns all text to the left.

"fullWRight" = aligns all text to the right.

Possible values:

boxedLeftRight, fullWLeft, fullWRight

Sponsor footer

Layout: fullWidth

Layout variant. If set to true (yes), the sponsor footer will spread as wide as the screen.

Possible values:

[empty] (default), true

Parts

Parts that are used on various pages on the website.

Page hero

This part is also used for Theme and News detail pages.

Layout: variant

By default the Header spreads the entire width of the screen and the title of the page is placed on top of the image. The flat variant places the title below the image (for increased readability). The other variants also control the positioning of the image to the title.

The people variant creates a centered profile image with the title underneath, in a style that matches the automated people detail pages.

Possible values:

[empty], flat, image-left, image-right, fiftyfifty, people

Image positioning and size: bg

Image positioning and size.

Possible values:

[empty] (default), image_boxed

aspectRatio

🚧

Take note! Only when bg = image_boxed

Possible values:

[empty] (default), 16/9

video

Applies an auto-playing video, similar to the homepage showcase video. Provide the video URL (Youtube, Vimeo).

Possible values:

[a url]

⚠️

Take note! Does not work in combination with these variants: flat, fiftyfifty, image-left/right.

video_on_mobile

Video's do not always auto-start on mobile web browsers. This depends on browser settings, data connections and individual user settings. Making videos too slow to load on mobile connections. This parameter allows you to disable the video on mobile devices.

Possible values:

true (default), false

hideSubtitle / hideTeaser

Hide the line of text under the title. In some cases this might be a teaser, in others a subtitle.

Possible values:

true, false (default)

Media

Various layout options for single and multiple images in media galleries.

single

boxed: boxed

boxed_caption: boxed with text floating in a on top of the image

boxed_caption_below: boxed with a small caption underneath the image

boxed_caption_left: boxed with text on the left

boxed_caption_right: boxed with text on the right

boxed_content: full width with text on the left

boxed_content_flipped: full width with text on the right

fullW: full width

tile: a small single tile

Possible values:

boxed, fullW, boxed_caption, boxed_caption_left, boxed_caption_right, boxed_caption_below, boxed_content, 
boxed_content_flipped, tile

multi

fullW_grid33: full width grid 3 columns

fullW_grid50: full width grid 2 columns

fullW_slide: full width slideshow

masonry: 3 tiles

masonry_compact: 5 tiles

masonry_compact_full: 5 tiles full details

masonry_compact_notext: 5 tiles without text

masonry_four_tiles: 4 tiles

masonry_notext: 3 tiles without text

masonry_wide: 2 tiles

Possible values:

masonry, masonry_notext, masonry_compact, masonry_compact_notext, masonry_compact_full, masonry_wide, fullW_slide, boxed_slide, fullW_grid50, fullW_grid33

Multiple Image options

For multiple images in a slideshow the following parameters can also be used:

slideNrImg

The number of visible images in the slideshow.

Possible values:

[a number]

slideImgCenter

Sets whether the slides should be centered instead of left-aligned.

Possible values:

true, false (default)

lightbox

Sets whether images should open in a lightbox, if no link is provided.

🚧

Take note! Only applies to galleries with multiple images, single images never open in a lightbox

Possible values:

true (default), false

crop

Determines if the image (for the tiles variants) is square, or has a landscape aspect ratio.

🚧

Take note! All tiles except "5 tiles full details" default to square crops.

Possible values:

square, landscape

Audio/Video

Layout: variant

Sets the layout for the embedded multi-media part. By default it fits the box of the site, it can also be set to be smaller, matching the width of the text column of a description part.

Possible values:

boxed (default), compact

Manual assignment Banner

(previously named Highlight banner)

Can be used as a heading, a button, or a combination of both.

Images are normally applied as a background. You can select variants with an image on the left or right of the heading, for single images. For multiple images the implementation is the same as a media part and all the same multi parameters apply (refer to that part for details).

Layout: variant

Possible values:

[empty] (default), image-left, image-right, hd-card, centered

aspectRatio

Use common ratios i.e. 1/1, 3/2, 4/3, 16/9

Possible values:

1/1, 3/2, 4/3, 16/9

Welcome

showAvatar

Possible values:

true (default), false

hideVisitorTags

Possible values:

true, false (default)

buttonAlign

Possible values:

right (default), left

showLinkMobile

Possible values:

true (default), false

Coming Soon

alwaysShowDay

Always show event dates (also if more events happen on the same day).

Possible values:

true, false (default)

bannerOnMobile

Display the banner also on smaller screens.

Possible values:

true, false (default)

dateLast

Show the date at the end, not at the start, of each event.

Possible values:

true, false (default)

excludeThemes

Exclude events that are in a certain theme, by theme ID.

🚧

Take note! Multiple numbers (theme ID) separated by “;”

Possible values:

[a number]; [a number]

hideButton

Hide the "buy tickets" button.

Possible values:

true, false (default)

hideHistory

Hide events that have already started.

Possible values:

true, false (default)

hideTime

Hide the time of the event.

Possible values:

true, false (default)

showGenre

Display the genres of the events above the title of the event.

Possible values:

true, false (default)

indicateGenre

Display the genres of the events.

Possible values:

true, false (default)

indicateLocation

Display the location of the events.

Possible values:

true, false (default)

indicateTags

Display the tags of the events.

Possible values:

true, false (default)

list

List today + tomorrow + day after tomorrow, either in one list (all) or grouped by date (default).

"Toggle" behaves like "all", but adds a theater/movie toggle button.

Possible values:

[empty] (default), all, toggle

max

Limit number of events in the initial list. Previously also as "limit".

Possible values:

[a number]

query

Add a filter query to the "view all" link

Possible values:

[?...]

showHallName

When indicating location include the name of the hall.

Possible values:

true, false (default)

showMovieSubtitle

Show the subtitle field for movies

Possible values:

true, false (default)

showPrices

Show prices per event

Possible values:

true, false (default)

toggleToMovies

Start "toggle" list with movies, not theater events.

Possible values:

true, false (default)

type

Display only a certain production type

Possible values:

all (default), default, movie, long_term

Layout: variant

Layout variant, "flipped" places the banner on the right instead of on the left. Also option for flat banner layout.

Possible values:

[empty] (default), flipped, flat

Events List, Event Slides

A list of events or productions, that you can filter by genres, locations, date range and production type.

start

Start of the date range of events. If left blank will start today.

The format is yyyy-mm-dd, e.g. 2023-12-31.

Possible values:

[a date]

end

End of the date range of events.

The format is yyyy-mm-dd, e.g. 2023-12-31.

Possible values:

[a date]

pagination

Set this to true to disable pagination.

Possible values:

false (default), true

max

Limit the number of events per page. If left blank, will use the default items per page as set in the control panel.

Possible values:

[a number]

production_type

Select the type of productions to display. If not used will display all types.

Possible values:

[empty] (default), all, default, movie, longterm_event

locations

A comma-separated list of IDs of locations.

Possible values:

[a number]

locationselect

The ID of a single location, or "ownvenues" to select all locations that have the "own location" setting checked. Or "not_ownvenues" to select all other locations.

Possible values:

[a number], ownvenues, not_ownvenues

genre (single)

Only include events with this genre, by ID of the genre.

Possible values:

[a number]

genres (multiple)

A comma-separated list of one or more genres, by ID of the genre.

Possible values:

[a number], [a number], [a number]

themes

A comma-separated list of one or more themes, by ID of the theme.

Possible values:

[a number]

hideSupertitle, hideTags, hideGenres

Possible values:

true, false (default)

The Event Slides part has all the same options above, and also these:

Layout: variant

Layout options for the slideshow.

The value can be a combination of flat or default (default meaning text on top of the image) and boxed. By default the slider is not boxed (so it's full width of the screen) and flat (meaning text)

Possible values:

[empty] (default), default, flat (default), boxed

sliderStyle

Style options for the slideshow, currently supports enabling a "fadeout" gradient overlay.

Possible values:

[empty] (default), fadeout

People

Provides an overview of people, for instance those with a role in a production or story.

Layout: variant

The "variant" parameter controls all layout options. These are:

list: a flat textual list of people and their roles

featured: large page-wide cards of the people, with an image and their name and roles

grid: tiles with name, role and image of the people

The grid layout has several additional options, that can be combined.

flat: name and roles in a box underneath the image (instead of overlayed on top of the image)

2, 3, 5: the number of tiles per row of the grid (on a large screen)

no-image: hide the images, but keep the grid layout and tile backgrounds

Possible values:

grid (default), list, featured, flat, 2, 3, 5, no-image

Example combinations of options:

grid flat 2

grid no-image 5

crop

🚧

Take note! Can only be used with the flat variant

Determines if the image is square, or has a landscape aspect ratio.

Possible values:

square, landscape

clusters

A list of comma-separated cluster id's: only people in these roles will be displayed. All people will be displayed if the value is empty.

Possible values:

[a number],[a number]

hideHeading

Optionally hide the heading above the list, when using multiple people lists on a production detail page.

Possible values:

true, false (default)

staticHeading

Use the FE3_eventCredits_heading template text instead of the name of the Cluster

Possible values:

true, false (default)

True = use FE3_eventCredits_heading

Productions for People

A list of productions featuring one or more people using filtering by cluster and/or role.

clusters

A list of comma-separated cluster id's.

Possible values:

[a number],[a number]

roles

A list of comma-separated role id's.

Possible values:

[a number],[a number]

Expected Movies

For movie type productions without events.

production_type

Possible values:

movie

productionOnlyWithoutEvents

Possible values:

true, false (default)

FeaturedNews

To display the publication date, enable "news with date" in the Control Panel.

slideshow

Display as a slider.

Possible values:

true, false (default)

variant

Width of the slider: boxed or full width of the screen.

Possible values:

[empty] (default), boxed

Featured and Banners

The featured flexgrid or slider displays featured banners, news and events, and will automatically fill the configured grid with upcoming events.

The banners grid displays banners that are not featured. The styling of this grid matches the featured grid, but can also be different.

template

Possible values:

slider (default), flexgrid

displayTypeshow

Width of the grid: boxed or full width of the screen.

Possible values:

boxed (default), fullW (full width)

variant

Positioning of text underneath the image (flat) or on top of the image (default).

Possible values:

[empty] (default), flat

row1, row2, row3, row4, row5

Number of items per row, and the height of the row. For example: "2, 400".

Possible values:

[2 numbers, comma separated]

As of Release 202 Flexgrid and bannergrid on Home now support 4 columns

On top of the option for 1, 2 or 3 items on Desktop, the grids on Home now also support 4 items on one row. All rows in a grid can be configured in Routes & Parts to show 1 to 4 items. All rows can have a different number of items, and also height is fully adjustable per row of items.

Example of 4 set for Row 1 and 2 set for Row 2

hideSupertitle

Hide the supertitle of events.

Possible values:

true, false (default)

showGenres

Display genres of events.

Possible values:

true, false (default)

ImagePosition

Display the image at the top of the card (default) or below the title (middle).

Possible values:

[empty] (default), middle

hideTags

Possible values:

true, false (default)

Newsletter subscribe (and News)

The newsletter subscription banner. For legacy reasons also supports a short list of recent news items.

hideNews

To display only the newsletter subscription call to action.

Possible values:

true, false (default)

hideSignup

To display only the list of news items.

Possible values:

true, false (default)

inlineSignup

Instead of a call to action that opens a popup, use and inline form. Requires reCaptcha v3.

Possible values:

true, false (default)

logo

Display a logo above the subscription call to action.

Possible values:

[a url]

signupLink

Instead of using the Peppered newsletter subscriptions, link to somewhere else.

Possible values:

[a url]

wide

Wide layout variant.

🚧

Take note! Only works in combination with hideNews set to true

Possible values:

true, false (default)

Stories

This part is also used for collections, when choosing to use stories from the collection.

max

Maximum items per page.

Possible values:

[a number]

pagination

Allows you to hide the pagination, e.g. if you just want a grid of recent stories.

Possible values:

true (default), false

variant

Change the positioning of text underneath the image (flat) or on top of the image (default).

Also allows you to select various layouts: grids ("grid" or "grid large") or sliders ("slider" or "slider-wide").

Possible values:

default, flat (default), grid, grid-large, slider, slider-wide

arrows

Change the style of the arrow for the slider by enabling a round background behind the arrow.

Possible values:

true, false (default)

content_type

To display stories from selected story types, enter the id's of the story type (comma separated).

[a number]

randomizeImages

Instead of using a standardized crop for all images, use the original image aspect ratio.

Possible values:

true, false (default)

firstLarge

Display the first story with a larger image.

🚧

Take note! Only works with the the grid-large variant.

Possible values:

true, false (default)

filter

Display the the filter bar if there is one or more story type selected.

Possible values:

1 (default), 0

hideStoryTypes

Hide all Story Type tags on story cards in a specific story part on the website.

Possible values:

true, false (default)

🚧

Take note! This replaces the option to hide a specific Story Type.

Event List

💡

Tool tip! To change the visual appearance of events throughout the website, use the Event Cards control panel instead of parameters. Use the parameters to change the appearance in a particular context.

The main event overview should use the combined list and filters, for better performance. The sentence filter variant can also be used separately on the homepage.

For the events list

filters

Display the filter above the list, in the specified variant, or the default box.

Possible values:

false (default), true, sentence, simple, sidebar

context

Change the filter mode to the correct variant for courses.

Possible values:

[empty] (default), courses

variant

Select a layout variant for the events.

Possible values:

[empty] (default), brochure, mobile-ish, topdate

brochureFields

If the brochure variant is selected, these fields are displayed in the popups. You can add multiple values, separated by commas.

Possible values:

teaser, description, description2, programme, credits, video, video2, poster

maxEvents

For the brochure cards: show this many events per production. Defaults to 4.

Possible values:

[a number]

dateType

Date range layout.

Possible values:

[empty] (default), horizontal

compact

Select production types to be displayed in smaller cards without an image.

Possible values:

[empty] (default), default, movie, long_term, all

thumbXL

Display a larger, wider image for each card (not for mobile-ish, brochure).

Possible values:

true, false (default)

gotoButton

When the list is placed on the homepage, instead of pagination display, a button will take the visitor to the full agenda overview page.

Possible values:

true, false (default)

hideTagline, hideTags, hideGenres, hideEndTime, hideLocation, hideHall

Possible values:

true, false (default)

layout

Choose a wider layout for some variants (only for brochure, mobile-ish).

Possible values:

[empty] (default), wide

noSubEvents

Don't display subevents in the agenda, go directly to the production page

Possible values:

[empty] (default), 1

For the filters

filtersDefaultCollapsed

Default state for filters

Possible values:

true, false (default)

filter

A list of filters to display, a combination of the following (separated by spaces).

Possible values:

date, genre, theme, location, type

cityOption

Add a city filtering option. Requires the "sentence" variant. Set to the name of a city (e.g. "Den Haag").

Possible values:

[a text]

action

Normally applies the filters to the current page. You can also use a separate filters part on the homepage and direct it to the agenda overview when submitting.

Possible values:

[empty] (default), agenda

hideBday

Hide the user's birthday as a preset in the date picker.

Possible values:

true, false (default)

hideCity

In the list of location filters, do not display the location's city.

Possible values:

true, false (default)

customRange

Add a custom preset date range for the date picker. 3 comma separated values: with a label, a start and an end date. E.g. Festival,2020-01-01,2020-02-01.

Possible values:

[label], YYYY-MM-DD,YYYY-MM-DD

datepickerAutosubmit

Automatically submit the filter after a selection in the date picker.

Possible values:

true, false (default)

Hero for production

dateType

Date range layout.

Possible values:

[empty] (default), horizontal

dateVariant

Select between having the date on the top, side (default), or no date at all.

Possible values:

[empty] (default), topdate, nodate

hideTags, hideGenres, hideEndTime, hideLocation, hideHall, hideKijkwijzer

Possible values:

true, false (default)

genreVariant

Places the genre above the supertitle.

Possible values:

top

Width of the hero image or video: boxed ("image_boxed") or full width of the screen.

Possible values:

[empty] (default), image_boxed

showCredits, showTagline

Display credits or credits below the title info.

Possible values:

true, false (default)

movieFullInfo

Display full information, including locations, also for movies.

Possible values:

true, false (default)

toggleThreshold

If there are more events than this number, you need to press the "show events" button to make them visible.

Possible values:

[a number] (default: 1)

singleFolded

If it's a single event, fold the event information into the header.

Possible values:

true, false (default)

infoSupertitle

Show the "info" field of a single event as the "supertitle".

Possible values:

true, false (default)

Layout: variant

Layout variants. The showcase variant put the event information on top of the hero image, and shifts the hero image underneath the header (assuming that's empty).

Possible values:

[empty] (default), showcase, fiftyfifty

Themes (for a theme group)

themeListVariant

Text on top of the image (default) or below it (flat).

Possible values:

default, flat

variant

Further layout variants for the cards: alternating wide and small cards (default) only small cards (small) or horizontally split cards with text on one side and an image on the other (fiftyfifty).

Possible values:

[empty] (default), small, fiftyfifty

Description 1

The main description for productions, with a sidebar with meta information.

hideTags, hideThemes

Possible values:

true, false (default)

Flips sides with description and notes.

contentAlign

Possible values:

right (default), left

Quote

A different version of a quote variant.

variant

Possible values:

1 (default), 2

iFrame

IFrames will be blocked by cookie consent, unless the "trusted" parameter is set to true.

trusted

Possible values:

true, false (default)

Content Library

When using the content library on the Routes for the Homepage or event detail pages, provide the id of a content library entry. Set the part to "raw" output if there is a custom implementation to render the content.

library_content_id

Possible values:

[a number]

raw

Possible values:

true, false (default)

Genres List

A list of buttons that can be used to filter the agenda overview based on genres.

limit

Limit the number of visible genres. By default 4 genres will be displayed.

Possible values:

[a number]

Various vertical cards (suggestions, featured slides, story slides)

imagePosition

Possible values:

[empty] (default), middle

hideTagline, showTagline

Possible values:

true, false

showGenres

Possible values:

true, false (default)

variant

Possible values:

default, flat (default)

Advanced features

⚠️

Take note! The following can only be adjusted by an Expert. Please create a ticket in the Service Portal if you like to use these.

Hero images

Hero images are large images at the top of an information or event detail page, the image in a brochure popup, or large single images in a media gallery. "On-load" animations are directly visible as the page loads, or if the popup is opened.

A combination of the following is possible on hero images:

Zoom or twist

Saturate or desaturate

Slide

Fade-in

For each type of Hero image a selection of animations can be configured in the site's stylesheet.

Common page headers like those for news, theme detail, and others, share the same stylesheet and therefore animations. Currently, it's possible to replace those animations via part parameters (e.g. to have a different animation for news pages), but only one animation can be selected that way: they can currently not be stacked via part parameters like they can in the stylesheet.

Each information page can have its own animation via part parameters.

Images

There are several (optional) images the site expects to be present in the client repository:

/images/logo.svg : Logo for header (mandatory)

/images/logo_mobile.svg : Logo for header on mobile (mandatory)

/images/logo_showcase.svg : Separate logo for showcase headers (optional)

/images/logo_order.svg : Separate logo for order process headers (optional)

/images/logo_mobile_showcase.svg : Separate logo for showcase headers on mobile (optional, only v1 header)

/images/logo_sticky.svg : Logo for sticky menu (optional)

/images/logo_touch.svg : Logo for header when the normal logo doesn't fit next to the servicemenu (optional, only v1 header)

/images/logo_schema.png: Logo for structured data: https://developers.google.com/search/docs/data-types/logo (a 112x112px PNG image)

V202 | Release Notes - October 2024

Pepper - CultureHub AI

Overview of Parameters in Parts

About Parameters

Common Terms

General parameters

Sticky Parts

Main menu

Footer

Post Footer

Sponsor footer

Parts

Page hero

Media

Multiple Image options

Audio/Video

Manual assignment Banner

Welcome

Coming Soon

Events List, Event Slides

People

Productions for People

Expected Movies

FeaturedNews

Featured and Banners

Newsletter subscribe (and News)

Stories

Event List

For the events list

For the filters

Hero for production

Themes (for a theme group)

Description 1

Quote

iFrame

Content Library

Genres List

Various vertical cards (suggestions, featured slides, story slides)

Advanced features

Hero images

Images