This section covers uploading images to a webpage via the File Manager, which stores images and files for website display.
Important: When creating posts (e.g., blogs, articles, news) using the form upload, images are uploaded directly from your computer and do not require formatting based on these guidelines.
Follow these steps for uploading images through the File Manager:
Organise Files: Store images in appropriate folders for easy access and management.
File Naming: Use clear, descriptive names to help with SEO and organisation.
Image Sizing: Ensure images are appropriately scaled to fit the webpage layout.
File Format: Use common web formats like JPEG or PNG for compatibility.
Optimisation: Compress images to balance quality and page load speed.
Alt Text: Add descriptive alt text for accessibility and search visibility.
Properly formatted and organised images enhance website performance and user experience.
Using the File Manager for Image Uploads
The File Manager contains folders, created by the website manager, for uploading images and files to your web pages.
Guidelines for Uploading Images:
Use the Correct Folder: Always upload images to a yellow folder to ensure proper organisation and display.
Renaming for updates: When replacing an existing image, rename the new file before uploading. If the filename remains the same, the website may not recognise the updated image.
File Organisation: Store images in relevant folders to maintain a clear structure and easy access.
Image Preparation: Optimise images for web use by adjusting size, format, and compression before uploading.
Following these steps ensures images are correctly displayed and easily managed within the website.
Image size and format
Before you start, ensure that all images and graphics are jpg, gif, png and/or avi and must be no bigger than 1mb. If too large they will slow the website down and may break the page.
An image can be reduced, on the page, after upload to the File Manager. However, it shouldn't be made bigger, on the page than the original size, because the image will appear pixelated/fuzzy on screen.
jpgs are best for photos gifs are better for flat colour graphics such as logos pngs for transparent backgrounds Scan all images at 72 dpi. Alternatively, convert original images to less than 1400 pixels wide - this is the largest you will need on a web page.
Image sizes for different areas of your page
Sizes are a guide only and individual websites may have slight variations. Check 'Your Notes' if your site has custom features.
Gallery Images: Approx: 1000x800 @ 72dpi Slideshow: 1400 (w) x 400 (h) px @ 72dpi Extra Wide Content: Approx 1400 (w) x 400 (h) px @ 72dpi Top Content: Approx 1320 (w) x 400 (h) px @ 72dpi Main Content: Approx 860 (w) x Any height px @ 72dpi Right hand column - Custom Panel 1: The vertical area in the right of the page. Approx 440px (max) wide @72dpi Bottom Content: Depending on how it has been coded: - approx: 1320x400px or >1400x400px @72dpi
Find an image size (already uploaded image)
If you are unsure of the size of an image that is already uploaded.
Check in the 'File Manager'.
Go: Site Tools > File Manager
Find the image in the 'File Manager' folder directory on the left.
To help find your file:
Sort by name size and date
Change the viewing layout to 'List view' and it will list the images and the dimensions (in pixels).
Note: Keep your image sizes in your 'Your Notes' (far left menu in page edit mode).
Resize images
You will need a graphics programme on your computer to resize images, for example: Adobe Photoshop or Paint in Windows.
Place your cursor into the text editing area, where you want your image to appear. If the image is to appear between paragraphs, open a paragraph space and place your cursor in the middle, between paragraphs. If wrapping the text around the image (left or right), place the cursor on the left at the beginning of a sentence.
Upload the image by clicking the icon “Insert/edit image”, (looks like a photo of a mountain.)
Click onto the icon to the right of the source window (looks like an arrow upload icon).
If the image is already uploaded find the image and go to point 7. below.
Select a folder in your 'file manager' to upload your file into. Or create a new folder if needed.
Select ‘Upload’ (top left hand icon up arrow). Select Add file(s). This will take you to your computers directory. Find and select you image.
Select 'Open' to upload the image. Select 'Start Upload'. Thenselect 'Return to files list'.
Select your image by clicking onto it. Save.
Your image will appear on the page.
SAVE
NOTE: Images are automatically made responsive so they shrink to fit all screens.
NOTE: If you are cutting the image into text, see 'Text wrap an image' (below)
By default all images are loaded as responsive ( will adjust to screen size )
To take the responsive attribute off:
Select your image in the page edit mode.
Select ‘formats’ menu (right next to Clear formatting icon Tx) / select ‘Responsive Styles’ / click ‘Responsive Image’ on or off. Should show a tick when on.
To get an image to sit left or right, with the text wrapping around it.
Place the cursor at the beginning of the text, where you wish to place the image.
Upload the image to the page.
With the image highlighted, go to the left 'Paragraph' dropdown menu containing Alignment.
Select either Block/Image Left with margin or Block/Image Right with margin.
NOTE: If you have added a caption, under the image, go to the Alignment dropdown and use 'Left' or 'Right' instead of Block Image.
Block/Image Left with margin. Maecenas non eleifend nibh. Sed tincidunt accumsan justo, ut vestibulum velit blandit quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero nisl, ultrices ut imperdiet vitae, varius in mauris. Nunc ut dolor nec lacus vehicula consequat at vitae ligula. Nullam convallis, diam ut maximus egestas, lorem sapien maximus orci, vitae porta nunc mauris at nisl. Suspendisse sed tortor at nisi gravida ultrices. Donec urna purus, hendrerit id diam in, vulputate pellentesque justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla semper augue id scelerisque venenatis. Ut commodo nec justo vitae semper. Donec eu posuere neque. Nunc neque magna, ullamcorper quis auctor eget, convallis id diam. Pellentesque sollicitudin facilisis metus at suscipit.
On occasions an image might disappear from a page. This is most likely because the image has been disturbed (alerted or deleted), usually in the 'File manager' .
The usual fix is to upload the image to the page again, or start again and upload the image from your desktop.
You need to be logged in.
Go to the page where your image is missing.
Click/select the blank image space or missing link icon.
Select the icon “insert/edit image”, (looks like a photo of a mountain.)
In the Source window, make a note of the file name and source folder for the image, so you can find it in the 'Flmngr file manager'.
Click onto the icon to the right of the source window (looks like an arrow upload icon).
Go to the folder where the image should be.
If the image is already uploaded find the image and go to point 10. below.
Select ‘Upload’ (top left hand icon up arrow). Select Add file(s). This will take you to your computers directory. Find and select you image.
Select 'Open' to upload the image. Select 'Start Upload'. Thenselect 'Return to files list'.
A hover on an image or section of text (highlighted change) indicates there is an active link.
Default hover for an image
On most Flightdec websites the default hover is a 70% image fade.
Use your admin HELP to change this or get it reinstated, if not working.
Switching the hover to another image
You can have a specific hover on an image if uploading 2 images that are named exactly the same.
The hover image needs to have the words '-hover' at the end of the name and before the '.jpg' eg. HomeImage.jpg HomeImage-hover.jpg The 2 images must be uploaded into the same folder.
Create and name your 2 images.
Upload your 2 images into your 'Flmngr file manager'. See here
Click on the image and go to the menu item to the right of the Tx icon:
Links to pages in your website - see below for links to external website pages
You need to be logged in.
Start by harvesting the link - the URL extension of the landing page (page linking to). A URL extension is the bit from the forward slash on, e.g. website.com/page name - this is the bit you harvest /page name . It can be copied from the website URL panel or go the Pages List (left column) and click on a Copy Link and it will be saved for you.
Go to the page where the link will be displayed.
Click on the image or highlight the text that will receive the link.
Click on the Insert/edit link icon (looks like a chain) add in harvested link in the URL panel /page name
Open link in Current window.
Click Save > SAVE PAGE
Links to other website pages
Start by harvesting the full URL link from the external website page.
Go to your web page where the link will be displayed.
Click on the image or highlight the text that will receive the link.
Click on the Insert/edit link icon (looks like a chain) add in harvested link in the URL panel.
Open link in New window. ( may appear above current edit window).
Click Save > SAVE PAGE
Make links to documents such as PDFs, PP and Word docs - see here
When uploading an index image for a post, it serves as a thumbnail in lists and may appear in different formats across websites. Follow these guidelines:
Choose a Picture:Avoid logos or text-heavy images; use visuals where edges are not crucial.
Fill the Frame:Ensure the image covers the entire area, avoiding white backgrounds.
Be Engaging:Use eye-catching, unique images for each post rather than reusing the same one.
Size Requirement:The image should be at least 400 pixels on the shortest side.
Cropping Tip:For portraits, use a slightly landscape orientation and leave extra space above and below the face to prevent cropping issues.
Capturing an Index Image
When taking a screen capture for an index image, ensure the main content is centered, as it may be auto-cropped into a square or rectangle depending on display settings. Select a wide rectangular shape with a minimum of 400 pixels on the shortest side.
On Windows (PC):
Open the Snipping Tool by clicking the Start button or search icon and typing "Snipping Tool."
Select Mode (or the arrow next to New in earlier versions).
Choose Rectangular Snip, then select the desired area when the screen dims.
On macOS (Mac):
Press Shift + Command + 4.
Drag the crosshair to select the desired screen area.
Hold the Space bar to move the selection or press Esc to cancel.
Change an existing Signature / Index / Card image
Find and edit the page you want to change the signature/index image on.
Under the menu item'Modules' (top right) click Unimodules or Event.
Under Extras: / Index image: Remove image and Choose a new file