RisingLine New Media | Site Map
Search

WebSite 2.0 content management tutorial Email or bookmark this page

1.Startup & Overview   2.Editing Text   3.Editing Photos   4.Formatting

Section 3: Walkthrough for Deleting and Adding Photos

1. Login and access Page Edit view

See Section 1 "WebSite 2.0 Startup Walkthrough & Overview" for instructions.

2. Deleting photos

Left click the photo and brackets will appear around the image. Press the delete key on your keyboard. 

Content Management System screen shot

3. Choose photo insert position

Place your cursor at the beginning of the approximate line you would like the photo positioned vertically in the layout.

Content Management System screen shot

4. Press the photo icon on the toolbar

Content Management System screen shot

5. Upload your new photo

After you press the photo icon on the toolbar, Image Properties will open in a separate window (If it does not, please enable popups in your browser or security software for this page).

Click the "Upload" tab in the Image Properties window.

Content Management System screen shot

Click the "Browse..." button.

Content Management System screen shot

Navigate to the photo you would like to upload on your PC or network and select it with your mouse, then press "Open".

Content Management System screen shot

Press "Send it to the Server".

Content Management System screen shot

Press "OK".

Content Management System screen shot

Your photo now resides on the web server. In the future, you can access this photo to place on other WebSite 2.0 enabled pages by pressing the Image Icon Image Icon in the tool bar and then "Browse Server."

6. Set the image properties

Note: This section was modified on 03/20/2007.

Image properties

A. Type in a brief text description of this photo. Optionally, you can create a hyperlink from this photo by clicking on the "Link" tab and entering the URL to which you would like to link.

B. Image Sizing - Very important! The width and height setting on this page allow you to manipulate the display size of the photo you've uploaded so it better fits the content in which your placing it on your page.

We recommend that you only make slight adjustments to make an image smaller to optimally fit your page (never make an image larger than its default dimensions after you upload it). If you place a large photo file in your page, and size its display size down it doesn't reduce the actual file size and can cause your web page to load slowly or not at all for some visitors.

If you have a large image, from a digital camera for example, that you would like to place on your site you first need to reduce its file size/dimensions. There are many software solutions to do this but if you don't have a good solution we recommend using a free online service like ResizR:

http://resizr.lord-lance.com/

For photos that you would like in an article or page that text will "float" around we recommend 200px width, not to exceed 250px.

If you would like a large photo display that takes up the width of your content area we recommend not to exceed 490px if your page layout is two column, or 680px if your page layout is one column.

C. Image Positioning - Very important!

Click on the "Advanced" tab

Image properties

Ignore all fields except the "Stylesheet Classes" field.

Image properties

There are five options to type into this box:

  1. "right" - Floats your photo to the right with a border and spacing to match the style of the rest of your site.
  2. "left" - Floats your photo to the right with a border and spacing to match the style of the rest of your site.
  3. "rightnb" - Right float with no border.
  4. "leftnb" -  Left float with no border.

E. Press "OK" when you're done.

You can change these properties on any photo in your WebSite 2.0 site by right clicking on the photo and selecting "Image Properties".

More detailed instruction on formatting images is covered in Section 4.

7. Previewing your changes

After you've made the changes, press the preview button at the bottom of the Edit Content Pane.

Content Management System screen shot

A Preview Pane opens above the Edit Content Pane showing your site as it will appear with your new photo.

Content Management System screen shot

If you're not satisfied with the way your changes look when formatted simply make changes again in the Edit Content Pane (now below the Preview Pane) and preview until the photo is positioned exactly how you like.

When changing the photo's position in the Edit Content Pane just drag and drop the photo to a different vertical position in your layout, then press "Preview".

8. Saving your changes

Press the Submit button and your site is updated.

Content Management System screen shot

9. Logging out

After submitting your changes you'll be taken back to the Current Pages screen. Click on the "View Site" menu option to see your live web site with your changes applied.

Content Management System screen shot

We recommend that when you're done editing you Logout of the Admin Panel.

Content Management System screen shot

 

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-2008 Generose 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: Web 2.0 tutorial pg 4
Top

© 2008 RisingLine — Boise, Idaho | Legal | Terms of Service | Client Login