As the name suggests 3 Column block/Twitter is very similar to the 3 Column block, but has a fourth column where you can add a twitter feed.

This block gives users a quick way to add lists of links. It's for use on all page layouts.

Each row must have a minimum of two links and a maximum of ten. The picture at the top is optional but for the sake of balance, it looks best if images feature across all three columns or no columns.

Multiple blocks can be added to pages.

Note: if your Twitter timeline isn't displaying on your published pages, then it may be because you have not enabled cookies for the Imperial website. See  for the Imperial website. Firefox browser has additional security settings which can block things like Twitter feeds, so you should also check this if you are experiencing this issue.

Instructions

Adding a 3 Column block/Twitter is a three step process. (The first part is identical to creating a 3 Column block).

Step one: creating the folder structure

1. Create a hidden sub-section (sub-page) of the section where the 3 Column block will live. This folder must be called 'Column block' (case sensitive).

2. Then create a second hidden sub-section as a child of this page. This can be called anything you like. In this case, 3 column block items (insects). This folder will contain all three of the '3 column block items' (see steps below) which have the links and images for each column.

If you want to add another 3 column block to your page, you'll need a separate hidden folder in your hidden Column block folder.

Column block folder structure in the site structure screen


Step two: creating the columns items and adding the links list (3 Column block item)

1. To your hidden section, e.g. 3 column block items (insects) add a 3 Column block item content type (find out how to add a content type to a section) and give it a name, for example, links column 1. (This first 3 Column block item populates the left most column in the block.)

2. A form with a number of fields will appear. Each of these fields relates to the components of your left most Column, fill in the form, example below:

Field titleWhat should I do?Is it compulsory?
Name* There will be three of these content types (one for each column), in this example we've named this links col 1 Yes
Title* Adds a heading to the column No
Show block title Ticking this box will make the heading show to all users, not just screenreaders No
Image

Click Select media to choose a image from the Media Library or to upload a new image. An image of 3000 pixels (wide) by 2000 pixels (high) is required for this content type. Please view the guidance on adding and selecting images in the Media Library.

If you add an image you must add an 'Alt text' describing what is contained in the image. This is an accessibility requirement.

No
Link Text 1* This is the first link in the column's list Yes
Link 1 Internal Use the Select link to add an internal link OR No, but each added link must be created or the formatting won't work correctly
Link 1 External Copy and paste URL from external website OR No, but each added link must be created or the formatting won't work correctly
Link 1 Media Library Add a document (pdf, Word, Powerpoint etc.,) from the Media Library No, but each added link must be created or the formatting won't work correctly
Link Text 2 This is the second link in the column's list No
Link 2 Internal Use the Select link to add an internal link OR No, but each added link must be created or the formatting won't work correctly
Link 2 External Copy and paste URL from external website OR No, but each added link must be created or the formatting won't work correctly
Link 2 Media Library Add a document (pdf, Word, Powerpoint etc.,) from the Media Library No, but each added link must be created or the formatting won't work correctly
Link Text 3 This is the third link in the column's list. All links now on are optional No
Link 3 Internal Use the Select link to add an internal link OR No, but each added link must be created or the formatting won't work correctly
Link 3 External Copy and paste URL from external website OR No, but each added link must be created or the formatting won't work correctly
Link 3 Media Library Add a document (pdf, Word, Powerpoint etc.,) from the Media Library No, but each added link must be created or the formatting won't work correctly
Links 4 to 10 The same pattern of fields repeats for every link No

3. Click Save and approve to save your changes.

Save and approve option

4. You'll need to add a 3 Column block item for each of the three columns in the block. For consistency in this example links column 2 and links column 3. (Repeat steps 1-3 twice.)

5. Once these are in place, your section will look similar to the screenshot below.  You can Edit these 3 column block items by clicking on any of the items.

Content tab of the 3 column block items section showing the three 3 column block items added


Step three: adding the 3 column block/twitter to the page you want to display it on

We can now tie the whole thing together. In this stage you will be selecting which page you want the column items you have just created to show on.

1. Add a 3 Column block/Twitter content type to the section where the block will appear, in the example, the section I want it to appear on the About us page.

2. A form with a number of fields will appear, fill in the form, example below:

Field titleWhat should I do?Is it compulsory?
Name* Name the block and give it a concise description Yes
Twitter Search Term* Add the username or hashtag. In this case we used: @imperialcollege Yes
Twitter Embed Code* Enter the Twitter Embed code - How to generate your Twitter Embed Code Yes
Twitter Link* The URL of the Twitter feed you're displaying. eg. https://twitter.com/imperialcollege Yes
Find items* Click Add section link and select the section where you added your columns. In my example this would be 3 column block items (insects) . This ties the Column block items built earlier to the rest of the block. Yes
Display items* Defaults to ticked Yes
Twitter Widget - please do not use This is a redundant field  

Note: The Find items field in this content type tells the content type where to find the links.

3. Click Save and approve to save your changes.

Save and approve