Using Media in Content

Inserting an Image into Content

In order to insert an image onto a page, you must first upload it to your site. All images should be uploaded into the Media Libraries section of your website. Uploading images to your Media Library can be accomplished while you are editing the content of a page or they can be uploaded within the Media Library section before hand.

Regardless of which method is used to upload your images, once they are uploaded into a Media Library, they can be used on different pages on throughout your website.

A few things to remember prior to uploading an image is:

• You should be editing photos taken with a camera prior to uploading them to your website. This will reduce the size of the image and the amount of time it takes to load when people are viewing your site.
• After editing the image, save the image with a new name that is meaningful, this will make it easier to identify the image in the future.
• Do not use special characters like" #, $, &, %" in the new image file name.
• Image files that are acceptable for use on your site include: .jpg, .gif, .png, .bmp.
• The recommended maximum file size is 500KB. A Media Library will accept files as big as 10 MB but keep in mind that the resolution size for the photo doesn't have to be very high. If the files is 1 MB in size, the photo will take a long time to upload and it will also take a long time to load when someone is viewing your site.

Uploading an Image using the Insert/Edit Image or Media function

1. While in Edit Mode, select a page from the Content Tree to insert image to.
2. From within the Content Area select an editable region and click on Insert/Edit Image or Media button from the Content Editor

3. From the Insert image or Media dialog screen, select the Media Libraries tab.
4. Select the folder that you would like to upload your image to or If you would like to create a new folder follow these steps:
   1. Click on the + symbol
   2. Enter in a name for the folder
   3. Click on the OK button to save the new folder
5. Click on the Upload button to upload an image to the folder

6. From the explorer window of your computer/network, locate the image you wish to upload and select it.
7. Click on the Open button to begin the upload.

Your image will now be uploaded into the folder that you selected and can be inserted into a page.

Inserting an Image into the Content Area

In order to insert an image into the Content Area of a page you will need to follow these steps:

1. From within the Content Area of a page, place your cursor where you would like to insert the image.
2. Click on the Insert/Edit Image or Media button.

3. Select the Media Libraries tab.
4. Select the folder where the image is located.

 

5. From the list of images listed on the right, select the image you wish to insert.

Note: If you haven't already uploaded the image to this folder, please follow these steps liste here to upload the image.

Once you have selected your image, the properties of the selected image will be visble at the bottom the screen along with a preview of the image. The image properties that are available for the image are as follows:

