Flexible content blocks
The Flexible Content Block content type is designed to allow you to mix and match elements from these standalone content types; Column blocks, Column colour blocks, News and events manual block sidebar and Twitter feed.
Flexible Content items automatically organise in rows of two and/or three depending on a) how many are added to the page and the b) device screen size (mobile, tablet, desktop etc.).
You can use any combination and number (up to 12) of the following items: Flexible item - Column block, Flexible item - Column colour block, Flexible item - General content block, Flexible item - manual News & Events, Flexible item - Twitter.
See an example of the Flexible content block using all the options at the foot of this page.
Give it a try
Add your Flexible content items
1. Add a hidden sub-section to the page where you want your Flexible content block to appear and call it FlexibleContent - this must be spelt correctly, with the capitalised 'F' and 'C' and no additional characters such as spaces or fullstops.
The combination of hiding this and giving it the precise name prompts the system to not treat it as a page. Instead, it treats it and any sub-pages as special repository folders. Do not place content in this 'FlexibleContent' folder. See No. 2.
2. Next, create another hidden sub-section under the FlexibleContent section you've just created. Call this second subsection something to help you identify what it is about - for example, 'FAQ' or 'Safety procedure'. I've called mine 'Example items'. However, it MUST NOT be called FlexibleContent.
It should look like this:
3. It is in this sub folder (the one I've called Example items) that you add the individual Flexible items to build your Flexible Content block.
At present there are 5 different flexible item content types available. You can add them in any combination you like.
- Flexible item - Column block,
- Flexible item - Column colour block
- Flexible item - General content block
- Flexible item - manual News & Events
- Flexible item - Twitter
4. In the sub folder (mine is 'Example items') select 'Add content' from the yellow dropdown menu and find the Flexible item you want from the complete list of content types. Complete the fields as required within the Flexible item.
Please note: The Up and Down ordering arrows do not work in the Flexible items so you need to use letters to order your items.
The Name*: field for the first item should be named: a - My first item, the second item b - My second item, and the third: c - Third item; and so on.
The screen grab below is shows the items used in the real example at the foot of this page.
5. Select Add and approve.
There are a maximum of 12 items for each sub folder, if you want more than 12 items on a page, create a second sub folder next to your first one and use a separate widget for each separate sub-folder.
Add the Flexible Content block to the page where it will display
Now that the items are in their sub folder you need to add the Flexible content block onto the page.
6. Open t4 Site structure, find the page where you want the Flexible content block to appear and select 'Add content'.
7. Select the 'Flexible content widget' content type. This table explains the form options.
|Field title||What should I do?||Is it compulsory?|
|Name *||Give your Flexible content widget a name, e.g. 'Main links block'. This is for reference for editors of this page only. Users never see this.||Yes|
|Block Title*||Enter a title for your Flexible content. For example, 'Main link list'. The block title is a mandatory requirement. It is important for accessiblity for visually-impaired users who use screenreaders to read web pages. You don't need to show it on the page, see below.||Yes|
|Show block title||If you want the block title to appear to all users, put a tick in the 'Show block title' box. You can hide this title from users who are not visually impaired by deselecting this option.||No|
|Find items *||Tell the widget where it will find the items for this Flexible content. Press 'Select section', then find and select the folder where you added your items. This will be the hidden sub folder that you created under the 'FlexibleContent' folder. In the previous screenshot we looked at, this folder is 'Example items'.||Yes|
|Display items *||Defaults to ticked||Yes|
8. Select Update and approve.
9. Remember to publish the entire branch to include both the items and widget.
Flexible content item examples
Flexible item - General content block
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
Flexible item - TwitterTweets by imperialcollege
If you need more help please Contact us.