Freeola Guides


Uploading and Managing Images

By Freeola Support on 30th August, 2018 | 0 Comment(s)

Adding images to your webpages can really enhance the quality and appearance of your site.
If you have pages containing a lot of text, adding images will add some variation to the page and will also break up the text making it easier for visitors to your site to read your pages.

 

As with all the features available with InstantPro, adding images to your pages is really quite easy to do.

 

Throughout this tutorial we will create a new page and then add an image to it, exploring some of the other things you can do with your images in the text editor.

 

If you wish to add images to your site to create a Gallery Page, you will need to visit the Gallery Page Tutorial as the method used is slightly different to that discussed in this guide.

 

This guide will cover adding images using the placeholders available on some page templates, and  adding images on your pages, as well as using the InstantPro Image Editor to edit your images. You can skip to the start of each guide using the links below.

 

Adding Images Using Image Placeholders    Uploading Images    Editing Images


In order to follow the tutorial you will need to be logged in to your MyFreeola account. Once logged in to your account you will need to launch the InstantPro Website Builder which will take you to the Site Overview page.

 

Click image to view full-size

 

You will need to select the Create New Page button from the Site Overview page.

 

Adding Images Using Placeholders

 

  1. You will first need to create a new Standard page. If you are unsure how to do this, please refer to the Creating a Standard Page tutorial.

  2. Once you have specified the page name and title, you will now need to select a page layout template.

    You will need to select a template that has image placeholders contained on it, adding images without placeholders will be covered later in this guide.

    The highlighted area on the image below shows which template we will use throughout the tutorial.


                                                              Click image to view full-size

    All you need to do on the layout screen is click on the thumbnail image showing the page layout of your choice. There is no continue or next button on this page, once you have made your choice you will be redirected to the Text Editor.

  3. The Text Editor will load with the page layout that you have selected. The image placeholders that you can see on the page are where you will be uploading your images.


                                                                Click image to view full-size

    As you can see above, the image placeholders are shown in the left and right corners of the page. You will also see that they contain instructions for uploading your images.

  4. The information contained on the Image Placeholder will guide you through uploading your images. The steps shown on the image placeholders are enlarged in the image below.



    As you can see from the instructions on the placeholder, you will need to highlight the placeholder, which can be done by clicking on it with the mouse cursor. Once the placeholder is highlighted you will need to click the Images option from the Text Editor options.

    You will then be able to follow the upload process described in the Uploading without Placeholders tutorial shown below. You will need to start at Step 3 .

 

 

Uploading Your Images

 

  1. You will first need to create a new Standard page. If you are unsure how to do this, please refer to the Creating a Standard Page tutorial.

  2. When creating your page, ensure that you use the blank layout option.


                                                               Click image to view full-size

    The image above shows the Text Editor using a blank layout. Some example text has been added, and also direction as to where the image will ultimately rest on the page.

    When uploading images, you will need to click the Images button from the Text Editor options (this is highlighted above also), though it is important to note that you will need position the cursor on the page where you wish the image to appear. This is shown on the example page.

  3. When you click the Images button a new window will appear over the top of the Text Editor. It is in this window that you will be able to upload your images.

    You will also notice that there are a number of other settings which you are able to adjust. We will cover these later on in the tutorial.



    For now, all you need to focus on is the top line shown on the window - The Image URL box and the Browse button.

    For the next step you will need to click the Browse button.

  4. Once you click the Browse button, you will be directed to the Image Upload screen shown below.


                                                                Click image to view full-size

    You will need to click the Browse Computer button to find the image that you wish to upload.

    Clicking the Browse Computer button will allow you to search through the available images on your computer. For this you will need to know where the images are stored on your computer.

    As you can see from the example image, the image used for the tutorial is contained within a folder called "Tutorial Images", and the image is called "tutorial-image.jpg".

    To upload the image you will need to highlight the image name (once you have done this the image name will be displayed in the "file name" box), and then click the Open button.


                                                                Click image to view full-size

    The upload process will then start automatically and you will be shown an upload status page as in the image below.


                                                               Click image to view full-size

  5. When uploading images, you may upload an image which is larger than 672px width, this means that if it is not resized or cropped the image may spill over the regular constraints of your site format, this will probably make your site look messy, so if you are uploading large images, it's advisable to follow the points below to make sure they appear properly on your site.

    If your image has not exceeded the maximum image width of 672px you can skip directly to Step 7 .

    The tutorial image which has been uploaded is rather large and is larger than 672 pixels in width, this will mean that it may display incorrectly spill over the regular format of the site. 

    To resize the image so that it fits comfortably into the format of your site, click the Edit Image button next to the Browse and this will take you to the image resize tool. 




    Selecting Edit Image to resize the image will take you to the Image Editor.

  6. After clicking Edit Image you will see that the uploaded image is displayed with several editing options above it.


                                                            Click image to view full-size

    Once you are in the Image Editor you can use either the Crop option or the Resize option to cut your image down to a size that fits comfortably into the format of your site.

    If you choose to use the Resize option which is being used in this guide, the slider shown below will appear above your image. This can be manipulated by dragging to resize your image. you can also enter a Pixel Value to the right of the slider if you know exactly what size you want it to be. 

    After you have edited and resized the image, make sure you click the Resize Image button under the pixel value boxes to save the image as the size you have defined.  
                                                            Click Image to view full-size

    Once you are happy with the image size you will need to select the Update button in the bottom right corner of the box.

  7. When the image has been re-sized you will be taken back to the screen shown under step 5, except your image will now be smaller and more visible in the bottom of the window.



    The image editing tool will also allow you to use other features including negative or sepia effect and rotation.

    The Image editor creates a copy of your image so that the original is still available in your image archive, just in case you make a mistake!

    The more advanced features offered by the image editor are covered later in this guide, though you can click to go straight to the image editor guide.

    The Image Dimensions are also displayed on this screen. If you wish, you can change the image dimensions just by changing the values in the respective boxes.

    The Vertical and Horizontal spacing and Border options allow you to move your image around the page, and also add a border to your image too.

    For example, if a value of 10 is added to each of these boxes, the image will be moved 10 pixels down (Vertical) and to the right (Horizontal). Also a border 10px wide will be added to the image.

    The final option to complete is the Mouseover Keyword Text. This is quite simply text that will be displayed should the image not display in a user's browser, so it is best to keep this specific and relevant to the image content.

  8. Once you have configured these options click the Insert button and your image will be added to your page!


                                                                Click image to view full-size

    You can now see how the example page appears with the image uploaded on it.

    There is more than one way to upload your images on to a page using InstantPro, you may for example choose to use a Standard page template which contains Image Placeholders.

    Image placeholders are just as the name suggests, they are pre-defined points on your page where you are able to upload you images.

    The method for uploading with placeholders is very similar to uploading without them, though this method is fully described in the section below.

 