URL:	This is the path of where the image is stored.
Alternate text:	The text entered here will be displayed if the image does not load correctly.
Width & Height:	These properties will allow you to control the dimensions of the image as it will appear on the page. It is not recommended alter these properties, but rather edit the actual image properties via the Media Library
Unlock/Lock Ratio	The Height and Width dimensions of an image have a locked ratio by default, which means an alteration to one dimension will adjust the other accordingly. This button will allow you to unlock the ratio and set your own custom dimensions or lock the ratio to allow the dimensions to be updated automatically. It is not recommended to unlock this ratio unless you are comfortable setting the dimensions as it may skew the image.
Reset size	If you have altered the dimensions of the image within the properties located here, the Reset Size button will return the image to it's original dimensions.
Border width:	This property will allow you to set the width of a border around the image.
Border color:	This property will allwo you to set color of the border around the image. Use the palette icon to select your border color or type in hex color code (i.e. red = #FF0000) Note: This property will not be acknowledged unless a border with greater than 0 has been set.
Horizontal space:	This property allows you to control the padding between the image and any text located to the left or right of the image. As this padding is defined in pixels, the more pixels stated in this property the more space will be allocated between the image and any text.
Vertical space:	This property allows you to control the padding between the image and any text located above or below the image. As this padding is defined in pixels, the more pixels stated in this property the more space will be allocated between the image and any text.
Align:	This property will allow you to control the alignment of the image in relation to surrounding text. Depending on the alignment chosen, the text will wrap around the image accordingly.

Editing Inserted Images

After an image is inserted, the Properties can still be edited. Follow these steps in order to edit your image.

1. From within the Content Area, click on the image that you would like to edit.
2. Right-click on the image you would like to edit and select the Properties menu item.

From here you have the ability to edit the Properties of the image or choose an alternative image. For this example we will edit the Properties of the image.

3. From the Insert/Edit Media window, complete the desired changes within image Properties.
4. Click on the Save & Close button.

Delete Images

If you need to remove an image from the Content Area of a page you will need to follow these steps

1. Click on the Image that needs to be deleted.
2. Click on the Delete button on your keyboard.
3. Clik on the Save button to confirm your changes.

For more information on images stored in the Media Libraries, click here.

Inserting a Banner into Content

When your site is first launched, a default banner image was configured for your site and will appear on all of your content pages. Alternative banner images can be configured on various pages as well on Member Modules. The defualt banner image for your site can also be modified which will affect all pages that don't have their own alternative banner image.

Note: Images that you wish to use as banners on your site should have dimensions no larger that 1900 Width and 400 Height. This to prevent excessive scrolling and load times from hindering your site.

Default Banner Image

If you would like to view and or change the default banner image for your site, you will need to follow these steps:

1. Login to your site as an Administrator.
2. Click on the "Switch to Club Central" or "Club Central" link.
3. Click on the 'planet' icon and then click on the Content Management menu.
4. Select the Pages menu underneath the Contnet Management menu.
5. From the Root page of your Content Tree, locate the 'Editable Image' section of the page.

The image displayed here, is the default banner image that will appear throughout your site.

If you wish to change the default banner image throughout your site:

1. Click on the Select button within the EditableImage region.
2. From the Select image window, click on the Media Libraries tab.
3. Select the file you wish to use as your new banner image.
   1. If you need to upload the image:
      1. Click the Upload button.
      2. From the Windows Explorer window locate your file and click the Open button.
4. Click on the Select button to use this file as the new default banner image.
5. Once you are satisfied with image chosen, click on the Publish button to save your change.

Alternative Image

Any of the page templates that you select will allow you to select an Alternative Image to be used as the banner for the page. This Alternative Image will only affect the page that it is set for. All other pages will still display the default banner image unless stated otherwise.

1. Login to your site as an Administrator.
2. Click on the "Switch to Club Central" or "Club Central" link.
3. Click on the 'planet' icon and then click on the Content Management menu.
4. Select the Pages menu underneath the Contnet Management menu.
5. From the Content Tree, locate the page you wish to reconfigure.
6. Within the Content Area of the page, select the 'AlternativeEditableImage' or 'AlternativeImage' webpart.

7. From the Select File window, select the Media Libraries tab.
8. If you need to upload the image:
   1. From the Windows Explorer window locate your file and click the Open button.
   2. Click the Upload button.
   3. Click on the Select button to use this file as the new default banner image.
9. Once you are satisfied with image chosen, click on the Save button to save your change.
10. Click on the Publish button to make your change live on your site

Module Banner Image

Each Module can have its own unique banner image just like every other page template on your site. These module pages will also allow you to configure content to appear within the module itself. To change the banner image for each module you will need navigate to the corresponding module page within the Content Tree. The pages that are associated with each module are as follows:

• Tee Times - /TeeTimes.aspx
• Public Tee TImes - /PublicTeeTimes.aspx
• Roster - /Roster.aspx
• Statements - /Statements.aspx
• Dining - /Dining.aspx
• Courts - /Courts.aspx
• Event Management - /EventManagement.aspx

In order to configure an alternative banner image for a module:

1. Navigate to the corresponding module page from list above
2. Click on the 'AlternativeImage' webpart
3. Click on the Select button to choose a banner image

4. From the Select File window, select the Media Libraries tab.
5. If you need to upload the image:
   1. From the Windows Explorer window locate your file and click the Open button.
   2. Click the Upload button.
   3. Click on the Select button to use this file as the new default banner image.
6. Once you are satisfied with image chosen, click on the Save button to save your change.
7. Click on the Publish button to make your change live on your site.

Inserting Videos into Content

There are a couple of methods in which Videos can be embedded into the content of your site. Most video hosting sites (YouTube, Vimeo, Metacafe..etc) will provide you with an iframe embed code that can be used to insert the video. The Content editor also provides you a YouTube tool to embed your videos.

Inserting a Video using an iframe

YouTube and many other video hosting sites, provide the ability to embed their videos within another site. The embed code is provided in an iframe format which allows you to insert the code directly in the the html code of a page. To obtain that code from YouTube or any other video hosting site, you simply need to navigate to the page for your video and click on the Share button. One of the options for sharing the video will be the embed code that you can use for your content.

Note: This method is meant of more advanced content builders as it will require you to be comfortable with HTML code.

The embed code will appear similar to this:

^Ex. <iframe width="560" height="315" src="https://www.youtube.com/embed/TK4j8HJYZdU" frameborder="0" allowfullscreen></iframe>

In order to insert the embed code into your content you will need to follow these steps:

1. From within Club Central, click on the 'planet' icon and select the Content Management menu.
2. Select the Pages menu from underneath the Content Management menu.
3. Once you have accessed the Pages section, select the page from your Content Tree where you wish to embed the code.
4. From the Content Area, click on the Source tool from the toolbar.
5. Locate within the HTML code where you would like to insert the embed code and paste it in.
6. Click on the Save button at the top of the Content Area to save your changes.
7. Click on the Publish button at the top of the Content Area to make your changes live on your site.

Inserting a Video using the Insert/Edit YouTube Video Tool

The Insert/Edit YouTube Video tool is a quick and simple method for embedding YouTube videos into your content. In order to insert vidoes utilizing the tool you will need to follow these steps:

1. From within Club Central, click on the 'planet' icon and select the Content Management menu.
2. Select the Pages menu from underneath the Content Management menu.
3. Once you have accessed the Pages section, select the page from your Content Tree where you wish to embed the video.
4. From the Content Area, place your cursor wher you would like the video to be inserted
5. Click on the Insert/Edit YouTube Video tool from the toolbar.
6. From Insert YouTube video window, paste in the address for the YouTube video into the section labeled URL.

Note: If you are not sure of the address for the YouTube video, click on the Go to YouTube button to locate the address.

7. Once you have inserted the YouTube video URL, you will need to configure the following parameters:
   • Allow full screen - When viewing the video on your content page, vistors can choose to display the video fullscreen.
   • Autoplay - When viewing the video on your content page, will the video start playing without interaction.
   • Loop - When viewing the video on your content page, will the video automatically restart after completion.
   • Include related videos - When the video completes, do you want related videos to be displayed.
   • Default Size - Select the default dimensions you would like the video to appear as. You can choose from pre-defined dimensions or set custom dimensions.
8. Once you are satisfied with the parameters configured for the video, click on Save & Close to insert the video.