A short procedure for inserting images into documents and event descriptions is provided below.
Pictures can be inserted into two documents in two different ways.
a) The photo or image might already exist in the Photo library. (after using the procedure to upload photos)
b) Pictures or photos may be "uploaded on the fly" from inside the editor.
As an example, let's suppose we want to insert an image using the editor into the document below. This same procedure applies to event descriptions and web-site bulletins because all use the same on-line editor..
The first step is to position the cursor in the editor by clicking the mouse at the location where you want the image to be inserted.
Next, select the "Insert / Edit Image" icon (that looks like a picture) from the top panel of the editor circled below.
When the Insert / Edit Image pop-up screen appears, you can use the dialog below to upload a new image using the circled "up-arrow" icon, or you can select an image previously uploaded. Note that images uploaded "on the fly" using the circled up-arrow icon will not become visible in your photo gallery although they will always be visible within the editor's insert / edit image function).
Using the screen below you can either upload an image already on your local file system or you can choose to embed a picture previously uploaded to the web-site.
Simply select the image that you want to load and click Insert
After you’ve done this, the editor screen will appear as below. If you’re happy with the appearance of the page, you can save the document to the database. You can right click on the image to do things like re-size the image or change its properties.
If the page appears corrupted for any reason after inserting the image, do not press save. This will result in the original document being over-written by the corrupted copy.
More About Laying Out Photos
Getting photos displayed the way you want on a page can be a little tricky. This is in part because of the nature of HTML. Sometimes a screen layout that appears to work in the editor will appear differently when the layout is rendered outside of the editor. This is because HTML is designed to allow content to “flex” to accommodate different containers and window sizes.
If you want to create a layout where photos appear side by side, it is necessary to constrain the layout so that photos appear beside one another.
A common way of doing this is to use a table as shown below. If laying out photos on your page as any sort of a grid, it is recommend that you first create the table structure and then insert the photos into appropriate cells.
You can set the table properties so that the bounding cells will be invisible.
An example of placing cells in a table is shown below.
Another approach to making photos appear where you want them us to use "Float" styles to allow photos to float to the left or right of a page. These styles can be accessed by right clicking on a photo to view its properties from within the editor or by accessing the styles menu. Learning how to "float" images left or right using the built in styles is useful.
Other useful tips about photos
| • | NeatClubs supports multiple types of image formats including BMP, JPEG, PNG and GIF. For photographs, JPEG formatted is recommended. For text, PNG or GIF is recommended. |
| • | Ideally the photo that is uploaded should be appropriately sized for your page. When uploading photos into the photo gallery they will be re-sized automatically to accommodate this. If you upload a large photo and leave it at its original size, the content of the page will load very slowly. Resizing photos in the editor is generally a bad idea. It is much better to resize the photo appropriately using a local PC based image editing program before uploading to the server. |
| • | Often people ask why they cannot simply "paste" a photo into the editor as they would with desktop tools like PowerPoint and Microsoft Word. The difference is that when editing documents on your local PC, all files are local and the images can be easily embedded in the local content. Using a web-editor is different however. First off the file you are editing does not reside locally - it resides on the server. Also, you are really editing HTML, and HTML is intended to reference a graphic image that is already accessible to internet users. This is why the photo must be uploaded to the server and cannot simply be pasted. |