Jomatu Wiki: Documentation

Jomatu Tutorial: Replacing an image: keeping the same dimensions


If we want to replace an existing image with a new one that's exactly the same size, we need to ensure that our new image matches the same width and height (measured in pixels) as the original image. This involves two steps: (1) determining what the size of the original image is, and (2) resizing and/or cropping our new image to match.

We'll soon be working on building this functionality directly into Jomatu, but until then, this manual assumes you have some image editing software available, and that you are familiar with the resizing and cropping tools available. If not, there are many excellent programs available for download on the internet; entering 'free image editing software' (or something similar) into your favorite search engine should present a few options for you*.

In this particular tutorial we're going to concentrate mainly on step one (as defined above): determining what the size of the original image is. We'll then replace the 'forest-through-window' image with another image that's exactly the same size.

Using our example website, our starting point is in the Edit Facility (the documentation for getting to this point can be found on the 'How to edit your website text' page - steps 1-3).

Step 1: right-click on the 'window' image to get dimensions

Replace Image File - Step One

Right-clicking on an image brings up a context menu. The exact context menu depends on the web browser you're using, so the option you select from this menu will depend on your web browser. For Internet Explorer, select 'Properties', and for Firefox, select 'View Image Info'. Unfortunately Google Chrome doesn't present this information easily. You can try selecting 'Inspect Element' and looking for the highlighted blue bar in the pop-up window at the bottom of the page; this should give you the image's width and height. Alternatively, you can install a Google extension called 'Image Size Info'.

Step 2: select 'View Image Info' (firefox - see above)

Replace Image File - Step Two

Make a note of these dimensions, as we need to edit our new image to the same values.

Step 3: Resize and/or crop your new image to match these dimensions.

As mentioned above, we'll soon be adding some basic resizing and cropping functionality to Jomatu, but in the meantime, use your favorite image editing software to resize and/or crop your new image to match the dimensions of the original. In this example, our new image is edited to have a width of 240 pixels and a height of 160 pixels.

Step 4: Click on the image we want to edit (i.e. the image to replace).

Replace Image File - Step Four

Clicking the image brings up the Edit Window. To upload our image, we use the File Manager.

Step 5: click on the 'File Manager' button

Replace Image File - Step Five

Clicking the 'File Manager' button launches the 'File Manager' window. In this window you will see a thumbnail of all the files that you've previously uploaded to Jomatu. To upload our new image file, click on the 'Upload New File' link.

Step 6: click on the 'Upload New File' link

Replace Image File - Step Six

Clicking the 'Upload New File' link launches the 'Upload New File' window. As we're going to upload our new image - which we have already resized to be exactly what we want - we've selected the 'Keep Original Size' option. Now we're going to locate our image on our computer.

Step 7: click on the 'Browse' button to locate our image file

Replace Image File - Step Seven

When you click the 'Browse' button, a pop-up window appears showing the storage devices, folders and files on your own computer. Use this window to locate your file†.

Step 8: locate your image file and select it

Replace Image File - Step Eight

When you locate your file, either double-click the file, or single click (to highlight it) and click the 'Open' button. Note: this button name may be different on your computer†. The pop-up window will disappear and you will see your file name (usually with the path to that file) appear in the 'File to upload' form field.

Step 9: click the 'Upload' button to upload the file to your website

Replace Image File - Step Nine (a)

Depending on your file size and internet connection speed, file uploading may take several minutes to complete. During file uploading you'll see the following message:

Replace Image File - Step Nine (b)

When file uploading has completed, you'll be automatically returned to the main File Manager window. Here you can see your uploaded image file, represented as a thumbnail, in the list.

Replace Image File - Step Nine (c)

Note: In this window you can view a larger version of the image by clicking on the thumbnail.

If you want to delete an uploaded file, simply click the small white cross in the red circle (you will be asked to confirm the delete). Note: this will not remove any references to the file from within your web pages, so you'll need to remove those, preferably before deleting the file.

Finally, click the 'Close File Manager' button to return to the main Edit Window, where we'll insert our newly uploaded image into our web page.

Step 10: replace the old image with our new image

To edit the old image we need to click on it to select it (you should see eight 'handles' appear around the image when it's selected). Then, click the Insert/Edit Image button.

Replace Image File - Step Ten

Clicking the 'Insert/Edit Image' button causes the 'Insert/Edit Image' pop-up window to appear.

Step 11: select our new image and add a description and title

There are three tabs in this window: 'General', 'Appearance' and 'Advanced'. In the 'General' tab we select our new image file from the 'Image List' pull-down menu. We also want to change the 'Image Description' and 'Title' to be a little more descriptive as follows.

Replace Image File - Step Eleven

Click the 'Update' button at the bottom of the pop-up window to insert the new image and close the pop-up window.

Step 12: Click the 'Apply' button to apply our changes to our web page

Our image is now placed correctly. As we're still in the Edit Window, click the 'Apply' button to effect our new changes in the web page.

Replace Image File - Step Twelve

Clicking the 'Apply' button returns us the the Edit Facility where we can see our new image has been inserted into the web page being edited.

Step 11: Click the 'Publish' button to make our changes live on the website

Finally, we want to save or publish our changes. If you have other changes you wish to make, then click the 'Save' button and continue editing. If you changes are complete for this web page, then, to put those change live on the website, click the 'Publish' button.

Replace Image File - Step Thirteen

With all our changes published, we click the 'Exit' button to return to Jomatu.

This completes the 'Replacing an image: keeping the same dimensions' documentation.

* Disclaimer: Jomatu is not associated with, or affiliated to any image processing software or company. If you choose to download and use these products, you do so entirely at your own risk.