Risingline Marketing marketing / design / development / consulting
(208) 475.3192

Contact Form

CMS Made Simple Tutorial: Photos Email or bookmark this page

1. Startup, overview, hints & tips    2. Working with photos    3. Hyperlinks and file uploads

Working with photos

1. Login and choose either Pages or News under the content heading in the Admin panel.

See "Startup & Overview" for instructions.

2. Choose the photo insert position

Place your cursor at the beginning of the approximate line you would like the photo positioned vertically in the layout and click the Insert Image icon CMS Made Simple Insert Image in the toolbar.

Photo Insert CMS Made Simple

3. The Insert/edit image window opens. Press the image browser icon Upload on the toolbar (or type in the image URL if you want to display a photo already uploaded to another website)

Insert Image Window

4. Choose or upload a photo

To display a photo that you've already uploaded, just click on the photo name or thumbnail image displayed.

If you would like to upload a photo or graphic file from your PC or Mac, click on the Browse button, navigate to the file on your system, and select that file. After you select the local file, it's path will be displayed in the New File area. Just click Upload Upload button and the file will be uploaded and added to the image selection.

Important: You must insure your images are properly sized before uploading them to the CMS. The native format from most digital cameras is much too large to be used on the Web and will result in poor quality images, very long load times and potentially malfunctions of the CMS.  As a general rule of thumb, photos within content (for example with text flowing to the right or left of them) should be no wider than about 250px. For large images that take up the full width of your content area: 800px for a single column layout and 500px for a two column layout.

You can resize an image using software like Photoshop or free online services like Webresizer.com.

File Selection Window

Your newly uploaded image will be listed first in the list, click the thumbnail or image name to add it to your page or news post.

New Photo

5. Set the image properties

This process applies to both new photos and existing photos posted in the content section of your live pages.

Select the image with a left mouse click. Eight "handles" appear around the image. You can resize the image by clicking and dragging these handles.

Image Layout

In many cases, you'll want your text to flow to the right or left of your image. With the image selected, press the image icon CMS Made Simple Insert Image again to open the Insert/edit image window.

Choose the Appearance Tab in the Insert/edit image window. Under Alignment, select either Left or Right to specify on which side of your page you would like your image to float. Then enter amounts for spacing around the photo ("10" for Vertical space and "20" for Horizontal space is a common setting).

Image Layout

After you enter your appearance settings, click the update Update button button.

6. Saving your page or news post with photos added.

You'll be returned to the edit content page where you'll see your aligned photo with spacing displayed in your text content.

Press Submit or Apply to save your page and post it to your live site. For instructions see the overview tutorial.


Next Tutorial: Adding hyperlinks and uploading files


Was this helpful?  Do you have any suggestions for improvement?  Please take a minute and let us know.


Instructional content on this page is copyrighted 2006-2011 Risingline Corporation. Risingline's WebSite 2.0 Content Management Solutions are modifications of CMS Made Simple and are distributed under the terms of the GNU/GPL license.

Next page: Adding hyperlinks and uploading files
Top