Editing Images

 

InstantPro has an in built image editor meaning that you can add different effects to your images, or resize them as necessary.

 

It is possible to edit your images directly after uploading them, as mentioned earlier in this guide, but if you already have an image in place and want to change the way it looks you do not need to upload the images again.

 

The InstantPro Website Builder stores an archive of previously uploaded images. This also includes any images you have uploaded on to a separate Gallery page too.

 

To access the image archive and edit images you have previously uploaded for inclusion on your pages it is necessary only to click the image button from the Text Editor options.

 

As before, on the box that appears you will need to click the Browse button.

 

 

You will next see the page through which you are able to upload images. You will notice as well that there is a second tab titled "Select a previously uploaded image".

 

When you click on this tab you will see a drop down menu which invites you to choose which images you wish to view. Images are separated in to those added to Gallery Pages, and those which are not. If you have more than one Gallery Page you will be able to select images according to which page they are on.

 

Once you have selected the appropriate directory you will see the screen as shown below, which shows the images I have uploaded to the tutorial site. In addition to the image archive listed, you will see that I can view images uploaded in to two gallery pages too.

 

Click image to view full-size

 

You are now able to select one of the images you have already uploaded, which you can do by clicking the  button shown to the right of the image.

 

This will load the image in to the image editor.

 

Click image to view full-size

 

Shown above the image which is being edited are the image editor controls.

 

The effect each different option has is listed below. Just hover over the item for the description to appear.

 

The options available with the image editor are described below:

 

Undo: This will undo your last action, giving you an easy way to correct mistakes!

Redo: The Redo option re-does your last action.

Resize: The Resize option will allow you to set a custom size for your images, useful if you want a smaller version of a large image elsewhere on your site. You can set pixel values or use our image resize slider tool. 

Rotate: This option will rotate the image 90° in a clockwise direction.

Crop: Allows you to crop the image. Ideal for removing small parts of an image.

Black and White: Removes all colour from the image and converts it to greyscale.

Sepia: Applies a Sepia effect to the image. Put simply, this will make the image look old.

Sketch: This will apply a sketchy effect to the image. 

Negative: This will invert the colours of the image.

Brightness: This option will allow you to increase or decrease the brightness of an image. 

Contrast: This will allow you to both increase and decrease the image contrast.

Gaussian Blur: Adds a blur effect to the image. 

Smooth: This smooths the edges of the image. 

 

In order to make changes to your images, simply click the button that represents the change you intend to make and the effect will be applied to the image. If you don't like what you see just click the Undo button to reverse the changes.

 

Once you are happy with how your image looks and are ready to add it to your page, just click the Update button and you will be shown the image on the Image Preview page as shown under Step 7 in the main tutorial, where you are able to define the height and width values for the image and ultimately add it to your page.

 

 

Editing Images Already in Place


The procedure is almost identical if you wish to edit an image already in place on your site. The example image below shows the image I wish to change.

 

 

Click image to view full-size

 

You will need to highlight the image you wish to edit and click the Images button.

 

You will then be shown the image in the same way as in the image preview, this time though you will need to select the Edit Image button as highlighted below.

 

 

This opens the image within the image editor.

 

Click image to view full-size

 

You will now be able to change the image as you require and any changes you make can be saved and will then be applied to the image already in place on your page.

 

Should you make any changes to the image which you do not like, you can always use the Undo button (in the top left corner) to reverse the changes.

 

 

Finished!


Now you know how to upload your images to pages, find out how to add hyperlinks to your images and to your text too with our InstantPro Hyperlink Tutorial.


Did you find this article helpful?

Yes | No


Article Comments (0)
There are currently no comments on this article.
Add your comment:

Comments are limited to 750 characters, you have 750 remaining.

Freeola & GetDotted are rated

Check out some of our customer testimonials below:

Great services and friendly support
I have been a subscriber to your service for more than 9 yrs. I have got at least 12 other people to sign up to Freeola. This is due to the great services offered and the r...

View More Testimonials

YOU'RE ALL SUPER ACE!
Seriously guys, I've been having a load of rubbish with my other provider for ages now, resulting with barely any webspace (50megs), no pop3 anymore and no site admin, as i...

View More Testimonials

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.