skip to main content

 

Upload images (photos and graphics)

Images uploaded to pages

This section covers images that are uploaded to a web page, through the Responsive Filemanager (folders holding images and files for website display).

NOTE: When making a post (blogs, articles, news, etc) using the form upload, images are uploaded directly from your computer and do not require formatting using instructions in this section.

The Filemanager contains folders, added by the website manager, to allow images (and files) to be uploaded to your web pages. Make sure all images are uploaded to a yellow folder. If needing to change an existing image, ensure the image is renamed before upload, otherwise the website will read it as the same unchanged image).

 

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 Responsive Filemanager. However, it shouldn't be made bigger, on the page than the original size, because the image will become fuzzy.

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 no bigger than 1400 pixels wide - this is the largest you will need on a web page.

Image sizes for different parts of your page

Sizes are a guide 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: 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 column - Custom Panel 1: The vertical area in the right of the page. approx 370px max wide @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 'Responsive Filemanager'.

    1. Go: Site Tools > File Manager

    2.  Find the image. 

    3. Change the viewing layout to 'List view' and it will list the images and the dimensions (in pixels).

You might choose to keep your image sizes in your 'Keep Notes' (left menu in Edit mode).

Resize images

You will need a graphics programme on your computer to 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

Read more about image resolution: https://guides.lib.umich.edu/c.php?g=282942&p=1885350

BACK TO MENU

Place images into your text content

You need to be logged in.

  1. 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 gap and place your cursor in the middle, between paragraphs. If cutting the image into the text (left or right), place the cursor on the left at the beginning of a sentence.

  2. Upload the image by clicking 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 as needed. If the image is already uploaded find the image and go to point 7.

  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 ‘Return to files list’ button.

  6. Select the image to place onto the page. Click OK. Note that you might elect to tick 'Show Caption' to add a caption under the image.

Your image will appear on the page.

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)


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

How to change an image that is already on the page

You need to be logged in.

  1. Click on the image you wish 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 will appear on the page.

BACK TO MENU

Trouble shooting:  Image not showing on page

Check the image is either a jpg, gif or png.

 Try a fix by going back to your original desktop image, reformat and then upload and insert it again.

Check the image can be loaded onto a different 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. Upload the image by clicking 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 and your image will appear on the page.

BACK TO MENU

Resize on the page, reduce only

Original image size shown is  350 x 233

Reduced size shown 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 measurement - changing one measure proportionately alters the other measure.

Don't enlarge the image since that will pixelate the image and make for poor quality viewing. 

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

You need to be logged in.

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

  1. Place the cursor at the beginning of the text, where you wish to place the image.

  2. Upload the image to the page.

  3. With the image highlighted, go to the left 'Paragraph' dropdown menu containing Alignment.

  4. 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.

BACK TO MENU

Reset missing images

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 Responsive Filemanager.

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.

  1. Go to the page where your image is missing.

  2. Click on the blank image space or 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 the file name and source folder for the image, so you can find it in the Responsive Filemanager.

  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 should be.

  7. Find the image and select it.

  8. If the image is not there, upload it again from your desktop.

BACK TO MENU

Remove white space under an image

When an image is placed on a page, it is automatically assigned the 'paragraph' style (normal text).

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

FIX:

  1. Click on the image.

  2. Select the middle 'Paragraph' dropdown in the editing tools and select 'Div element'. Make sure paragraph is not selected.

  3. SAVE

BACK TO MENU

Download images from the website

You need to be logged in.

  1. Go: Site Tools > File Manager

  2.  Find the image. 

  3. In box view: Run your cursor over the image name until 4 icons appear. Use the Download icon to save the image to your computer.

    or

    In 'List view': Select the download icon to the right Download the save to your computer. 

BACK TO MENU

Hovers

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.

    1. Create and name your 2 images.

    2. Upload your 2 images into your Responsive Filemanager. 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 under images

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

You need to be logged in.

Insert your image into the page. See above 'Placing images into your text content'.

Apply a caption to your image
    1. Click on your image

    2. Select the Insert/edit image icon from menu above. . 

    3. Tick the "Show caption" button. Click Save.

    4. Highlight the word Caption and type or paste in your caption text.  Save Page.

    5. If you wish the image to align left or right around body copy go to Formats/alignment left or right. (Not Block).

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 on images

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

You need to be logged in.

    1. Add your image to the page

    2. Click on your image

    3. Go to Paragraph (left dropdown) > General Site > Img Border

    4. SAVE PAGE

BACK TO MENU

Make links in images, text and email

Links to pages in your website - see below for links to external website pages

You need to be logged in.

    1. 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.

    2. Go to the page where the link will be displayed.

    3. Click on the image or highlight the text that will receive the link.

    4. Click on the Insert/edit link icon (looks like a chain) add in harvested link in the URL panel /page name

    5. Open link in Current window.

    6. Click Save  SAVE PAGE

Links to other website pages

  1. Start by harvesting the full URL link from the external website page.

  2. Go to your web page where the link will be displayed.

  3. Click on the image or highlight the text that will receive the link.

  4. Click on the Insert/edit link icon (looks like a chain) add in harvested link in the URL panel.

  5. Open link in New window.

  6. Click Save  SAVE PAGE

Make links to documents such as PDFs, PP and Word docs - see here

BACK TO MENU

Create a signature image using a screen capture

When you make a 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 because the image will auto-crop as a square or rectangle, depending on where it is displayed. Your selection should be roughly wide rectangular in shape and needs to be at least 400 pixels at the shortest axis.

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 Rectangular Snip, you’ll see the whole screen change slightly to gray. Then, choosing from anything currently displayed on the screen, select a squarish area of your screen 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 the Space bar while dragging. To cancel taking the screenshot, press the Esc (Escape) key.

 
+ Text Size -