Three or four column grid layouts

Posted on 26 February, 2014 by Paul

This post talks about grid layouts in the old Research and Conferences template, you can use this post to help you create grid layouts in the new template but we’ve written a new post for that (https://blogs.ncl.ac.uk/t4/2016/11/21/layout-examples-box-layouts/).

A lot of our websites have a homepage laid out as a grid of boxes containing images and text, where each box relates to a theme of the site or a set of related tasks. With a good choice of photography or illustration, this is a good way to make a site look alive and gets people straight to where they want to be. Here are some examples:

Step 1) Remove the Sidebar

You’ll want to make use of the full width of the template. To remove the sidebar, Modify the Content of the homepage of your site (Modify Content is found in the column of yellow boxes) and add the word ‘nosidebar’ to the class field:

Preview or Publish the content, and your text will fit the full width of the template:

So far so good – note that if you want a full width image, it’ll need to be 960px wide. If you want an fading banner at the top of the page follow these instructions.

Step 2) Create and Upload your Images to the Media Library

It’s best if you resize all of your images to the same size and shape using photoshop and then upload them to the media library in one go, going back and forth between editing the content and uploading the images will take more time. The images i’m using in this example are 420px wide by 236px tall.

Step 3) Create a new piece of content for each box

Each box on the page will be a new piece of All Purpose Content. Create three new pieces of content with an image at the top and some text. If you’ve already created them, you should make both the images and the text into links to the appropriate sections of your website. Give each of these new pieces of content the class “threecol” as shown in the screenshots below:

You can reorder them by returning to the site structure and clicking Modify Content to the right of the homepage – the move buttons are up and down arrows to the right of the screen. This can be a bit fiddly, so remember to click Save Changes before leaving this screen.

Publish or Preview your site and LO!, you will have three boxes laid out in three columns as in the screenshot below:

Step 4) But I want FOUR boxes!

If you add a fourth box with the class threecol…

…You’ll find that when you publish it, it starts a second row:

Using the threecol class is good if you have a number of boxes divisible by three, so if you have four boxes, you probably want to change all of the class fields for these pieces of content to either ‘twocol’ or ‘fourcol’ – which you choose will depend on the sizes of your images, quantity of text.

twocol:

To make this layout work with two columns, I should have probably formatted the images to be wider and narrower as the second tier now requires scrolling on many monitors, and a second tier may look like second class content, which you might not want.

fourcol:

The fourcol version means that the text ends up looking quite tall, so in this case i’d probably rethink how much text I need in each box – maybe consider just using the titles.

Step 5) But I want FIVE boxes!

We don’t always have the luxury of planning ahead. There is no facility for creating five column layouts at the moment, but you can combine a row of three and a row of two by giving the fist three items a ‘threecol’ class and the final two ‘twocol’. If you resize your images with this in mind it will look ok, but in this particular example it looks like this:

A bit weird. A better solution might be to turn your welcome text into a sixth box and return to a threecol grid by adding the threecol class to the very first piece of content.

It then looks like this:

It will probably look better if the new box also has a similarly formatted image to the others on the page, but hopefully this post has given a good overview of how to create two, three and four column grids on pages.

See also:

Two Columns and a Banner

Posted on 25 February, 2014 by Paul

You may wish to remove the sidebar and use a two column layout for one of your pages -usually when you are wanting to acknowledge equal parity by funding bodies or supporters as in the case of our Research Scholarships and Expeditions website.

In this case, the site has a hidden section called ‘Home Banner‘ which contains the slideshow (four pieces of content) as described in our post on Slideshows and Banners.

The homepage – seen at the top of the above screenshot, contains two pieces of content. When we go to ‘Modify Content’ for that homepage section, we see that these are given names corresponding to the two columns on the websites screenshot above.

Choosing either piece of content, each would contain one of the columns. The important thing is the ‘class’ field, which contains two words:

twocol: this gives the piece of content a width of just under 50% of the whole content area, plus some padding.
nosidebar: this removes the usual menu bar from the site, meaning that the two columns fill the whole width of the template.

As you can see, the Class field can contain multiple instructions for the page layout, so you could also embed ticker taped bulleted lists in a column, or other things documented on this blog should you wish to.

Expandable and Tabbed Content

Posted on 25 February, 2014 by Paul

There are two main ways of shortening a very long page:

