skip to main content

Everything you need to know about images in Flightdec

Optimal image size and format for web

Ensure that all graphics are either jpg, gif, png and/or avi and ideally smaller than 100kb and certainly no bigger than 500kb. If they are too large then they will slow the site down.

jpgs are best for photos
gifs are better for flat colour graphics like logos
pngs for transparent backgrounds
Scan all images at 72 dpi

See "Your Notes" for image sizes to use on your website.

Below sizes are a guide. They may vary on your site. Check "Your Notes".

Gallery Images: Approx: 800x600 @ 72dpi
Slideshow: 1400 (w) x 400 (h) px @ 72dpi
Extra Wide: Approx 1400 (w) x 400 (h) px @ 72dpi
Top Content: Approx 1170 (w) x 400 (h) px @ 72dpi
Main Content: Approx 800 (w) x Any height px @ 72dpi
Right hand panel/Custom page 1: The area in the right of the site usually under the search box. approx 370px max wide @72dpi

To find individual uploaded image sizes

If you are unsure of the size of an image that is already uploaded.

Check in the 'Responsive Filemanager' (where your images are kept).

    1. Go: Site Tools/File Manager
    2.  Find the image. 
    3. Change the viewing layout to "list" and it will show you the dimensions on the right.

 

Or look in your 'Your Notes', and if they aren't in there, put them there once you find out what they are. 

Resizing images

You will need some sort of graphics programme resize images, for example: Adobe Photoshop or Paint in Windows.

Or try this online application: https://www.reduceimages.com/

Here's a link to 5 other ways to reduce images: https://www.wikihow.com/Resize-a-JPEG

BACK TO MENU

How to change an image that is already on the page

  1. Select the image you want to change.
  2. Click the icon “insert/edit image”, (looks like a photo of a mountain.)
  3. Click onto the icon to the right of the source window (looks like an arrow upload icon).
  4. Open or create a new folder if needed.
  5. Select ‘Upload’ (top left hand icon up arrow). Add files or  Drag & Drop files or click in the area displayed (modern browsers) and select the file(s). Start Upload   When the upload is complete, click the ‘Return to files list’ button.
  6. Select the image to place onto the page. Click OK.

Your image should appear on the page.

BACK TO MENU

To place images into your text content

  1. Select the page you want to upload your image to. Click on 'Edit icon' on the right.
  2. Place your cursor into the text editing area where you want your image to appear.
  3. Upload the image by clicking the icon “insert/edit image”, (looks like a photo of a mountain.)
  4. Click onto the icon to the right of the source window (looks like an arrow upload icon).
  5. Open or create a new folder as needed.   If image is already uploaded find the image and go to point 7.
  6. Select ‘Upload’ (top left hand icon up arrow). Add files or  Drag & Drop files or click in the area displayed (modern browsers) and select the file(s). Start Upload   When the upload is complete, click the ‘Return to files list’ button.
  7. Select the image to place onto the page. Click OK.

Your image should appear on the page.

! IMPORTANT !

Images are automatically made responsive so they shrink to fit all screens.

To check, or take the responsive attribute off

8. Select your image.

9. Select ‘formats’ / select ‘Responsive Styles’ / click ‘Responsive Image’ on or off.

BACK TO MENU

Trouble shooting:  Placing an image does not show

Check the image is either a jpg, gif or png

 Go back to your orininal image reformat and upload again. Try inserting it again.

Check the image can be loaded onto another page.

 If that works do the work around as below 

Work around: 

  1. Place your cursor into the text editing area where you want your image to appear.
  2. Click the icon “insert/edit image”, (looks like a photo of a mountain.)
  3. Click onto the icon to the right of the source window (looks like an arrow upload icon).
  4. Find the uploaded image, select and right click, select 'Show URL' then copy that. Select OK.
  5.  Go back to your insert/edit image” window panel and in the source window, paste the url.
  6. Click OK. the image should appear in the place where your cursor is.

 

BACK TO MENU

Resizing on the page, reduce only

Original image size above.  350 x 233

Reduced size 180 x 121

Resize the image by selecting it and moving the bottom right blue square corner into the centre.

Or select the image and select the insert edit image icon. Alter the width measurement.

Don't enlarge the image as that will pixelate the image, making the viewing quality poor. 

Make sure your uploaded images are not too big. No bigger than 500kb. If they are too large then they will slow the site down.

BACK TO MENU

Text wrap an image

To get an image to sit left or right with the text wrapping around it.

  1. Place the image at the beginning of the text.
  2. Select image.
  3. Go to the dropdown menu that has Alignment in it .
  4. Select either Block/Image Left with margin or Block/Image Right with margin.

 

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.

BACK TO MENU

