Step 1: Image Sizing and Cropping Using BeFunky

Primary training in this tool is handled during the Image Manipulation for the Web class. Here, we'll quickly walk through the steps of how to resize the image to match the necessary dimensions.

Banner images must be 630 pixels wide, but can be anywhere form 150 to 300 pixels high. Even though the height can be taller if desired, the standard is 150.

Resizing

You can use BeFunky, a free online tool, if you do not have Photoshop. This video will be using BeFunky.

• Use a web browser to navigate to befunky.com
• Click the Photo Editor button.
• Click Upload.
• Select the Computer opton from the dropdown list. Your computer's finder or explorer window will display.
• Select the image file you wish to manipulate.
• Click the Resize option.
• Change the width of the image to 630 pixels.
• Click the Blue Checkmark button to apply your changes.

Cropping

You may also have to crop the image.

• Click the Crop button.
• Change the width of the image to 630 if it isn't already.
• Change the height of the image to 150, or to whichever height you want between 150 and 300 pixels. We'll assume a 150 height for this video.
• With the available 630 x 150 crop window, frame the subject of the photo the way you want.
• Click the Blue Checkmark button to apply your changes.

Saving

• Click the Save button.
• Select Computer from the dropdown list.
• Select your desired saving destination.
• Click the Save button to save the formatted image to your computer.

Step 2: Upload Image to Cascade

Make sure to select the emails site in Cascade. Each school and department that has access to the Email Builder has specific folders. Use only the folders associated with your school or department.

Add Content

• Click the Add Content button.
• Select the correct school or department.
• Click the option for Image.

Note: All departmental websites are under the Department folder.

Select Image File from Computer

• Click the Attach field, which is the giant area in the accompanying screenshot bordered in red.
• Select the correct image to attach.

Save & Preview

• The File Name should follow the Naming Conventions.
• The Placement Folder should be the images folder for your school or department. You can look at the file path underneath this button to confirm the location is correct.
• There should be a Received file confirmation displaying the original name of the file (which may be different if you've changed the File Name in Cascade, which is totally fine) and the memory size of the image.
• The W: (width) should be 630, and the H: (height) should be 150.
• If everything is correct, click the Save & Preview blue button in the top right.

Content Check & Submit

• If everything appears correctly, click the Submit button.
• From the pop-up, click the Content Check & Submit button.
• Once complete, the image will auto-publish to the web.

Step 3: Open Live Image in a New Tab

Now we need to open the live version of the image in a new tab, and keep the tab open.

Open Live Image

• Copy the file path of the submitted image.
• Open a new browser tab, type in staging.sandiego.edu/ and paste the image's file path in at the end and press Enter.
• Leave this tab open for now as it will be used later to add the image to the header of your email.

Step 1: Send to Workflow

After reviewing your content, send your new asset to Workflow. If you are unfamiliar with the basics of Cascade, this process is further detailed in Content Editing.

• Click the blue button for Save and Preview.
• Click the button for Submit.
• Click the button for Check Content & Submit.
• After navigating through spell check and accessibility screens that may appear, click the Start Workflow button.

Step 2: View the Live Version

Once the Back to Page link is clicked, Cascade will return you to the Workspace with the email asset you just created or edited selected.

• Click the More button.
• Click the option for Live.
• A new tab will open in your browser displaying the correct live version of the page on the staging server.

Step 3: View Page Source Using Google Chrome

Make sure you are using Google Chrome to display the page.

• Right-click on the page and select View Page Source.

Step 4: Copy Code

Copy all of the code on the page. Keyboard shortcuts are slightly different depending on the computer operating system you're using.

On a PC:

• Press Control + A to "Select All."
• Press Control + C to copy the selected code to your clipboard.

On a Mac:

• Press Command + A to "Select All."
• Press Command + C to copy the selected code to your clipboard.

Step 5: Paste Code

Steps to reach your mass email client's HTML source code window vary depending on the specific client you use.

Once you've navigated to the correct area within your mass mail tool, paste your code.

Keyboard shortcuts are slightly different depending on the computer operating system you're using.

On a PC:

• Press Control + V to paste the previously copied code from your clipboard into your mass email client's HTML source code window.

On a Mac:

• Press Command + V to paste the previously copied code from your clipboard into your mass email client's HTML source code window.