Firstly, you can make the content Expandable, as seen on our Entrance Requirements pages. This is useful when you have long lists of items on a page, but the page visitor is only likely to be interested in the one item that applies to their circumstances.

Secondly, you can make the content Tabbed, which is also used in the course pages. Tabbed content is useful when you have lots of pages with similar categories (all courses have Modules, Careers, Finance information, for example).

Both methods are implemented in exactly the same way.

Each Tab or Expandable needs to be its own piece of content within the same section. You’ll have to go to Add Content -> All Purpose Content for each one. Here’s how the content looks for the Tabbed page in the Sample Content site:

In this example, the first piece of content has no special requirements, but the bottom three are tabbed. They become tabbed simply by giving them the class ‘tabbed‘ all in lower case – here’s a screenshot of the second tab from the Modify Content screen:

The class field is at the bottom – remember to use only lower case. Also note that this piece of content has some embedded video from Vimeo – this is documented in another post.

The Content List for the expandable section looks more or less identical:

The only significant difference is that the class field contains the word ‘expandable’ in lowercase:

Remember to Save and Approve, and you’re done. The two types are fairly interchangeable. If you want to switch between one or the other, just change the class field, or to make it back into regular content, remove it entirely.

Ticker Tapes

Posted on 4 February, 2014 by Paul

This post relates to the old Research and Conferences template and so has been Archived.

This article describes how to turn a regular bulleted list into a ticker tape. Another post (coming soon) will discuss how to sync this with your site news page, or with an RSS feed from another site or blog, but there are plenty of cases where you wouldn’t want the content to be fully synchronised.

Ticker tapes and other animated elements should be used with restraint, as they effect the readability of content on your site. This technique will only work with one ticker per page – you should not have more 😉

As with sliding banners, column and grid layouts, this makes use of the Class field in All Purpose Content.

Create a bulleted list in some All Purpose Content and make sure that each item is web a link to another webpage using the chainlink icon, this would ideally be your news page or the individual news items.

Give the piece of All Purpose Content the Class ‘tickertape’ in the field at the bottom of the content edit area – see below.

Any bulleted list items within this piece of content will become a ticker tape which types out the item character by character. Obviously the below screenshot isn’t animated:

Alternatively, using the same technique, you can use a different class ‘scrollingticker‘ which scrolls a new item vertically into view.

Scrolling ticker is slightly more flexible in that it does not restrict you to only having hyperlinked content in your bulleted list and can even work with images if laid out carefully.

See Also:

Footer Logos and Layout

Posted on 3 February, 2014 by Paul

If you have multiple funding sources, or input from other schools and institutions, you’ll probably want to display their logo’s somewhere.

Having a ‘partners’ section is good for this, but another common option is the sites footer (the sidebar of every page can be too intrusive).

Laying images out in a single piece of All Purpose Content can be fiddly: this is not so much a flaw in T4, but more to do with the web itself and usually requires some knowledge of HTML and/or CSS to achieve good looking results.

Withing our installation of T4, we offer a ‘Class’ field within ‘All Purpose Content’ which we use to give specific instructions about the display of a piece of content.

One such class is ‘threecol’: if you give a piece of content this class, it will take up 1/3 of the width of the template.

Give your Address piece of content this class, and then add two more.

Order the three pieces of content so that the pieces of content with the class ‘threecol’ are in left to right order and click Save Changes.

When the site publishes, each piece of content will take up 1/3 of the width of the template and look like this:

Note that you may have to work with the media library (or in photoshop) beforehand to ensure that all images are an appropriate size.
Logos will have different aspect ratios so figuring out how to give them equal parity while looking tidy is always going to be awkward.
If you have more logos, the process is identical for using classes called ‘fourcols’, ‘fivecols’ and ‘sixcols’.
Remember that you can make the logos into links to the appropriate websites using the chainlink icon.

Embedding Video, Maps, Twitter and other media in your site

Posted on 23 January, 2014 by Paul

There’s a good chance you’ll want to embed content from other websites in your site. Youtube Video, Flickr photo galleries, Twitter feeds, Google Maps for example.

There are two ways in which you can do this.

The easiest way is to embed the URL into the content area as follows:

Paste the web address of the content the content area of a piece of All Purpose Content (this also works with News, Events and Staff Profiles).
Click on the chain link icon and ensure that the web address is a link to the content.
Select the linktext and in the Styles dropdown in the toolbar, select ‘media_embed‘. This will surround your link with a grey box.

