Add images to WYSIWYG

To add an image into the WYSIWYG you need to have resized the image first. Resizing by dragging the image dimensions directly in the WYSIWYG, does not alter the actual file size of the image - only its visual size. This means that users will still download a big file even if it has been resized to a small size in the WYSIWYG. This dragging resizing can also result in image distortion.

To learn the correct way to resize images, see the help tutorial "Resize an image".

To add images into your WYSIWYG

  1. Login
  2. Browse to the page you wish to edit and click the edit tab
  3. Click your cursor in the WYSIWYG editor where you wish to add you image.
  4. Click the Insert/edit image icon (tree image). This will open a  pop-up.
  5. Click the Browse button. This will open a second popup window.
  6. Select your image from the list. This should close your second popup window. You can also upload a new image by clicking browse.

  • Resize your image: images are better sized and cropped in Photoshop or a similar images manager program to ensure preferred elements are included.

    Preferred sizes for general pages are: max 230pixels width, and photo should be aligned right or inserted into table if there are a number of photos.
    Preferred size for News page (appears on front home page) is the minimum  202pixel width suggested in Wisiwig - though this may have to be increased if height is not required 189pixels.     100dpi also preferred.

  • Campaign pages - Branches

  • Large image: This is a required field. This is the main image shown in the branch home page. The large image will be automatically resized and cropped to 565px wide by 362px high. To control the quality and cropping of this image, you need to upload an image which has exactly these dimensions.
  • Square image: This is a required field. This is the image shown in the campaign block throughout the site on the left-hand side and the thumbnail in the campaign teaser page. Allowed extensions are: .jpg, .gif and .png. Images must be between 180x162 (dimensions on the website) pixels and 800x800. Provided the image is this size or larger, the system will resize and crop to the required square.
  •  Wide image: This is not a required field, but to ensure quality of image, please do not rely on the system to resize and crop the large image to the     required width of the wide image. This is the main image shown in the campaign page. The maximum file size is 4mb. Allowed extensions are: .jpg, .gif and .png. Images must be larger than 590x184 pixels. The wide image will be automatically resized to 590px wide by 184px high. To control the quality and cropping of this image you need to upload an image which has exactly these dimensions.

  • Using Resize window

    - pics can be resized using the resize window if necessary - click resize: select width, click in height to get matching height. then click resize. A new file will be uploaded in list with different number. Send this file to Tinymice.

Select Send to Tinymce in the tabs in your remaining popup window. That will lead to the image editor popup window. Here, first, select the Advanced tab. Give the image a name. Enter as 'title' what you want as either a 'hovering' caption or visible caption.  If you want the caption to appear below the photo, select the ‘Appearance’ tab and select the 'caption' class from the dropdown. When the node is saved the ‘title’ attribute of the image will appear as a caption.

Then click Send to Tinymce and this should close your popup and insert the image into your WYSIWYG. You may move it around within the WYSIWYG, and place it in a table to have more layout control. Do not resize it in the WYSIWYG with the dragging resize tools.

Press SAVE at the bottom of the page to save the page.

 

To align images or videos with text wrapping around them:

  1. Insert the image at the beginning of the paragraph you wish to wrap around the image. Do this by placing your cursor just in front of the first letter of the paragraph and then inserting the image (or video).
  2. Select the image (or video) placeholder -
  3. Click the right align button on the wysiwyg editor grey bar to align pic to right.