EasyCMS Website Developer


How do I add pictures to my page? (New responsive sites)

1)  Note: When uploading pictures through the Edit Window, it is necessary to resize the picture first.  Use PixResizer or your normal graphics editor to do this offline, or use the Resize and Upload Images feature under Tools on your Admin Panel.

2)  On the Admin Panel, under Custom Pages,  click on pagename  [Update]

3)  Position the cursor on the page at the place you want the picture to appear (you can adjust this later if required).

4)  Click on the Insert Image icon.  An Image Properties popup window will open. (You may be prompted enable popup windows in your brower).

5) Click Browse Server.  The Roxy file manager popup window will open.



6)  Select destination folder in the left hand pane (usually downloads > image > images).

7)  Click the Add file button at the top left of the right hand pane. An Upload files popup window will open.

8)  Find the photo/s you want to upload on your local system (you can select multiple files from the same folder), then click the Upload button.
Tip: you can also drag a single file into the window.

9)  Once the file/s have indictated they have finished uploading (100%), close the Upload files window. You will return to the
Roxy file manager window and the new image filename/s will appear in the list in the right pane.


10)  Click on the image filename in the list.  The Resources Browser window will close and the image location will be displayed in the URL field of the Image Properties Window.

11)  Set any of the following values as required:
        a) Alternative Text (text that will display when you mouse over the image on the page)
b) Width:  NB leave this blank, or enter a percentage value, eg 75%
        c) Height:  NB make sure this is blank

        d) Border (To set a border around the picture - set to 0 unless you specificallly require a border)
        e) HSpace (padding to the left and right of the picture - a value of 5 - 10 normally works well)
        f) VSpace (padding above and below the picture - a value of 3 - 10 normally works well)
        g) Align (if you leave blank, text will appear above and below the picture on the page,
left or right to wrap text around the picture)

Applying additional styling to your image (Intermediate/Advanced):

-  Click on the Advanced tab at the top of the Image Properties window. (If you don't see the tab, please contact support to update your editor.)

-  You can apply preset effects by entering in the Stylesheet Classes field, eg entering shadow will create a border and shadow effect around the image.

-  If you are familiar with CSS, you can add values required into the Style field. 
12)  Click OK.  The Image Properties window will close and the picture will display on the page in the Edit Window.

13)  If you need to adjust any of the above settings, right click over the picture and choose Image Properties.  You can also move the image in the Edit Window by dragging it.

14) Click on the Click to Submit button to save your changes to the page.

Date Added: 2017-06-09
Back to F.A.Q.