Crop and Resize an Image for a Banner

Important Note

The banner images are pulled from a unique location (the Banner Images folder). Therefore, they are not located in Public Images (formerly Public Assets). You will need to upload banner images into the Banner Images folder.

Instructions

1. Sign in to your website solution
2. Navigate to the Homepage (we recommend using the Homepage button)
   
3. Ensure that the Live Edit state is toggled to ON
   
4. In the Live Edit pane, click the Layout tab
   
5. Click the Edit Banners for this Theme button, which will open a new window
   
6. On the new window, click on the Banner image
   
7. From the Banner Options pop-up window, click the Choose Image button
   
8. Click the Actions button next to your desired banner image
   
9. From the dropdown menu, select the Edit and Copy Image button
   
10. Using the Image Cropping and Resizing tools, edit the image as necessary
    
    
    • Image Edit Tools
      
      
      • Move image or crop box: Move the image or the crop box around the space
      • Change crop box size: Manually change the size of the crop box using the click-and-drag function
      • Zoom In: Zoom into the image
      • Zoom Out: Zoom out from the image
      • Move the image to the left: Move the image to the left on the edit space
      • Move the image to the right: Moves the image to the right on the edit space
      • Move the image up: Move the image up on the edit space
      • Move the image down: Move the image down on the edit space
      • Rotate left: Rotates the image left
      • Rotate right: Rotates the image right
      • Flip Horizontal: Flips the image horizontally
      • Flip Vertical: Flips the image vertically
      • Reset: Removes and all edits and resets the image to the originally saved state
    • Aspect Ratio Options
      
      • Free: Move the crop box around freely
      • 16:9: Automatically generates a 16:9 aspect ratio crop box
      • 4:3: Automatically generates a 4:3 aspect ratio crop box
      • 1:1: Automatically generates a 1:1 aspect ratio crop box
      • 2:3: Automatically generates a 2:3 aspect ratio crop box
    • Title Box: The title of the image in the Banner Images folder
      
    • Image Preview: Preview changes made to the image in real-time
    • Selection Box Info: The width and height of the crop box, measured in pixels
    • Resize: Enter a width and height to resize the image automatically
      • Lock/Unlock Ratio: Lock the ratio to maintain the aspect ratio; unlock the ratio to select width and height independent of one another
11. Click the Crop and Resize Selection button
    
    Note: Clicking the "Overwrite if file exists?" checkbox will cause your updated image to overwrite the original image file. Please ensure that the original is still accessible before selecting this option.
12. Click the Save button
    
13. Click the Insert button to insert the new image
    
14. Click the Close/X button to close the Banner Options pop-up window
    
15. Click the Save Theme button