Faculty of Arts & Humanities and Social & Historical Sciences

Guide to Indigo Layouts

Stephen Thomson and Jo Harris 10-17-2016

Contents

Before you start .................................................................................................................................. 2

Access to Indigo Silva ...................................................................................................................... 2

UCL Indigo guides ............................................................................................................................ 2

Browser ........................................................................................................................................... 2

Resizing images ............................................................................................................................... 2

Publishing images............................................................................................................................ 2

Where to find images? .................................................................................................................... 3

Recommended image sizes ............................................................................................................. 3

Web publishing best practice .......................................................................................................... 3

Three columns with images ................................................................................................................ 4

Sidebar box with image....................................................................................................................... 6

Sidebar social box ............................................................................................................................... 7

Full width page with carousel images. ................................................................................................ 8

Two column box with coloured background ...................................................................................... 9

Staff page intro box and nested boxes ............................................................................................. 10

Creating the nested column .......................................................................................................... 10

Creating the remaining column .................................................................................................... 11

Merging the columns .................................................................................................................... 11

Creating the Intro box ................................................................................................................... 11

Linking the navigation ................................................................................................................... 11

Auto sidebar navigation (table of contents) ..................................................................................... 13

Before you start

Access to Indigo Silva

You will need to have Chief Editor, Editor or Author access in Silva. If you don’t have this,

please email web-support@ucl.ac.uk

You will need to have attended Silva training. You can book on here:

http://www.ucl.ac.uk/isd/services/websites-apps/silva

Log on to the relevant website by adding /edit at the end of the web address (e.g.

www.ucl.ac.uk/english/edit) or by clicking on the small cross at the bottom of the page.

UCL Indigo guides

https://www.ucl.ac.uk/isd/how-to/indigo-silva-support/seed-page.

http://www.ucl.ac.uk/indigo-demo/code-sources.

Browser

Firefox browser (IE and Chrome have some issues with Silva Editor).

Resizing images

Adobe Photoshop is the best all round application. Contact ISD Software Sales for more

information on purchasing this application or contact your Computer Representative.

https://pixlr.com/editor/.

http://www.picresize.com/.

Publishing images

You must give each image a simple and meaningful title – this is called ‘Alt text’ - not giving

images alt text will influence your ranking in Search Engine.

'Alt text' is required for reasons of accessibility as users with a visual impairment may listen

to a Web page and will thus need an explanation of each image.

You must credit the author, even if it belongs to UCL.

Never use images that you do not have the consent or rights to do so.

Figure 1: Section of an Indigo Banner showing image title and credit.

Where to find images?

You will need appropriate permissions for each and every image you put on a web page – that includes images taken from Google Image Search:

UCL's Imagestore - UCL images. Medical images. Images that were made by students at UCL for a competition - permission required. iStockphoto.com (£) - Can pay with credit card or apply for corporate terms id you need

invoice and 30 days to pay. Fotolia (£). The Welcome Trust (£). Lensational (£). Unsplash – free. Wikipedia Commons has both free and paid for images. Flickr - Most images under Creative Commons licence can be used free as long as you give

the photographer credit. Various free stock photo sites.

Recommended image sizes

For all column and sidebar images - 890px × 400px

Staff images - 600px × 800px

For all carousel and top-banner-images - 1470px × 420px

Web publishing best practice

Useful information and advice from Digital Presence on site structuring, writing, search engine

optimisation (SEO) and accessibility.

https://www.ucl.ac.uk/isd/services/websites-apps/best-practice

Back to Contents

Three columns with images

Figure 2: Three columns with images.

1. Within the Silva editor, create a top-level folder with the ID ‘columns’ and the title

‘Columns’. If you have already created this then skip this step.

2. Within the ‘columns’ folder create another folder with a relevant ID and ‘title’, for example,

‘programmes and ‘Programmes’.

3. Inside your new sub-folder, create a new Silva Document with a relevant ID and Title

4. Change the heading style of the Title

from’ title’ to ‘heading’ and just before

the start of the heading, hit enter. This

moves it down one line.

5. Click in the new space above the

heading and you’ll see the style is still

heading. Change it to ‘plain’ paragraph

style.

6. Inside this space, insert the image you

