Overview

Photos and Photo Albums are managed completely through the Image Explorer. This article will review how to upload and manage the Image Explorer, access Stock Images, how to crop and resize images, and how to manage Photo Albums.  

Required Permissions

• Admin

• Editor

Accessing the Tool 

1. To access the Image Explorer, follow the steps below depending on your access role.

   1. Admins: Hover over Admin bar in the left hand corner of the screen, select Image Explorer. 

   2. Editors: Hover over Admin in the main navigation, select Main Tools, and then Image Explorer.

2. The Image Explorer Interface screen will launch. 

Image Explorer Interface

The Image Explorer is a repository for all images used on the website. It is simply a holding place to organize imagery, and allows for images to be edited.

Organizing Images

1. It is important to organize images, so the images are easy to find. Organizing folders is extremely important when working within Photo Albums, as Photo Albums pull images from an entire folder, or multiple folders. There is never a reason to delete images from the website, as there is no limit to the amount of images stored.

2. Folders are typically named after year, event, topic, dimension, or Photo Album title. To add a New Folder, click the Add New Category folder at the top of the folder structure. You may name your Folder and then even choose where the Folder is nested in the Folder structure.

3. Images may be moved from one folder to another by right clicking on the image > Move. This will bring up the Folder Structure, where you can click on the desired folder, and then click the Move button to transfer the image.

Accessing Stock Images

1. To access the repository of Clubessential provided Stock Images, select Stock Images from the top level drop down within Image Explorer. From here you can access multiple categories of Stock Images, such as Beach, Holiday, Sports, Events, F&B photos, and more. Stock images must be copied to your site in order to be able to use them.

2. Once you have selected the image(s) you would like for your site, right click the image and select Copy to Site. Image Explorer will then allow you to select the folder to which you would like the image to be copied for use on the site. 

Uploading Images

1. To upload a photo, select the category or Folder into which the image will be uploaded. Click the Green Plus sign to start uploading. Once the upload interface is launched, we can upload imagery in several ways.

2. Images can be resized on upload by choosing the Resize on Upload button.

3. You may also choose the the folder destination from the Upload Interface by using the Category drop down.

4. Images can be Dragged and Dropped from your local system into the upload interface. This will not work with older browsers. If you are using an older browser, please use the next step by adding imagery via the Select options.

5. Images can also be added by using the Select buttons.

6. Once the desired images are added to the upload interface, the upload will occur automatically.

7. The upload interface will show a ‘completed’ notification, and there is an option to then upload more imagery or ‘X’ out of the interface.

Resizing and Cropping Images

1. Once images are uploaded to the Image Explorer, they may need to be resized and cropped to meet the appropriate image dimensions used throughout the website. Image dimensions are provided after the website comes out of coding.

2. To edit images, right click on the image and choose Edit Image. This will launch an image editor interface window. From here you have a variety of tools available to manipulate your image.

3. First, the image will need to be resized to reach the desired width or height. Open the Resize button to begin. The Maintain Aspect Ratio option is checked by default, which should remain enabled as this ensures that when the image is resized the appropriate aspect ratio is kept.

4. Change either the width box (on the left) or the height box (on the right) to get as close to the desired size. When the width box size is changed, the height box will change accordingly to the appropriate aspect ratio and vice versa. Once the desired height or width is reached, Click Apply. 

5. Next, Click Crop the image to meet the desired dimensions if Resizing did not meet the proper dimensions. With the Crop option, select a new aspect ratio to the desired dimensions. A box will show laying over the image. Drag the box around the image to choose the portion of the image you would like to keep. The opaque areas of the image will then be cropped out. Click Apply to complete the Crop.

6. To Save the image in the Image Explorer, click Save at the top left of the screen.

7. An option to Overwrite or Save as new prompt. 

   1. Overwite: this will replace the original image in the Image Explorer. Not recommended, as it’s best to keep the original dimensions so the image may be edited again at a later time.

   2. Save as new: this will keep the original image and save the new editing image separately. Note: both images will have the same name once added in the Image Explorer. The images will need to be renamed in order to tell the edited and original image apart.

8. Once the image is saved into the Image Explorer, the browser may need to be refreshed to see the image. Rename the image if desired, by right clicking on the image > View Properties. Enter the desired name and click save.

Additional Image Explorer Resources

Placing Images on Pages

Photo Albums

Best Practices

1. It is best to keep the Image Explorer as organized as possible so images can easily be found. By creating multiple folders named by year, event title, or image size it can be easy to find where images are located at a glance.

2. Create an Archive folder in the Image Explorer and move imagery here when not in use. Since there is no limit to the amount of imagery in the Image Explorer, move unwanted images here. If images are deleted from the Image Explorer, they then must be re-uploaded in order to use them on the website. Deleting an image in use will create a black box on the website where the image was located.

3. Resizing and cropping images ensures that imagery to sized to the proper dimensions for the site design. It is not recommended to resize imagery on the page as this could cause the image to become pixelated.

FAQs

1. I am seeing a black box where an image once was, what happened to it? A: If an image is deleted from the Image Explorer and in use on page, this will cause a black box on the page. It is best to never delete imagery, but rather create an Archived folder where images can be moved to when not in use.