When this page publishes to the live or dev site, the link will be transformed into the full video. Some services will display in preview, some won’t (such as flickr) for security reasons so you’ll have to publish them to see them in action.

The full list of supported services can be found on the Embedly website. We’ve not tested all of them and some require the URL to be in a specific format. If you’re using a very recent version of our template site (since 15th January 2013), you should find a suite of examples in one of your sections, if you’re not, please email it.servicedesk@ncl.ac.uk and we’ll hook you up.

The Newcastle University Form Builder and Steaming Video from NuVision can be embedded using this method.

Notably, Twitter and Google Maps do not work using this method, so for these services you will need to obtain their embed code.

Pasting Embed Code into the Content Area

Most social media provide embed code to paste into your site. Some require you to have an account (Twitter), others don’t (Google Maps) – we’ll run through these two examples.

Google Maps

Any map you create in google maps can be embedded. The embed code for google maps can be found using the cog icon to the bottom right of the screen.

The code it gives you will look something like this:

Copy it using Ctrl+C, then return to T4 and amend your content. You’ll need to paste this into the content area of all purpose content as HTML.

The HTML link is sixth from the right in the content formatting toolbar. When you click it a window will pop up showing you the code of the page. HTML isn’t terribly complicated, and in this case it’s just a matter of pasting the code you’ve been given into the page:

Click update and you’ll return to your page:

As with the URL embed method, some services will be blocked for security reasons from within T4 so you’ll may not see it until you preview or publish the site. With google, however, you can see the content within the edit area as in the screenshot above.

Twitter

To add twitter timelines or searches to a page, we need to create a twitter widget. To do this goto publish.twitter.com and past in the URL of feed you’d like to embed.
e.g. https://twitter.com/TwitterDev

You’ll end up with a piece of code like:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Copy it using “Ctrl+C”, and return to T4.
Add a ‘Raw HTML/Javascript’ type, where you would like the feed to embed
Paste the code into that and Update/Approve the content.

Making changes:

An overview of embedding Twitter timelines is available detailing customisations that can be made.

As with google maps, go back to T4, click on the HTML icon, and paste the code into the content area. Unfortunately, this will not appear in the edit area OR preview. You must publish the site to see the results.

It just shows the link in both the edit area and preview:

But when published the twitter feed shows in the content area:

That’s it. You might be tempted to put the twitter feed in your sidebar: don’t. It updates constantly and will cause reading problems for people (especially people visual impairments or on a mobile network), and twitter will lock you out if you are using the service too much, so instead of a feed, you’ll get an error message. It’s best to put this kind of thing on a contact or get involved page.

News and Events, Sorting and Archiving Content

Posted on 23 January, 2014 by Paul

Most content on your website is added using the All Purpose Content template type. Other content templates are available for Staff Profiles, News and Events, etc.

This page discusses the News and Events templates – both behave in a very similar way but have different selections of fields to display. The examples will be from the News template.

This page also discusses sorting content, setting archive and expiry dates that are particularly relevant to sites which have a high turnover of news, but the controls discussed will work on all kinds of content.

News and Events

News Content Types

Click Add Content using the yellow dropdown menu to the right of your News section and choose the News Template from the list that appears.

In most cases in T4, a Section represents a single webpage, but in the case of Staff, News and Events, multiple pieces of content appear on the page and clicking on their titles opens up a new page.

The Name and Brief Description appear in your news list, when you click on the title or the image, the visitor is taken to a new page containing the full text of the Main Body.

As with the Staff Profile content type, the Picture you upload is resized both for the list and for use within the news item.

As you can see from the list though, our content has been automatically added to the bottom of the page (as it does when you add any new piece of content to a page).

Automatic Ordering

With news you want the items to automatically order by date – and with staff you probably want automatic ordering by name.

You can do this by going to Modify Content within the news section.

Click the checkbox marked Automatic Ordering. Choose the type of ordering you want (by updated, created or alphabetically), and uncheck the locks next to each piece of content. If you have a very important news item you want to remain at the top, leave its lock checked and use the arrows to move it to the top as shown in this screen shot.

Remember to click Save Changes before leaving this screen. The ordering will update on your website next time this section is published.

Automatic Archiving and Delayed Publishing

