21. Creating or Editing an Image-based Department Homepage

Transcription

1 21. Creating or Editing an Image-based Department Homepage Note: Please refer to Information Sheet 9 to familiarise yourself with the basic layout of Department Homepages before attempting to create an image-based homepage. Most departments use the image-based homepage layout, but if your department is still using the old text-based homepage layout it can be converted to the image-based layout. Image-based department homepage: Page 1

2 If you need to convert your department homepage, you will need to follow these steps: CMS Information Sheet 21 (20/02/2018) Preparation Creating the Image Blocks Checking your work Finishing Off If you already have an image-based department homepage, you can edit the blocks/tiles as follows: Double-width block Column 1 Column 2 Column 3 Page 2

3 Converting your Department Homepage Preparation Before beginning to create the image blocks in the CMS for your homepage, you will need to plan how you want your page to be laid out, and prepare your images. Layout You can have a number of image blocks in the 1 st and 2 nd column of your site, and optionally, you can also have a double-width image block above them. You will need to decide if you want to have a double-width image block, and also consider how many blocks you want per column. It is also possible to have an 'image slider' instead of a doublewidth image block please contact the Web Team if you would like to add an image slider to your homepage. We recommend that if you are using the double-width image block (or image slider) at the top, you should have no more than 3 blocks in each column underneath. Without the double-width image block, we recommend a maximum of 4 blocks per column. Remember that you will need to keep the number of blocks the same in each column to avoid your page becoming 'lop-sided'. Images Once you have decided how to lay out your page, you will need to prepare the necessary images. Image sizes: Images for double-width image blocks (or image sliders) must be: o o New style x 585px Old style x 230px Images for normal image blocks must be: o o New style x 388px Old style x 120px As well as making sure that your image is the right size, there are several other important points to bear in mind when choosing your image: Make sure that the image is relevant for the page it is going to link to. It's hard to find a perfect image, but try and find something which gives the right message. Make sure your original image is good quality before you start resizing and cropping it otherwise you could end up with a fuzzy bad quality image. Make sure that the image is not too big in terms of file size: o o Double-width image blocks must be less than 120kb Normal image blocks must be less that 50kb Make sure that the focus of the image is towards the left for new style normal image blocks. We recommend that you use image manipulation software such as Adobe Photoshop or Gimp to get your images correctly sized. FAQ 2605 should help you with cropping and resizing your image, as well as making sure the filesize is within the necessary limits. Page 3

4 Creating the Image Blocks Note: You can create your new image blocks within the existing sections that make up your department homepage, but be careful not to approve them until you have finished setting everything up. Double-Width Image Block The double-width image block will need to be placed in the section called "top story". If your department doesn't currently have this section, contact the Web Team and we will set this up for you. 1. In the CMS Site Structure, click on the "top story" section to open it 3. Click the Create content button and choose the content template named "Background image block (no text) (topstory)" Note: If you don't see this content template in the list, you'll need to contact the Web Team to ask them to enable the necessary templates for homepage image blocks. 4. The Background image block (no text) (topstory) editor will open: 5. Insert a name for your new content in the Name box. 6. Choose the image you created earlier from your PC. 7. In the Heading box, type the text you would like to appear with the image. 8. In the Link box, type (or paste) in the web address of the page in your department that you are linking to. 9. Click on Save changes to finish. Page 4

5 Image Blocks in Column 1 and 2 Other image blocks will need to be placed in the relevant column section called either "column 1" or "column 2". Repeat the following steps as required to add all the image blocks. 1. In the CMS Site Structure, click on either the "column 1" or "column 2" section to open it 3. Click the Add Content button and choose the content template named "Background image block (no text)" Note: If you don't see this content template in the list, you'll need to contact the Web Team to ask them to enable the necessary templates for homepage image blocks. 4. The Background image block (no text) editor will open: 5. Insert a name for your new content in the Name box. 6. Choose the image you created earlier from your PC. 7. In the Heading box, type the text you would like appear with the image. 8. In the Link box, type (or paste) in the web address of the page in your department that you are linking to. 9. Click on Save changes to finish. Page 5

