Jonas Software 1.800.352.6647  |  [email protected]  //  clubsystems group 1.800.356.4242  |  [email protected]
Homee3 HelpEducationServicesContact Us
 
Content Management
   Pages
      Creating a Page
      Editing Content
         Web Page Editing
         Change Banner Image
         Formatting Text
         Images
         Hyperlinks
         Tables
         Saving and Publishing
      Image Galleries
      Page Types
      Properties
      Page Visibility
      Mobile Content
   File Import
   Media Libraries
   My Documents
   Outdated Documents
   Recent Documents
   My Recycle Bin
   Pending Pages
   Biz Forms
Site Administration
User Modules
Content Management > Pages > Editing Content > Change Banner Image
Change Banner Image
Some websites have been designed to have a default banner image placed at the top of every page of their website. The banner image can be placed either below or above the navigation bar. This section will guide you in determining the specific banner size designed for your website, how to select the correct page template and of course how to replace the banner image. In this example it is placed below.

 

Topics


 

Determine if the page has the correct page template
(Templates with Selectable image)


1. Login to the club website as an administrator and SWITCH TO CLUB CENTRAL
2. Click on PAGE Tile from the Dashboard
3. In the Content Tree, select the Page that needs to be edited (i.e. Contact Us)
4. Make sure to be in EDIT Mode
5. Is the ALTERNATIVEIMAGE blue bar visible?
      Yes, the correct page template was selected, the image can be changed on this page
      No, the banner image will have to stay as the default image.

The Contact Us page allows the Banner image to be replaced, the ALTERNATIVEIMAGE blue bar is visible.



The Home page does not allow the Banner image to be replaced, the AlternativeImage blue bar is missing, it only has the NoLeftHandNav blue bar.
 
Note: If you want to change the photo on the Home page and the AlternativeImage blue bar is missing, please contact the Web Support team.



 
Note: Page templates cannot be changed once saved, a new page needs to be created or you can contact the Web Support team for further assistance.

When creating a new page, be sure to choose page layouts from the TEMPLATES WITH SELECTABLE IMAGE Folder.
Click here to see more info on Creating a New Page
 

 

Determine Banner Image Dimensions 


To ensure that the pages on the website have a consistent look it is recommended that the dimensions for the new image to replace the existing banner image be exactly the same as the default.
 

From the Content Tree

1. Login as administrator and SWITCH TO CLUB CENTRAL
2. Select PAGES from the Dashboard
3. Click on the Root Page in the content tree - this should have your club name on it.
  • Near the top of the page there should be a bar that says EDITABLEIMAGE
  • Beneath that is a button that says SELECT
4. Click on the SELECT button
  • This should open the SELECT IMAGE window
5. Look for the Width and Height of the default banner image that has been set up for your website.





 

From the Live Site

1. Using Mozilla Firefox as the browser
2. Hover over the banner image on the Live site
3. Right click with mouse
4. Select VIEW IMAGE INFO



5. In the pop up window, select the MEDIA button at the top if it isn't defaulted
6. Write down dimensions (i.e. Mystic River Club banner is 940px x 187px)
Note: Each club has a custom design, as a result the dimensions will be different for each club.

 

It is recommended that all editing and resizing for images be done using an image manager program (Paint, Photoshop) prior to it being uploaded to the website.


 

Changing Banner Image on a Specific Page 


1. Select PAGE to Edit Banner in Content Tree
2. Click on the ALTERNATIVEIMAGE blue bar
3. Click on the SELECT button

 

The Select File Modal window will appear
4. Click on MEDIA LIBRARIES
5. Select Folder (i.e. banner_images) where image is located
  • Use up and down arrows to find existing photos in folder or click on the Full Screen button to make it easier to view existing files
6. Select new image (i.e. banner_contact.jpg) or Upload new photo 7. Optional: Alternate text can be added to ensure that the image is compatible for accessibility
8. Edit Width and Height if necessary to match Default Banner dimensions
Note: the dimensions for this image Width: 719px and Height: 200px (They do not match the image dimensions that were found earlier 940px x 187px. This example will continue with the incorrect dimensions to illustrate why the dimensions need to be exactly the same.)
9. Click on SELECT button in the bottom right corner



With the ALTERNATIVEIMAGE blue bar selected
  • The Image box now has the file path where the new banner image is located in the Media Library.
  • Under the Select button the banner_contact.jpg image that was selected is now displayed as a thumbnail image
10. Click on the SAVE button to replace the default image on this page.



11. Click on PREVIEW to see the changes

 
 
Note: There is extra white space in the banner. This is the result of the image width being only 719px instead of the required 940px.
 

 

Restoring the Image to the Default Image


1. Click on the ALTERNATIVEIMAGE blue bar
2. Click on the CLEAR button
  • This will remove two things, the file path and the thumbnail image that is found under the Select button.
Note: The website is coded to automatically restore the default banner image after you click on the Clear button.

3. Click on the SAVE button

 
 
4. Click on PREVIEW to view the changes.
  • Banner Image has been restored to the default banner image.
 


 
 

Related Documents

Was this documentation helpful?

Current rating: 0 (0 ratings)
 
 Copyright © 2016 Jonas Club Management