Relink missing images

  1. Go to the page where your missing image is.
  2. Click on the missing link icon.
  3. Click on the  the icon “insert/edit image”, (looks like a photo of a mountain.)
  4. In the Source window, make a note of file name and source folder where the image is suppose to be.
  5. Click onto the icon to the right of the source window (looks like an arrow upload icon).
  6. Go to the folder where the image is suppose to be.
  7. Find the image and select it.
  8. If the image is not there, upload it again.
BACK TO MENU

Remove white space under image

When an image is placed in the content it automatically gets assigned the "paragraph" style.

The paragraph style has a space of approximately 12px below which is the white space you are seeing. 

FIX:

  1. Select the image.
  2. Select paragraph in the editing tools and select "Div element", make sure paragraph is not selected.
  3. SAVE
BACK TO MENU

Download images in the site

  1. Sign into the site admin
  2. Go: Site Tools/File Manager
  3.  Find the image. 
  4. Find the image you need.
  5. In box view: Run your cursor over the image name until 4 icons appear. Used the download icon to download the image to your computer.
    or
    In list view: Select the download icon to the right download the image to your computer. 
BACK TO MENU

Hovers

A hover (change of state) on an image or text indicates that there is an active link on that item and the user can click onto it to get more information.

Default hover for an image

On most Flightdec sites the default hover on an image is:  the image it will fade to 70% of its colour. 

Contact yvonne@flightdec.com 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 you uploaded 2 images that are named exactly the same name.

The hover image should 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.

    1. Create and name your 2 images.
    2. Upload your 2 images into your sites File Responsive Manager. See here 
    3. Click on the image and go: To the menu to the right of the Tx icon:
    4. Select: Responsive Styles.
    5. Click on the "Hover Image Swap"
BACK TO MENU

Captions

To get a caption aligned and flush underneath your image. It must be done in the order below.

Insert your image into the page. See above "To place images into your website text content"

Apply a caption to your image
    1. Select your image
    2. Select the insert/edit image icon from menu above. Or the 3 dots that appear in the small tool box that will show when the image is seleted. 
    3. Check the "Show caption" button. Click Save.
    4. Highlight the word Caption and type in your caption text.  Save Page
    5. If you want the image to aligned left or right around body copy go:Formats/alignment left or right. (Not Block)
    6. It must be done in the order above.
    7. If it's not working, start afresh and reinsert your image.

 

A caption will look like this text here.

 

Note: Image description: a detailed explanation of an image that provides information to visually impaired users.

Image title: is the text which a user sees after hovering over the image.

BACK TO MENU

Borders

To add a border to an image, (a thin black line)

    1. Add your image to the page
    2. Select your image
    3. Go Formats/General Sites
    4. Select Img Border
    5. SAVE PAGE
BACK TO MENU

Linking images, text and email address'

Linking images and text to other pages in your website.

    1. Select the page to edit.
    2. Highlight the image or text you want a link on.
    3. Click on the ‘Insert/edit link icon’ (looks like a chain) add in page name you want to link to.  eg:    /home
    4. Change ‘Target’ to ‘blank’ so that it doesn’t open a new window on your browser.
    5. Click OK       SAVE PAGE

Linking images and text to other websites

    1. Go to the website you want to link to.
    2. Highlight the website url (address). Copy it.  (pc: control c) (mac:command c)
    3. Go to your website administration and find the page where the image you want linked.
    4. Highlight the image you want a ‘link’ on.
    5. Click on the ‘Insert/edit link icon’ (looks like a chain). 

Paste (pc: control v)(mac:command v)  the website url you want to link to in the box to the right of the word url.

Change ‘Target’ to open in a 'New window’ so that their website opens in a new window in the users browser and doesn’t close your website.

6. Click OK    SAVE PAGE

Linking Images to document like pdf, ppt and word docs

See here

BACK TO MENU

Create a signature image using a screen capture

When you make the screen capture or snippet for use as a signature image, make sure the main content of your image is in the centre of your selection. Your selection should be roughly square in shape.

On a PC use the snippet tool.

Select the Start  button or search icon next to it, type snipping tool in the search box on the taskbar, and then select Snipping Tool from the list of results.

In Snipping Tool, select Mode. In earlier versions of Windows, select the arrow next to the New button. Select Retangular Snip, you’ll see the whole screen change slightly to gray. Then, choosing from anything currently displayed on the screen, select a sqaurish area of your screen that you want to capture.

See more on the snipping tool

On a Mac use keyboard commands.

Press and hold these three keys together: Shift, Command, and 4.
Drag the crosshair to select the area of the screen to capture.
To move the selection, press and hold Space bar while dragging. To cancel taking the screenshot, press the Esc (Escape) key.

 
+ Text Size -