From now on main document to be updated is here:
https://www.notion.so/culturesuite/Overview-of-Parameters-in-Parts-7a16f8548da14af1b34a553274659145
Please do not update this Freshdesk document any more. info underneath is just kept for reference
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. This manual is about the specific parameters to add and change and explains what it does.
TABLE OF CONTENTS
- Common terms
- Generic parameters
- Sticky parts
- Parts
- Page hero
- Media
- Audio/Video
- Highlight 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
- Hero for production
- genreVariant
- Themes (for a theme group)
- Description 1
- iFrame
- Content Library
- Genres List
- Various vertical cards (suggestions, featured slides, story slides)
- Advanced features
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.
Generic 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
pTop, pBottom
Padding above (pTop) or below (pBottom) the part. Typically "20px" or "30px", etc.
Possible values:
[a value in pixels]
bgColor
Background behind the part. 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.
https://developer.mozilla.org/en-US/docs/Web/CSS/background
Possible values:
[a background]
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
variant
Layout variant. By default it displays only shortcuts, and the full main menu is behind the "hamburger".
- "suckerfish" has 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
suckerfishMode
Suckerfish variations.
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
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.
[#hexcode]
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. Be sure to set the production hero to the "showcase" variant.
Possible values:
true, false (default)
Footer
No parameters for this part.
Post footer
postFooter
Layout variant.
- "boxedLeftRight" spreads the post-footer across the width of the page.
- "fullWLeft" aligns all text to the left.
- "fullWRight" aligns all text to the right.
Possible values:
boxedLeftRight (default), fullWLeft, fullWRight
Sponsor footer
fullWidth
Layout variant. If set to true, the sponsor footer will spread as wide as the screen.
Possible values:
[empty] (default), true (yes)
Parts
Parts that are used on various pages on the website.
Page hero
This part is also used for Theme and News detail pages.
variant
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] (default), flat, image-left, image-right, fiftyfifty, people
bg
Image positioning and size.
Possible values:
[empty] (default), image_boxed
aspectRatio
Only when bg = image_boxed
Possible values:
[empty] (default), 16/9
video
Applies an auto-playing video, similar to the homepage showcase video. Does not work in combination with these variants: flat, fiftyfifty, image-left/right. Just provide the video url (Youtube, Vimeo).
Possible values:
[a url]
video_on_mobile
Video's don't reliably auto-start on mobile web browsers, and might be 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
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 wether the slides should be centered instead of left-aligned.
true, false (default)
lightbox
Sets wether images should open in a lightbox if no link is provided (only applies to galleries with multiple images, single images never open in a lightbox).
true (default), false
crop
Determines if the image (for the tiles variants) is square, or has a landscape aspect ratio. All tiles except "5 tiles full details" default to square crops.
square, landscape
Audio/Video
variant
Sets the layout for the embedded multi-media part. By default it fits the box of the site, but it can also be set to be smaller, matching the width of the text column of a description part.
Possible values:
boxed (default), compact
Highlight banner
Can be used as a heading, a button, or a combination of both.
Images are normally applied as a background, but 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).
variant
Possible values:
[empty] (default), image-left, image-right, hd-card
Welcome
showAvatar
Possible values:
true (default), false
hideVisitorTags
Possible values:
true, false (default)
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.
Possible values:
[a number], [multiple numbers separated by ;]
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
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 omitted 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 omitted 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 omitted 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
Only include events with this genre, by ID of the genre.
Possible values:
[a number]
genres
A comma-separated list of one or more genres, by ID of the genre.
Possible values:
[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:
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 "fade out" gradient overlay.
Possible values:
[empty] (default), fadeout
People
Provides an overview of people, for instance those with a role in a production or story.
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
Only for 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)
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 differer
template
Possible values:
slider (default), flexgrid
displayType
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]
hideSupertitle
Hide the supertitle of events.
Possible values:
true, false (default)
genres
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)
hideSupertitle
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 (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)
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. Requires 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
Event List
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 are placed on the homepage, instead of pagination display a button that 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
bg
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
Dsiplay 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)
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
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
The following can only be adjusted bij an Expert. Please contact us 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)
Keywords: List of parameters which might be used in several parts route