Banner Cropping Tool

We offer an easy to use solution for editing your banners. Not only is there a professional tool for editing pictures but we will also help you crop your photos to the exact resolution that your template requires. The banner cropping tool ensures that your photo will be the right size every time and it will let you know if your photo is too small. Feel free to follow along with our tutorial video or check out the steps down below!

Instructional Video:

Here’s how it works:

• In your Catapult editor click on the banner

• Once the element has opened, you will be able to view the thumbnails for all the images currently being used, if any. You can choose to move your banner photos around by clicking on the grey bar on the thumbnail and dragging it to a different position, thereby reordering the banner images. 

• To edit a banner image, click on the pencil icon at the top of the thumbnail. The photo editor will open up and allow you to crop, adjust the light balance and color, or adjust the focus of the image. The focus tool can be helpful to make your photo look a little more professional as well as blur out students' faces in the background if you don’t have their photo permission.

• The icon to the right of the pencil is for text and it will show up as one of two ways: a green speech bubble or a red wheelchair icon. The red icon stands for an ADA error. To fix an ADA error you must click the icon and fill out the text box labeled ‘Alt Text’. ADA text is required so if you have our forced ADA compliance turned on (which you should) you will not be able to save your banner until some alternative text has been added. Within the pop up window there are also spaces to create a title and caption for your image that will show up on the site, as opposed to the Alt or ADA text which will not be visible on the site.

• The next icon is the link icon. Here, you can add or edit a link that can be visited right from the banner image. If you attach a link to the image, a ‘Read More’ button will appear on the banner to take viewers to the linked content.

• Finally, there is the delete icon which will remove a photo from your banner.

Uploading an image

• There are two ways to upload a photo: add a photo from images or upload. If you have the banner cropping tool turned on, we suggest you use the upload button to pull images straight from your computer, that way the tool can automatically crop the image to the proper size as well as change the resolution. Photos uploaded in this manner will be saved into the ‘Banners’ folder in Images. Adding banner images with or without the cropping tool is the same process.

Using the Tool

• After selecting the image from your computer, the tool will automatically pop up showing the photo resolution on the left and a preview panel on the right. Image resolutions will vary depending on the template and design of your site

• You will be able to move the cropping rectangle on the image in the preview panel to crop it to your liking

• If you need to adjust the image further, simply click on the pencil icon to go back to the editor
  
  

Without the Tool

• After selecting the image from your computer that you would like to upload, instead of the editing space opening up automatically, the image will be uploaded to the element in whatever resolution it is currently set at. Once the image is uploaded you can select the pencil icon to open the editor.

• You will need to manually change the resolution and cropping on the image, which can be a bit of a guessing game

Happy editing!

Related articles