6 Image Blocks in Column 3 Image blocks can also be placed in the section called "column 3". In both the new and old style, these image blocks use the old style size (350 x 120px). In old style pages, column 3 is positioned on the right of the homepage. In new style pages, column 3 is positioned at the bottom of the homepage. 1. In the CMS Site Structure, click on the "column 2" section to open it 3. Click the Add Content button and choose the content template named "Background image block (no text)" Note: If you don't see this content template in the list, you'll need to contact the Web Team to ask them to enable the necessary templates for homepage image blocks. 4. The Background image block (no text) editor will open: 5. Insert a name for your new content in the Name box. 6. Choose the image you created earlier from your PC. 7. In the Heading box, type the text you would like appear with the image. 8. In the Link box, type (or paste) in the web address of the page in your department that you are linking to. 9. Click on Save changes to finish. Page 6

7 Checking your Work Before proceeding, preview your department homepage, by using the 'preview section' option on your department's main section. You should see the current site layout, with the image blocks appearing as well. Remember that until you approve the new image blocks they will not be published, but you can still view them in the preview. Make sure that the image blocks look as expected, and that they link to the correct locations. Finishing Off When you are happy that your image blocks look and behave correctly, you will need to approve them. See Information Sheet 6 for more information on approving content. Once you have approved all of the image blocks, return to the 'top story', 'column 1' and 'column 2' sections and delete all the other content that was previously being used on your department homepage. See Information Sheet 5 for more information on deleting content. Preview your department homepage again, to make sure you have removed all the old content. Your changes will be automatically published to the staging server at the next scheduled publish (10 past the hour). They will then be transferred to the live site at the next scheduled transfer (these take place through the day at approximately 9:30, 11:30, 14:30 and 16:30). Page 7

8 Editing your Department Homepage Top Story (double-width block) Note: If your department homepage has an 'image slider' instead of a double-width image block, you will not be able to edit it yourself. Please contact the Web Team if you need to make changes to an image slider. 1. In the CMS Site Structure, click on the "top story" section to open it 3. Find the content using the "Background image block (no text) (top story)" content template - the template used is shown beneath the name of the content: 4. Click on the name of the content to open it for editing: 5. Make your required changes: a. To change the image, click on the "Remove" button to remove the exisiting image, then click in the empty box to select your new image. b. To change the heading text, replace the existing text with your new text. c. To change the link, replace the existing link with your new link. 6. Click on Save changes to finish. Page 8

9 Column 1 1. In the CMS Site Structure, click on the "column 1" section to open it CMS Information Sheet 21 (20/02/2018) 3. Find the appropriate image block content using the "Background image block (no text)" content template - the template used is shown beneath the name of the content: 4. Click on the name of the content to open it for editing: 5. Make your required changes: a. To change the image, click on the "Remove" button to remove the exisiting image, then click in the empty box to select your new image. b. To change the heading text, replace the existing text with your new text. c. To change the link, replace the existing link with your new link. 6. Click on Save changes to finish. Page 9

10 Column 2 1. In the CMS Site Structure, click on the "column 2" section to open it CMS Information Sheet 21 (20/02/2018) 3. Find the appropriate image block content using the "Background image block (no text)" content template - the template used is shown beneath the name of the content: 4. Click on the name of the content to open it for editing: 5. Make your required changes: a. To change the image, click on the "Remove" button to remove the exisiting image, then click in the empty box to select your new image. b. To change the heading text, replace the existing text with your new text. c. To change the link, replace the existing link with your new link. 6. Click on Save changes to finish. Page 10

11 Column 3 1. In the CMS Site Structure, click on the "column 3" section to open it CMS Information Sheet 21 (20/02/2018) 3. Find the appropriate image block content using the "Background image block (no text)" content template - the template used is shown beneath the name of the content. Note that in column 3 you are likely to see several different types of content such as Chat Links and Social Media Links as well as Backgroung image block (no text), so be sure to click on the right one. 4. Click on the name of the content to open it for editing: 5. Make your required changes: a. To change the image, click on the "Remove" button to remove the exisiting image, then click in the empty box to select your new image. b. To change the heading text, replace the existing text with your new text. c. To change the link, replace the existing link with your new link. 6. Click on Save changes to finish. Page 11

12 Checking your Work Before proceeding, preview your department homepage, by using the 'preview section' option on your department's main section. Make sure that the edits to the image blocks look as expected, and that they link to the correct locations. Finishing Off When you are happy that your image blocks look and behave correctly, you will need to approve them. See Information Sheet 6 for more information on approving content. Your changes will be automatically published to the staging server at the next scheduled publish (10 past the hour). They will then be transferred to the live site at the next scheduled transfer (these take place through the day at approximately 9:30, 11:30, 14:30 and 16:30). Page 12