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
-> 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
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
# 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
# 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
-> 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