Editor Guide

Welcome to the Forest website editor guide. This guide will help you understand how to create, edit, and manage content on the Forest website.

1. How to Login

Accessing the Admin Area

To edit content on the Forest website, you need to log in using your EU Login credentials.

1. Find the Login Link: Scroll to the bottom of any page on the staging website. Just above the footer, you'll see a login link that says "Login to private pages of Forest through EU Login Authentication". The login link is only visible on the staging/test servers, not on the production website. If you don't see the login link, make sure you're on the correct server (staging).
2. EU Login Authentication: Click on the "Login" link. You will be redirected to the EU Login (ECAS) authentication page.
3. Enter Credentials: Log in using your EU Login username and password. If you don't have an EU Login account, you'll need to create one first.
4. Access Granted: After successful authentication, you'll be redirected back to the Forest website. You should now see:
   • A welcome message with your name at the bottom of the page
   • A link to "access admin area" (if you have staff permissions)
   • The CMS toolbar at the top of the page (if enabled)

If this is your first time logging in, you may need to contact the Forest team to obtain the necessary permissions to edit pages.

Logging Out

To log out:

• Click the "here to logout" link at the bottom of the page
• You will be logged out of the Forest website

2. Editing and Publishing an existing Page

Accessing the Edit Mode

To edit a page, you must first be logged in as an editor or administrator.

1. Navigate to the page you want to edit.
2. Enter Edit Mode: Click the Edit or New Draft button in the toolbar. The page will switch to edit mode.
3. Open the Text Editor: You have two options to edit text content:
   • Single-click (default): By default, single-click on any text content block to open the inline editor directly on the page.
   • Double-click (modal window): Click the pencil icon button in the toolbar to toggle the editing mode . Once toggled, double-click on a text block to open the editor in a modal window. This mode is necessary when you need to access the HTML source code of the content.

Using the Text Editor

The text editor (CKEditor) provides formatting tools similar to a word processor:

• Links, Files or Images: Use the CMS Plugins dropdown to insert links, files to download or images. Learn more here.
• Headings: Use the Format dropdown to apply heading styles (Heading 2, Heading 3, etc.)
• Bold, Italic, Underline: Select text and click the appropriate button
• Lists: Create bulleted or numbered lists using the list buttons
• Tables: Insert and format tables for structured data

 

 

Always use heading styles (H2, H3) instead of just making text bold and larger. This improves accessibility and SEO.

You may also change the HTML source directly by clicking on the Source button. For this you need to open the modal window by clicking on and then double click on the text area.

Note about formatting: The visual appearance of the website (colors, fonts, spacing, etc.) is controlled by a central style file that ensures all pages look consistent. When editing content, simply use the formatting tools provided in the editor toolbar (headings, bold, lists, etc.) and avoid adding manual styling in the HTML source code (such as colors, font sizes, or spacing). The website will automatically apply the correct visual styling to your content. If you need a specific visual effect that isn't available through the standard formatting tools, please contact the web team.

Saving and Publishing

1. Save Draft: After making changes, click outside the editor to close it (or click the "Save" button if you were editing in the standalone window). Your changes are automatically saved as a draft. (At this time, if you want to cancel your changes and revert to the previous version, just click on Version → Discard changes on the Django CMS toolbar.)
2. Preview: Click the Preview button in the toolbar to see how the page will look to visitors.
3. Publish: When satisfied with your changes, click on the page status dropdown in the toolbar and select Publish. This makes your changes visible to the public on the staging server (d1-stg-forest.jrc.it).
4. The last step is to publish your changes on the production site (URL: forest.jrc.ec.europa.eu). This is done through the Ansible dashboard (d-awx-users.jrc.it):
   • Launch template "WEB: FOREST - POSTGRES Container Clone ( DOCKER )"
   • Select:
     • d1-stg-forest as Source
     • srv-forest-ext.jrc.it as Destination
     • forestdb as database.
   • Click Next
5. If images or files were added on the page (see next section) then you will also need to launch the template "WEB: FOREST- MEDIA folder sync ( DOCKER )"

3. Adding Images, Files and Links

Adding an Image to a Page

1. Enter Edit Mode: Click the Edit or New draft button in the toolbar to enable editing, then single-click for inline editing or double-click on the text area to open the CKEditor window.
2. Access the CMS Plugins Menu: In the CKEditor toolbar, look for the "CMS Plugins" dropdown menu.    
3. Select Picture: Click on "Image" from the dropdown menu.
4. Choose or Upload Image: In the picture dialog:
   • Click the "Choose File" button to browse existing images.
   • Select an image or click "Upload" to select a file from your computer.
5. Configure Image Settings: 
   • In the section Advanced settings, you will find the Caption text (Optional) displayed below the image (for description, attribution, or copyright)
   • You will also have the possibility to change the Height or Width of the picture on your page.
   • Alternate text: this is required for accessibility. Edit the Image CMS plugins, go to "Advanced settings". Click on button "+" under attributres. Write "alt" in the left field and a short description of your image in the right field.