Automatic Archiving moves news into a chosen section at a given date. Add a section called Archive to your news Section. You can choose to make this a hidden section by unchecking the ‘Show in Navigation’ box. Tick the ‘Archive’ checkbox.

The next time you add content to the News Section, you can click on the Options tab for that piece of content. You’ll be given a screen where you can select Publish and Expiry dates.

If the Publish Date is set in the future, the content won’t appear on your site till the next publish after that date and time (this will be within four hours).

Within four hours of the Expiry Date, the content will move into the Archive section if you select one, otherwise, it will be deleted.

Note that this is based on the publishing schedule for your site, if you need to rely on this for legal reasons (embargoed press releases, or a received take down notice for example), please email it.servicedesk@ncl.ac.uk to stating your requirement.

People Profiles and Staff Lists

Posted on 23 January, 2014 by Paul

Most content on your website is added using the All Purpose Content template type. Other content templates are available for Staff Profiles, News and Events, etc.

This page discusses two ways to create lists of Staff Profiles on your site. The Content Templates are: Staff from MyImpact and Staff Profile.

Staff from MyImpact

This is the quickest way to get a staff list up on your site provided all of your project team are newcastle university staff with a profile in the MyImpact system.

Create a Staff, Team or People section, then click Add Content and choose the Staff from MyImpact Content Type.

Give the list a Title and Brief description, then enter on a single line with no spaces the list of staff you want in the list using the first part of their email address (the bit before the @) as the identifier:

So in the case above, we’re Paul Thompson, Mike Sales and Chris Franks.

Our email addresses are chris.franks@ncl.ac.uk, mike.sales@ncl.ac.uk and p.thompson@ncl.ac.uk.

So in the field we enter: p.thompson,chris.franks

When the site is previewed, the staff list should appear in alphabetical order, respecting the peoples preferences in MyImpact (which means that you may not be guaranteed an image or contact details) and linking to their preferred profile page.

Note: we do not embed these profiles in your site as this creates duplicates and it’s bad for search engine results to have many duplicate pages.

If, for whatever reason (you have students in your team, or people from outside the university, or you want to write a bit more about each person), you need to use the Staff Profile content type.

Staff Profile

Click Add Content within a section in the usual way and select Staff Profile. You’ll then be given quite a few fields to fill in for the list and also the option to upload an image and add a larger piece of text for the profile.

When you save and approve the Staff Profile, it adds the staff profile to the list. The Name field is what is used when sorting in alphabetical order, the Full Name field is what is displayed on the page.

The image is automatically resized to appear in the staff list as a thumbnail and as a larger version in the profile page

A staff list created in this way will have multiple pieces of content in a single section – in T4 a section usually represents a single page on the web, but in the case of Staff Profiles, News and Events, these appear as a list on the page linking to a new page containing the full text.

In the screenshots below there is a piece of All Purpose Content at the top to explain the page, you might want to separate lists of staff into groups with introductory content.

Next:

News and Events, Sorting and Archiving Content

The Media Library

Posted on 23 January, 2014 by Paul

Terminal Four has a media library which can be used to store images and other kinds of documents such as PDF files or powerpoint presentations. It’s not suitable for larger file types such as Video, which should be hosted on NuVision.

This page describes using the Media Library for images. Note that while the T4 Media Library can resize and crop images, you will always get better results if you do this in photoshop (which can be found on RAS).

If you are planning to be using the Media Library a lot, you will find performance greatly improves if you use the Chrome web browser rather than Internet Explorer.

It can be accessed in two ways, via the Control tab to the top right of T4.

