Instructions NPA project mini websites Version 1.0 This document provides guidance for using the project mini websites on the NPA programme website. The Content Management System (CMS) for the mini website is based on the open-source software TYPO3. Table of Contents 1. Mini Website... 2 1.1 Purpose... 2 1.2 Page structure... 2 2. Access to CMS... 4 2.1 Access... 4 2.2 Backend... 4 2.3 Getting started in TYPO3... 5 3. Main functions... 6 3.1 Editing pages... 6 3.1.1 Visibility of pages... 6 3.1.2 Editing page content: content elements... 6 3.1.3 Homepage... 10 3.2 View: (pre)viewing pages... 10 3.3 List: Creating and editing News and Events... 11 3.4 File list: Uploading documents and images... 14 4. Screenshots... 16
1. Mini Website 1.1 Purpose The NPA programme provides projects with their own mini website as part of the programme website. This saves effort on the project s side to make their own website as part of the mandatory publicity measures. In addition, it ensures that the project website complies with publicity requirements and the availability of information after project closure. Thirdly, it gives the programme access to similar information on all its projects, which is easy to share with third parties. Some projects choose to develop their own websites. The NPA programme expects such websites to mainly focus on the viable project outputs, or even to serve as the delivery platform for those outputs. On the other hand, the programme expects projects to use the mini websites for information about the project cooperation, still highlighting the outputs under development. Note: By publishing information and audiovisual materials on the project mini websites, you give the NPA the right to use the materials and duplicate them in different publications, websites, etc. 1.2 Page structure All project mini websites follow a similar page structure, see below. On the templated pages, you can find guidance for filling the mini website with content, together with some placeholders for pictures and files. Page Purpose Instructions Home Entry page of the mini website Short introduction to the project and main contact details The short introduction is the first text visible to anyone visiting your project website. Please use it to give a brief introduction to your project, a summary description. This text should be understandable for non-experts, and give some insight into the challenge addressed by the project, its objectives and target groups. It is recommended not to exceed more than 2 paragraphs. You can give a more comprehensive explanation on the page "About the project". About the Project Rationale of the project Please remember to add contact details in the right-hand column, and in the page footer. Use this section to describe the motivation behind the project; the problem it solves or the opportunity it tries to take advantage of. Include such topics as: How did the project come about? Does the project build on previous cooperation projects? What change does the project intend to make? What NPA specific challenge or opportunity does it address? How will the project achieve the intended result? Please refer to the benefits of transnational cooperation. What is unique/innovative about the project? 2
Who are the intended end users of the project outputs? If desired, you can make sub pages in the section About the Project. Outputs and Results Project specific this page is hidden by default Resources An overview of project outputs, including their intended impact and target groups Optional A collection of project deliverables, and promotional materials Please write the text in a style that non-experts can understand. It is a good idea to make this text timeless, so it does not need to be updated frequently. Provide a brief introduction to your project outputs (products and service) and their intended result. For each project output include such topics as: The purpose of the product/service: what change will it bring? The attributes of the product/service The target group for the product/service The status of the product/service development Indicate how the product/service will be provided If possible, add a link to further information or a dedicated output website. You can use this page for other project information, if desired. On this page, you can add your project resources, such as studies and toolkits. This is also the location for your promotional materials such as newsletters, brochures, presentations, pictures, and videos. Please provide a short introduction to this section. Contact Contact details for the partnership Describe how to get in touch with the project. For example, do you have a specific person handling press? Provide contact details for each partner. News Project news Provide a teaser: Enter a short summary (1-2 sentences) of the news article/event with the main information. In the main text, it is recommended to make sub headings for readerfriendliness. Events Project events Attach images, files and links where appropriate. 3
2. Access to CMS 2.1 Access The Content Management System for creating and managing contents on the NPA website is accessible on the following link: www.interreg-npa.eu/typo3 You will have received a username and password from the Joint Secretariat. Figure 1 - Login page NPA website CMS 2.2 Backend After logging in, you will enter the website backend, the behind-the-scenes area of the website. On the other hand, the frontend of the website is the public website that visitors can see on projectname.interregnpa.eu. In the backend, you can see a menu with the main functions on the left-hand side: Page, View, List and Filelist. Next to the menu, you will find the page tree, displaying the main and sub pages of the website. On the right, you can find the main editing window, which will display the page setup, depending on which main function you choose. 4
Figure 2 - Backend NPA website 2.3 Getting started in TYPO3 It is highly recommended to watch 4-minute video below (Ctrl + click) introducing the main functions. In addition, we recommend that you familiarise the NPA Styleguide for the website. After logging in, please choose the function in the left hand menu based on the type of action you wish to undertake. Function Purpose Page Editing existing pages View Viewing pages in the frontend layout Previewing unpublished pages in the frontend layout List Creating news and event items Editing existing news and event items File list Uploading files for linking/attaching documents to pages, news and events Uploading media files such as pictures and videos, for use on pages, news and events Each function is described in more detail in the chapter 4. 5
3. Main functions 3.1 Editing pages The purpose of the Page function is to create and edit the contents of the standard pages on the website. Note: Changing the page tree by adding or removing a page has major impacts on the look and functionality of your project mini website. 3.1.1 Visibility of pages It is possible to make pages visible or invisible on the front-end of the website. Making a page invisible can be useful in case you plan to make more extensive changes to a page. You can make it visible again after you are done. You can recognise an invisible page by the disabled icon. In order to make the page visible, right-click on the page name, and select Enable. Once enabled, the disabled icon will disappear, and the lightbulb icon in the right-click menu will be on. You can preview invisible pages in the View function, or by clicking on the eye icon. 3.1.2 Editing page content: content elements The layout for standard pages is a main section in the centre, and a narrow column on the right. Some pages have a different layout due to their function, for example the homepage, the news and events overviews. In the CMS, text, images and other page content are organised in content elements. In order to add or edit page content, you need to add or edit such content elements. In the backend, the content elements look like a white box, with a grey menu bar at the top. 3 Homepage with content elements There are a number of different actions you can take with content elements. 6
Table 1 - Content element actions Actions Instructions Create element To create a new content element, click on the plus icon in the page area of choice, and select the type of content element you want to add, normally Text & Images. Visibility of You can make a content element visible or invisible on the public website by clicking element on the enable symbol. A lightbulb that is switched on means that the element is visible, one that is off means that the element is invisible on the public website. Move element To move an element, simply drag and drop it to the page area of your choice. Copy element To copy an element, right-click on the content element icon and select Copy. Then click on the Paste icon in the page area of choice. Copying an element can be useful in case you wish to create many similar items Edit element To edit an existing content element, click on the edit icon.this will open a multi tab page to manage the contents and the settings of the element. Delete element If you have no future use for an element, you can delete it by clicking on the trash can icon. Combining elements It is also possible to combine different content elements in a specific format, such as multiple tabs (for example, the news/events on the homepage) or an accordion (for example, the contact details). In order to do so, you have to first create a content element that is a container for the other elements. Create a new element, go to tab grid elements, select the container of your choice and save. Then create the other content elements inside the container. 4 Menu for adding a new content element 7
In order to edit the contents and look of the content element, click on the edit icon. A new page will open with different tabs. Below, the settings for the standard Text & Images element are explained tab by tab. Remember to save your work before moving to another tab! Table 2 Content element settings Functions Tab General Type Header Type Rich Text Editor Explanation Here you can change the content element type. Note: the available settings will change depending on the type. Title of the element. Note: the title will appear as a header text. To avoid a header text, leave this box empty. Choose Überschrift 1 for page titles, choose Überschrift 2 for section headers. This is the text box where you can add/edit the page text. If your text is divided into sub headings, it is recommended to create a new text box for each sub section, each with their own heading. This makes it easier to update/move/hide a specific part of the page. Sub sections are also more user-friendly for web visitors. When copying text from other sources, it is recommended to use the paste as plain text function, to avoid a mishmash of formats. By clicking on the paste icon, you can toggle between normal paste and paste as plain text. Alternatively, it is possible to remove formatting with the broom icon. Please use the Save & Preview function to check what your text looks like on the frontend. Tab Images Add image In order to add an in-text hyperlink, select the words, and click on the hyperlink icon. Then select the type of hyperlink you wish to create: Page, File, Folder, External URL or Email. For files and external URLs, please always choose the target new window from the drop-down box. Note: to avoid too many in-text hyperlinks, please remember that it is also possible to add a file list in the right-hand column (see chapter 3.4). Use this option to select a new image file. Click to open a popup window that allows you to browse through images in the document library of the website. In case your image is not there, scroll down to the area below the document library to upload a new file. Select & Upload Files Click on the +sign after the file name in order to add it to the content element. Then click Save in the top menu. Once you have added an image file, tick the box Enlarge to click to allow users to see a bigger version of the image. Use this option to upload and insert a new image file. If you anticipate that the image will be reused, please upload it first to the relevant folder by scrolling down to the upload area below the document library. Tab Appearance (please only use the image alignment function on this page) Image Alignment Use the drop-down box Position and Alignment to change how images are aligned in relation to the page text. Tab Access (please only use the Publish dates function) Publish Date If you wish to schedule publishing a content element in the future, you can enter a publish date here. The element will automatically become visible on the scheduled date and time. 8
Expiration Date Tab Categories Categories If you wish to automatically unpublish a content element in the future, you can enter an expiration date here. The element will automatically become invisible on the scheduled date and time. Tick the category to which the content element (or page on which it is placed) belongs. This facilitates the search function. 5 - Document library popup window 9
3.1.3 Homepage The homepage has a different setup from other pages on the website. To edit the homepage, click on the globe icon next to the name of your project, ensuring that you are in the Page function. You can then edit the different text elements in the body and footer of the page. Note: do not delete any content elements, in particular the news and event feed. In order to update the project logo and header image on the home page, right-click on the globe icon next to the name of your project, and select edit. A new page will open with different tabs. On the tab General, under Files, you have the option to add a logo and header image. A popup window will open that allows you to browse through images in the document library of the website. In case your image is not there, scroll down to the area below the document library to upload a new file. Click on the +sign after the file name in order to add it to the page. Then click Save in the top menu. In order to update the Facebook and Twitter links in the page footer, edit the content element in the footer called Social Media Links. 3.2 View: (pre)viewing pages In order to view what a page looks like on the frontend, you can use the View function. Simply select the page in the page tree and make sure that the View function is selected in the left-hand menu. The View function can also be used to preview unpublished web pages. This can be helpful when making major updates to a page, or creating a new page. 10
3.3 List: Creating and editing News and Events The List function is used for creating page content of a different type than standard pages. Examples are news articles and events. In order to add a news article or event, make sure the List function is active and choose News or Events from the page tree, under the folder Meta. Note: make sure you access the news/events list under the main NPA website, and not under one of the project sub sites (they also have news/events). 6 - Accessing News in the List function In order to create a news article or event, click on the new record icon under News (next to the word Header). A new page will open with several tabs, where you can add content and manage the settings for your news article or event. Below follows a description of the most important fields. Remember to save your work before moving to another tab! Table 3 - News/events settings Functions Tab General Header Top news Type Hide Teaser Explanation This is the title of your news article or event. Please keep it short and unambiguous. Tick this box if you want this story to stay on the top of the news list, even if newer articles are added. Normally, this setting is used for the launch of a call, or for holiday schedules. Please only use the type News Tick this box, to make sure that your draft news article/event stays invisible until you are satisfied to publish it. Enter a short summary (1-2 sentences) of the news article with the main information. This text has the function of a lead paragraph in a newspaper article. It will be visible in the list of news articles, and in the news notification. 11
Author name Author email Date & time Is Event Event end (events only) Full day(events only) Organiser (events only) Location (events only) Text This field is normally left empty This field is normally left empty This is the date of the news article or the event start date (and time) Tick this box if you wish to switch from news article to event. Note: this will affect the available fields. Enter the end date (and time) for the event Tick if the event is a full day event (this also counts for an event running over multiple days) Enter the organiser name, usually Joint Secretariat As a minimum, enter the town and country of the event. In addition, you can add the venue name. Note: it is best to mention address details in the agenda or on the registration page. This is the main text of your news article or event. Note: this text follows below the teaser on the page of the article or event; there is no need to repeat the teaser text. For reader-friendliness, it is recommended to make sub headings in a longer text. When copying text from other sources, it is recommended to use the paste as plain text function, to avoid a mishmash of formats. By clicking on the paste icon, you can toggle between normal paste and paste as plain text. Alternatively, it is possible to remove formatting with the broom icon. Note: It is not possible to preview unpublished news articles/events. In order to check what they look like, you need to publish them. Disable In order to add an in-text hyperlink, select the words, and click on the hyperlink icon. Then select the type of hyperlink you wish to create; Page, File, Folder, External URL or Email. For files and external URLs, please always choose the target new window from the drop-down box. Note: to avoid too many in-text hyperlinks, please remember that it is also possible to add hyperlinks and files to the article/event on the tab Relations. Tick this box to disable the news article/event. This has the same effect as ticking Hide. Tab Access Publish Date Expiration Date Tab Options Categories Tab Relations Media file If you wish to schedule publishing a news article/event in the future, you can enter a publish date here. The news article/event will automatically become visible on the scheduled date and time. This can be useful for publishing calls. If you wish to automatically unpublish a news article/event in the future, you can enter an expiration date here. The news article/event will automatically become invisible on the scheduled date and time. This can be useful for unpublishing the holiday schedule. Tick the category to which the news article or event belongs. This allows visitors to filter the news article or event. If you wish to add a picture or video to the news story or event, either select it from the document library Add media file, or upload a new picture Select & Upload files. In the popup window, click on the +sign after the file name to add it. Then click Save in the top menu. You can then choose whether the picture should be shown in the preview, the list of news 12
Related files articles. It is also possible to add a hyperlink to the picture, which opens when clicking on the picture. Please remember to always choose the target new window. Alternatively type the following behind the URL address: _blank If you wish to add files to the news story or event, select it from the document library Add media file. This function can be useful if your news article is referring to a report or publication. In case of events, this is the location where you can upload the agenda, and PowerPoint presentations after the event. Note: Please browse through the library before deciding to add a new file, to avoid duplication in the document library. In case your file is not there, scroll down to the area below the document library to upload a new file to the relevant folder. Related links In the popup window, click on the +sign after the file name to add it. Then click Save in the top menu. If you wish to link to an internal or external web page, you can add a hyperlink here. A nameless hyperlink is created, which you need to edit. Please give the link an easy to understand title, such as Fifth Call page or Registration Link. Click Save in the top menu. Please remember to always choose the target new window, in case of an external URL. Alternatively type the following behind the URL address: _blank Related news This function can be useful for call announcements, where it is good practice to add a link to the call page (internal link). For events, add the registration link here. If you wish to make visitors aware of other news articles or events related to the topic, click on the folder item to select related articles. Note: In the popup window, you may need to navigate to the news/events folder using the following path: Sites/Northern Periphery and Arctic Programme 2014-2020/Meta/News or Events Click on the +sign before a news article to add it. Then click Save in the top menu. Tab Metadata is normally not used Publishing You can publish your news article or event by unticking the Hide box. Alternatively, in the list of news or event items, you can activate the lightbulb. 13
3.4 File list: Uploading documents and images Files and images can be managed in the website s document library under the function File list. Note: Please browse through the library before deciding to add a new file, to avoid duplication in the document library. 7 - Access Document Library under File list There are different file actions, described below. Actions Instructions Create folder If you wish to add a new file, select the relevant folder for your file. If there is no relevant folder, consider if a new folder is necessary. You can add a new folder by clicking on the new record icon. Please give the folder a short and unambiguous name. Add file Once inside the folder, you can add a new file by clicking on the upload icon, or by dragging and dropping a file from your Windows explorer to the area at the top of the file list. Edit file Overwrite existing file You will be asked if you wish to overwrite any files with the same name. Click Yes. Once you have added a new file, you need to refresh the list by clicking on the refresh icon or Ctrl + F5. Note: the tick box Extended View needs to be ticked in order to see the edit options. Once you have added a new file, you need to edit the file title. Click on the pencil icon, which will open a new page. Here you can edit the title of the file as it is displayed on the frontend. It is recommended to give your file a short, unambiguous title without the file extension, e.g. Programme Manual v5. In the Description, you can for example add more details about the purpose of the file. If you wish to replace an existing file on the website without breaking any links to that file, for example the Programme Manual, make sure the file name of the updated file 14
Move file Delete file Adding file list is exactly the same as the name of the file in the Document Library. If needed, first rename the filename in the Document Library. After you have overwritten the file, please check that the file title and description are still valid, or need to the updated as well. You can move a file to another folder by copying and pasting it, by right-clicking on the file icon. Any links to the file will be automatically updated. If you have no future use for a file, you can delete it by clicking on the trash can icon. File lists are a way of displaying a group of files, usually in the right-hand column of a page, for example the application pack. There are two ways of adding a file list to a web page. In both cases, you need to create a content element, in the Page function. You can find the content element of the type File Links on the Special elements tab. Then enter the edit mode for your newly created file list content element. Option 1: single files On the tab General, under Files, select the single files by clicking on Add file. Then Save. If needed, upload the relevant files through the upload section of the document library popup window. Option 2: file collection On the tab General, under Files, go to select file collections. Click on Create new, and select the options of your choice. You can choose between a static selection of files, a folder from storage that is automatically updated when a new file is added to that folder, or a category of files. Then select the relevant folder from the document library, and Save. If needed, upload the relevant files through the upload section of the document library popup window. 15
4. Screenshots 8 - Homepage project mini website 16
9 - Standard page with accordion element 10 - List of news items 17
11 - List of events 12 Individual event with picture, related news and link 18