6. Save

Always add alternative texts (Alt text) to images. It is a short description of what the image shows and is essential for accessibility, screen readers read this text aloud to visually impaired users.

 

Adding a File/Document for Download

 

1. Enter Edit Mode: Enable editing on the page and double-click on the text area to open the CKEditor.
2. Add File Plugin: In the CKEditor toolbar, open the "CMS Plugins" dropdown menu and select "File".
3. Select or Upload File: Browse existing files or upload a new one (PDF, Word, Excel, etc.).
4. Configure Options: Set display options as needed.
5. Save: Click Save to insert the file link into your text content.

Adding a Link

You can add links to other pages on the website (internal links) or to external websites using the Link plugin.

1. Enter Edit Mode: Enable editing on the page and click on the text area to open the CKEditor.
2. Add Link Plugin: In the CKEditor toolbar, open the "CMS Plugins" dropdown menu and select "Link".
3. Choose Link Type: In the link dialog, you have several options:
   • External link: Enter a full URL (e.g., https://example.com) to link to an external website
   • Internal link: Select an existing page from your website using the dropdown menu - this is the preferred method for linking to other pages on the Forest website as the link will remain valid even if the page URL changes
   • Anchor: Link to a specific section within the current page
   • Phone / Email: Create links that open the phone app or email client
   • File: Link to a file stored in Django Filer
4. Configure Link Settings:
   • Link text: The text that will be displayed and clickable
   • Open in new window: Check this option if you want the link to open in a new browser tab (recommended for external links)
5. Save: Click Save to insert the link into your text content.

For links to other pages on the Forest website, always use Internal link rather than copying and pasting the URL. Internal links automatically update if the page is moved or renamed.

For external links (websites outside Forest), it is recommended to check "Open in new window" so visitors don't lose their place on the Forest website.

Understanding Django Filer

Django Filer is the media library that manages all images, documents, and other files on the website. It provides:

• Centralized file management
• Automatic image optimization and thumbnails
• Folder organization
• File reuse across multiple pages

Managing Files in Django Filer

To organize your media files:

1. Access Filer: Go to the Django admin panel and click on Filer → Folders.
2. Create Folders: Organize files into logical folders (e.g., "2024 Reports", "Team Photos", "Documents").
3. Move Files: Select files and use the "Move" action to reorganize them.

Before deleting any file from Filer, check if it's being used on any page. Deleting a file that's in use will cause broken images or links.

4. Creating a New Page

Creating a Page from the Admin Panel

1. Navigate to the Pages tree view: Click on Pages on the Django CMS toolbar:
2. Add Page: Click the New Page button.
3. Configure Page: Fill in all required fields and select the parent page if creating a sub-page.
4. Fill Page Details:
   • Title: The page title (appears in browser tab and menu)
   • Slug: The URL-friendly name (auto-generated from title, but can be customized)
   • Menu Title: Optional shorter title for the navigation menu
   • Template: Select the page template (by default "Base Template")
5. Visible in menu: You can decide if a page should be visible in the main website menu by selecting or unselecting the 'Menu' Column in the Page tree.

Use meaningful slugs for your pages. For example, use /about-us/ instead of /page-123/. This improves SEO and makes URLs easier to remember.

Understanding the Default Text Plugin

When you create a new page with the "Base Template", Django CMS automatically adds a Text plugin with placeholder content:

• The default text says "Add your content here"
• Simply double-click on this text to edit it

5. Version Management

Django CMS Versioning allows you manage the historical versions of a given page in order to:

• Create drafts: Work on changes without affecting the live page
• Compare versions: See what changed between versions
• Revert: Go back to a previous version if needed
• Archive: Keep old versions for reference

Access version management through the toolbar by clicking on Version → Manage Versions.

 

 

6. Rearranging Pages in the Menu

Understanding the Page Tree

Django CMS uses a hierarchical tree structure to organize pages:

• Root pages: Top-level pages in the main navigation
• Child pages: Sub-pages that appear in dropdown menus
• Siblings: Pages at the same level

Reordering Pages via the Admin Panel

1. Access Page Tree: From the Django CMS toolbar, select Pages
2. View Tree Structure: You'll see all pages displayed in a tree view showing the hierarchy.
3. Drag and Drop: Click and hold on a page, then drag it to its new position:
   • Above/Below: Drop between pages to change the order
   • Indent: Drop on top of another page to make it a child
   • Outdent: Drag a child page to the main level
4. Confirm: The changes are saved automatically when you drop the page.

Hiding Pages from Navigation

Sometimes you want a page to exist but not appear in the menu. You can decide if a page should be visible in the main website menu by selecting or unselecting the 'Menu' Column in the Page tree.

 

 

After reorganizing pages, always check the menu on the live site to ensure the navigation makes sense to visitors.