want. To maintain consistency

throughout the site you should keep to

the same image size – we recommend

890px × 400px.

7. Click save.

8. Select the image again and in the properties change the Image size to ‘large’ and link it to

the appropriate page. Please use relative paths (/african-studies/prospective-students/) and

not absolute paths (http://www.african-studies/prospective-students/).

9. Select the heading and link that to the same page.

10. You may add some brief intro text underneath the heading.

11. Click save and publish.

12. Repeat steps 3 to 11 for the other two columns.

13. Navigate to the page where you want to insert the columns and from the ‘external source’,

select ‘Indigo: Add Silva documents into three columns’.

14. For each field, navigate to each column that you created in the earlier steps.

Figure 3: Editor view of a single column.

15. Click the green ‘add external source’ button.

16. Click ‘save’ then ‘publish’.

Tips

Keep all your column pages in a top-level folder with appropriately named sub folders. This’ll

make them easier to locate and manage, particularly for other Editors.

You can multiple use the same columns individually throughout your site, including the

sidebar.

We suggest that you keep the heading below the picture as some headings are longer than

others and may wrap to the next line, thus, forcing the images out of alignment.

Back to Contents

Sidebar box with image

1. Within the Silva editor, create a top-level folder with the ID ‘columns’ and the title

‘Columns’. If you have already created this then skip this step.

2. Within the ‘columns’ folder create

another folder with a relevant ID and

‘title’, for example, ‘info and ‘Info’.

3. Inside your new sub-folder, create a

new Silva Document with a relevant ID

and Title.

4. Change the heading style of the Title

from’ title’ to ‘heading’ and just before

the start of the heading, hit enter. This

moves it down one line.

5. Click in the new space above the

heading and you’ll see the style is still

heading. Change it to ‘plain’ paragraph

style.

6. Inside this space, insert the image you want. To maintain consistency throughout the site

you should keep to the same image size – we recommend 890px × 400px.

7. Click save.

8. Select the image again and in the properties change the Image size to ‘large’ and link it to

the appropriate page. Please use relative paths (/african-studies/prospective-students/) and

not absolute paths (http://www.african-studies/prospective-students/).

9. Select the heading and link that to the same page.

10. You may add some brief intro text underneath the heading.

11. Click save and publish.

12. Navigate to the ‘index_right’ page where you want to insert the columns and from the

‘external source’, select ‘Indigo: Add a box around a text’.

13. For the reference field, navigate to the column that you created in the earlier steps.

14. Click the green ‘add external source’ button.

15. Click ‘save’ then ‘publish’.

Tips

Keep all your column pages in a top-level folder with appropriately named sub folders. This’ll

make them easier to locate and manage, particularly for other Editors.

You can use this sidebar box to highlight/promote other pages within your site or UCL.

You can reuse the same box throughout your site.

Back to Contents

Sidebar social box

1. Within the Silva editor, create a top-level folder with the ID ‘columns’ and the title

‘Columns’. If you have already created this then skip this step.

2. Within the ‘columns’ folder create

another folder with a relevant ID

and ‘title’, for example, ‘info and

‘Info’.

3. Inside your new sub-folder, create a

new Silva Document with a relevant

ID and Title

4. Change the heading style of the Title

from’ title’ to ‘heading’ and type ‘Connect with us’

5. Click underneath the heading and from the ‘external source’, select ‘Indigo: Add social media

buttons’. In each field, type the absolute path you each of your social accounts. For example,

https://twitter.com/uclspp for Twitter. You don’t have to complete every social field – just

the ones you use.

6. For ‘Orientation’, select ‘Horizontal’ or ‘Vertical’ - we recommend horizontal.

7. Click the green ‘add external source’ button.

8. Save the page then click publish.

9. Navigate to the ‘index_right’ page where you want to insert the columns and from the

‘external source’, select ‘Indigo: Add a box around a text’.

10. For the reference field, navigate to the column that you created in the earlier steps.

11. Click the green ‘add external source’ button.

12. Click ‘save’ then ‘publish’.

Tips

Keep all your column pages in a top-level folder with appropriately named sub folders. This’ll

make them easier to locate and manage, particularly for other Editors.

You can reuse this social box throughout your site.

Back to Contents

Full width page with carousel images.

1. This only works well with pages set for ‘Horizontal menu’

2. Navigate to the ‘properties’ tab of the folder or page you want to make full-width.

3. Down the page, make sure the ‘columns’ is set to 1 columns.

4. Click ‘save’ then ‘publish’

5. Looking at the page via the preview

tab, you’ll notice that there is still a

gap on the right of the page. This is

an issue with Indigo and can only be

corrected by WAMS.

6. Email web-support@ucl.ac.uk and,

giving the absolute URL of the page,

ask them to make it full width.

7. If you use a description overlay on

your images, you can also ask them

to float the description on the

lower-right of the carousel image.

Tips

These are good for creating high-impact pages.

Always use large high-quality images – a minimum of 1470px wide.

Note

Full width might not be available in the forthcoming Drupal templates.

Back to Contents

Figure 4: Make the page full-width via the folder/page properties tab.

Two column box with coloured background

This is useful if you wish to highlight text or a section of your page.

1. Create two new Silva Documents with a relevant IDs a title in the appropriate folder location

- this will be the content in the coloured box.

2. Delete the titles in both your pages.

3. Save and publish your new pages.

4. Create another page with an appropriate ID and Title.

5. From the ‘external source’, select ‘Indigo: Add Silva documents into split middle column’.

6. For the reference fields, navigate to the pages that you created in the earlier steps. This will

be the combined page.

7. Click the green ‘add external source’ button.

8. Click ‘save’ then ‘publish’.

9. In the page where you want to insert the box, add an ‘external source’ and select ‘Indigo:

Add a box around a text’.

10. For the reference field, navigate to the combined page that you created in step 6.

11. Click the green ‘add external source’ button.

12. Click ‘save’ then ‘publish’.

Tips

You do not have to have a title for the combined box, as in the example above, but it is

advisable if the content topic is different from the preceding text.

If the topic of the columns are different then do not delete the titles in step 2 and delete the

title in the combined page.

You can create a single column box by just creating one new page and then in the page

where you want to place the box, just select ‘Indigo: Add a box around a text’ from the

‘external source’.

You can add images as explained in ‘Sidebar box with image’.

Back to Contents

Staff page intro box and nested boxes

Nested boxes, in this case, are 'Indigo: Add Silva documents into split middle column’ within another

'Indigo: Add Silva documents into split middle column’. Although this is three columns, they are kept

together in a single box with a top border and the column widths can be varied, to a degree. The

above example, it is approximately 20:47:33.

Creating the nested column

1. Create a new hidden folder in the relevant area of your site and give it the ID of ‘boxes’ and

a title of’ Boxes’.

2. Create a new Silva Document with an ID of ‘photo’ and a title then click ‘save + edit’.

3. Delete the title in this new page.

4. Add an image to page using ‘get image reference’ and the image size should be set to

‘medium’ or ‘large’.

5. Click ‘save’ and ‘publish’.

6. In the same folder, create another new Silva

Document and give it the ID of ‘contact’ and

any title.

7. Delete the title in this new page.

8. Add a ‘sub’ (in this case it’s Professor David

Coen) and ‘subsub’ title (Head of….)

9. Create a bulleted list with contact info.

10. Click ‘save’ and ‘publish’.

11. Create a new Silva Document with the ID of ‘photo-contact-combined’ and any title then

click ‘save + edit’.

12. Delete the title in this new page and you’ll then have an empty page.

13. From the ‘external source’, select ‘Indigo: Add Silva documents into split middle column’.

14. For the reference fields, navigate to the pages that you created in the earlier steps.

15. You can vary the ‘layout’ as you see fit – 50:50, 33:66 or 66:33.

16. Click the green ‘add external source’ button.

17. Click ‘save’ then ‘publish’.

Creating the remaining column

1. Create a new Silva Document with an ID of ‘navigation’ and a title of ‘Find out more’ then

click ‘save + edit’.

2. Change the ‘Find out more’ title to a sub heading.

3. Create a bulleted list using the same section titles as in your main page. You’ll come back to

this later to add the anchor links.

4. Click ‘save’ and ‘publish’.

Merging the columns

1. Create a new Silva Document with an ID of ‘photo-contact-navigation-combined’ and any

title then click ‘save + edit’.

2. Delete the title in this new page.

3. From the ‘external source’, select ‘Indigo: Add Silva documents into split middle column’.

4. For the reference fields, navigate to the pages that you created in the nested and remaining

steps.

5. You can vary the ‘layout’ as you see fit – 50:50, 33:66 or 66:33.

6. Click the green ‘add external source’ button.

7. Click ‘save’ then ‘publish’.

Creating the Intro box

1. We’re almost there! In the page where you want to insert the box, add an ‘external source’

and select ‘Indigo: Add a box around a text’.

2. For the reference field, navigate to the ‘photo-contact-navigation-combined’ page that you

created in the previous section.

3. Click the green ‘add external source’ button.

4. Click ‘save’ then ‘publish’.

Linking the navigation

1. In the main page that the intro box is placed, add an anchor above each heading and give it a

relevant ID – all in lowercase and no spaces.

2. Going back to the navigation page, highlight the first item in the bulleted list and in the link

section add the anchor name preceded by a hashtag then click ‘update’. For example:

a. Section name: Introduction.

b. Anchor name: introduction.

c. Link reference: #introduction.

3. Repeat these steps for each item on your navigation list.

4. Click ‘save’ then ‘publish’.

Tips

Once you understand how this is structured, you can make other variations, for example,

two nested columns within a split column. Thus, giving you four columns! However, the

columns could be a too narrow for certain content.

The nested column doesn’t have to be on the left.

If you create an Intro box for every staff member, then just copy the whole ‘boxes’ folder for

the first one you create then paste it into each staff member folder. You then just need to

update the image and text for each one.

It doesn’t have to be for a staff intro - you can use it in any page where you need to create

semi-custom column widths. In this case, you won’t need the ‘navigation’ content so just

insert whatever content you wish.

If your page is long, then it would improve usability if you add a ‘Back to top’ link at

appropriate locations on your page.

o Link text: Back to top.

o Reference: #top.

Back to Contents

Auto sidebar navigation (table of contents)

1. Within the top-level folder where you wish to create the navigation, create a new Silva

Document with an ID of ‘in-this-section’ and a Title of In this section.

2. Change the title to a heading.

3. From the right-hand tools, insert a

‘table of contents’ at ‘1 level’

4. Click ‘save’ then ‘publish’.

5. Still within the same top-level

folder, create a ‘Silva Link’ with an

ID of homepage and a title relevant

to the folder name, for example,

‘Our programmes home’.

6. The link should be ‘relative’. A

relative URL typically consists only

of the path, and optionally, the

resource, but no scheme or server.

Thus the relative URL to the

‘Prospective Students’ folder of this

example would be without http://www.indigo-sandbox.ucl.ac.uk/ or http://www.ucl.ac.uk/.

a. Absolute URL - http://www.indigo-sandbox.ucl.ac.uk/african-studies/prospective-

students

b. Relative URL – /african-studies/prospective-students/

7. Click ‘save + edit’.

8. Click ‘publish now’.

9. When viewing the folder contents, use the arrows on the far-right to shift the ‘homepage’

file to almost the top.

10. Navigate to the ‘index_right’ file and from the ‘external source’, select ‘Indigo: Add a box

around a text’ at the top of the page.

11. For the reference field, navigate to the’ in-this-section’ page that you created in the earlier

steps.

12. Click the green ‘add external source’ button.

13. Click ‘save’ then ‘publish’.

14. Go to the folder preview tab (not the index or index_right preview) and if there are

pages/folders that are missing from the list or ones that shouldn’t be displaying then you

need to change the properties. From the properties tab in each folder/page you must select

the appropriate ‘do not hide’ or ‘hide’ radio button then click ‘save’.

Tips

Within the ‘in-this-section’ page and underneath the TOC code, you may add manual text

such as “More information” that relates to other sections of your site. You could even

embed another related ‘in-this-section’ from another folder.

From the image showing the list of folders, notice how most folders are hidden – this is to

keep the sidebar navigation clean and focus on the primary folders.

Always use relative URLs in every internal link throughout your site. Sites that are not yours

then use the absolute URL.

Back to Contents