Upload / Insert images into your website



Adding images to your website is easy to do. UpdateCase features mutliple ways to add images to your website 

METHOD 1: The easiest is to use a dedicated image element, which means you specific the image size and updateCase auto-converts the image to the correct size. This requires the image be pre-configured on your page. 

METHOD 2: The second method is to use the general text editor to place an image within the text. This is ideal when you want to inject an image within a text block and you can also add many images within one text block.

# 1 > Login to UpdateCase

As you normally would to edit content on UpdateCase
-> Login to UpdateCase.com
-> Choose Websites
-> Choose the page you want to modify 


# 2 > Page View

You are now viewing a specific page
-> that has different locations / elements
-> Click on the location you wish to modify 


# 3 > Method 1: Edit images using dedicated elemet

The first type of image editing using UpdateCase is to choose an element 
-> That has been pre-configured as an image
-> this is ideal when you want to use UpdateCase to auto-resize the image
-> This requires a web-developer to place an image within a complex location on your website

You can see which types of elements are 'images' by viewing on the right side and you will see 'image'

Click 'Edit....' to change this image


# 4 > Method 1: Change image

You are viewing the current image on this element
-> Click 'Update Live Content'


# 5 > Method 1: Upload new

First: choose the type of processing you want to do on this image
-> This allows you to upload any type of image and adjust accordingly
         Fill to output: this ensures the image is fit within the size, meaning the sides or top could be cropped if the image size is different then the original specs
         Do not crop: this means to either fill the width or the height, but leave space around so not part of the image is cropped (note: this is NOT transparent so the parts that are blank will be black)
         Keep width: Make sure the width is NOT cropped but crop the top if it is larger 
         Keep height: Make sure the height it NOT cropped but crop the sides if they are bigger
         Do not crop (transparent) same as above but make the image a transparent image so the blank parts will be transparent (note this will make the file size larger then above)
         Keep width (transparent): Make sure the width is NOT cropped but crop the top if it is larger (make the empty space transparent)
         Keep height (transparent): Make sure the height it NOT cropped but crop the sides if they are bigger (make the empty space transparent)

-> Click 'Choose file' to select an image on your computer to upload
OR
-> Checkbox the 're-import the original image' if you want to REPROCESS the image using the settings above


# 6 > Method 1: Image has been uploaded

The image has now been uploaded
-> If there are any issues with the type of processing you used (eg black lines around etc) you can click:
Update Live content to re-upload a new picture
OR
Restore Back-up content to restore the previous image 


# 7 > Method 2: Add images to text block

If you prefer to add images within a text block
-> Locate an element which has a 'General' indicated: This means it uses a visual editor to modify your text 
-> Click 'edit....' to modify this text block


# 8 > Method 2: Edit

Click 'Update LIVE Content' to modify the text block


# 9 > Method 2: Place cursor

To add a image within a text block, you must place your cursor within the text where you are to inject an image.

-> Then click the 'image icon' on the top menu bar


# 10 > Method 2: Popup

A popup appears click on the 'image browse' icon on the right


# 11 > Method 2: Image manager

A image manager appears
-> this system allows you to create folders where you want to upload your images
-> Click on 'Upload' to upload an image in the current folder you are viewing


# 12 > Method 2: upload image

You can now upload your required image
-> Simple Drag and drop to the middle square
OR
-> Click 'Add files' to browse your computer for the images you want to upload

AFTER you have chosen all the images you want to upload
-> CLICK 'UPLOAD' which will begin the upload process


# 13 > Method 2: Choose image

Now that the image has been uploaded
-> Ensure the picture is selected
-> click 'Insert' at the bottom of the page


# 14 > Method 2: choose size

If you uploaded a very large image
-> This screen allows you to set a size so your image fits nicely within the text
-> In the picture notice we have set the image width to be 200 pixels (the height will adjust automatically)
-> Click 'OK' to inject the image into your text


# 15 > Method 2: Image added

Notice the image has now been added to your text at the location you placed your cursor
-> By default the image separates the text in 2
-> If you want to ensure the text surrounds the image 
        - Click the image to select it
        - Click the 'align left' or 'align right' to fit the image within the text on the left side or the right side

Notice your image is now nicely placed within the text

Click 'Save and approve' when you are happy with your placement and changes


# 16 > Image Added

You have now added an image by 2 types of methods. 
-> Each method has it's pro-cons so choose the best that works best for your specific use case. 

When you are happy with all the changes click 'PUSH' or 'TEST' and view your changes on your website. 


# 17 > TROUBLESHOOTING: images not displaying

If you upload an image and it does NOT display check the following 
Q: Does the filename you uploaded have accents or spaces or special characters ?
A: Accents from different languages (eg ë/ü) or spaces or special characters (eg $ # ?) can cause issues on your live website. We suggest you remove these characters before you upload your image.
note: If you are uploading to a dedicated image element this does not apply, since the image filename is rewitten using that method. This only applies when you inject images within your text 


# 18 > TROUBLESHOOTING: renaming images

If you need to rename an image from the file upload
-> Click the image to be renamed
-> right click on the image OR click on top 'manage'

You can then rename your image
-> eg remove the accents from the filename to avoid display issues


Other Instructions

Below are many other instructions that show you how to use your UpdateCase application