… or by using the icon while editing content (it’s third from the right in the middle tier

When you enter the media library, its folder structure is on the left and can be browsed using the + icons next to the folders. There is a top level section in which we are maintaing a set of useful icons (other university and funding body logo’s). You’ll find a section called ‘Sites’ in which you should have a folder set up specifically for your site, depending on its category.

NOTE: Browsing these long list can be fiddly. We’ll shortly be setting up shortcut links for all media library folders people have permission to edit.

The contents of each folder appears on the right and at the top of this panel, if you are in a folder you have permission to edit you’ll see Add Media buttons.

When you click on Add Media, you’ll visit a screen with quite a few fields. You only need to be interested in Name, Description and Media.

Name is what you’ll see in the list of media
Description is important since it’s what people will read or hear if they can’t see the images for some reason (they could have visual imparements and be using a screen reader, or on a slow network or mobile phone, for example). The description should convey (in so far is possible) the same information as the image, but if the image is purely a decorative flourish, this is not needed.
Media allows you to browse to the piece of media you wish to upload.

Fill these fields in and click Add – you’ll be returned to the media list.

Resizing and Cropping

To resize and/or crop the image, mouseover the image and click ‘Advanced’

You can then click on Modify to alter your original image, or Add Variant to create alternative versions of it.

If you select Resize, you’ll be invited to enter the numbers for the width and height and give the new variant a name.

The full width of the content area of your website is 710 pixels, so this is a good width for landscape formatted images. If your image is portrait format, and you want text to flow around it, try 300 pixels for the width. Unless you want to stretch the image, leave the Keep aspect ratio box checked.

If you select Crop, you can draw a box over the image selecting the area you want to keep. Again, you give the variant a name a click Save. Your variants will appear along the bottom of this screen.

Inserting the Media into Content

Go to the Site Structure and click Modify Content for the section you want to amend (or Add Content if it has no content yet).

Within the content, use the icon to access the Media Library.

A window will pop up – browse to the correct folder, mouseover the image you want and click Select.

You’ll be returned to the content area with your image embedded. It may be the case that you need to resize it. If you’re using a good web browser such as an up to date version of Chrome you should be able to drag the corners of the image.

Otherwise, you can double click on it and type in the width and height (click Constrain Proportions) to ensure that you don’t distort the shape of the picture. A width of around 200-300 is good if you want text to flow around the image.

Use the left/right alignment buttons to place the image to the left and right of the content.

Please note that the web is not good at complex layouts of images on a page. If you really need precise positioning of images relative to each other or text, you are likely to be much better off uploading a PDF of your information.

Banner Slideshows

Posted on 23 January, 2014 by Paul

Note that these slideshows don’t have to go in the Home Banner – you could easily make one in the sidebar or even in the content area, but the image dimensions mentioned on this page are for that purpose.

It’s a good idea to prepare your images in advance. The best tool for the job is Photoshop, which you can find on RAS. Images in the banner should be 950px wide. The height of the image is up to you, so long as they’re all the same size, but 250px works well.

Upload your images into your folder of the Media Library, which can be found in the Content tab top right of T4.

Each site should have its own Media Library folder in the corresponding section – only when you’re your section will you see the Add Media button.

Once you’ve uploaded your images to the media library, go back to the Site Structure.

If you don’t already have one, create a hidden section called Home Banner as described here.

Each slide will be its own piece of content in the section, click on Add Content in the column of dropdowns to the right of the Home Banner section and then select All Purpose Content.

Add one slide image from the media library to each piece of content. The Media Library is accessed by the button to the right of the too bar with the coloured shapes in.

The Media Library will popup in the last section you visited, so this should be the same one you uploaded your slides to. Select the Slide image by mousing over it and clicking on Select.

Remember that you can use the chain link icon to make the slides links to different sections in your site.

Enter the word ‘slide‘ into the Class field in the All Purpose Content, and then click Add and Approve.

Repeat this process, creating a new piece of content for each slide.

You can re-order the slides (or any content) by using the Move buttons to the right.

To preview this you need to preview the site as a whole (previewing from within an individual piece of content won’t work because they’re fragments of the page) so use the Preview Site link to the right of your homepage.

The next time the site homepage publishes, your slideshow will publish with it (for the same reason as previewing them as fragments, they won’t publish individually). Use ‘Publish branch’ from the top level section to force the whole site to publish – this may take five or ten minutes for a big site or one with lots of images.

See Also:

Ticker Tapes

Research and Conference websites using the T4 CMS

Community support for Newcastle University users of T4

Three or four column grid layouts

Two Columns and a Banner

Expandable and Tabbed Content

Ticker Tapes

Footer Logos and Layout

Embedding Video, Maps, Twitter and other media in your site

The easiest way is to embed the URL into the content area as follows:

Pasting Embed Code into the Content Area

Google Maps

Twitter

Making changes:

News and Events, Sorting and Archiving Content

News and Events

Automatic Ordering

Automatic Archiving and Delayed Publishing

See also:

People Profiles and Staff Lists

Staff from MyImpact

Staff Profile

The Media Library

Resizing and Cropping

Inserting the Media into Content

Banner Slideshows