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: Email Builder Asset Creation

Add Content

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

Naming

• Give the new asset an appropriate name which follows the Naming Conventions.
• The Email Builder is a new page, so the name should NOT have a file extension on it (and thus, no punctuation).
• In this example, it has been named alumni-reunion

Placement Folder

If all previous options were selected correctly, then this should be correct. However, double checking is always a good idea.

• The Placement Folder should show the correct folder where the new Email Builder asset will be placed once created. Follow the file path underneath to confirm the folder is correct.

Step 2: Header

The header in the Email Builder is comprised of the department information and the banner image.

Department Information

This field selects the correct template to use.

• Click on the Department Information button and select the correct school or department from the dropdown list.
  • If Law is selected, two new fields will appear. Unit and Campaign. Make the appropriate selections for your unit and campaign associated with this email.
  • Sometimes other people will see Unit as well. It's set up for your specific department, school, etc. Make whatever appropriate selection is necessary.

Banner Image

• Return to the banner image tab that you copied in the first part of this entire processes and copy the URL.
• Paste the URL into the Banner Image Link field. Make sure it includes http:// at the beginning of the URL and has the file suffix at the end (like .jpg).

Banner Image Description

For accessibility, remember to include an image description for people using screen readers.

• Enter a description of the image you have uploaded into the Image Description field.
• If the image contains words, you must type all the words that appear in the image into the Image Description field.

Note: Banners are not required. And if there's no banner, then no banner image description is necessary either.

Subject and Greeting

The subject of the email goes into the Title (Heading 1) field. The lead text or sub-header goes into the Title (sub-heading) field.

Title Fields and Greeting Option

• Type in the subject of your email into the Title (Heading 1) field. Do no use all caps.
• Optionally, to include a sub-heading, type into the Title (sub-heading) field. Do no use all caps.
• Select the desired greeting. The first two options pull information from your mass mail tool's mailing list.
  • First - "Dear FirstName,"
  • Salutation - "Dear Mr. LastName,"
    
  • None - Does not include a greeting.

Note: The Salutation option is for BlueHornet users only.

Opening

Create the opening section that appears directly under the greeting of the email (or under the banner if no greeting was selected).

Select one of the following three options.

• Paragraph - Adds in a section of text.
• Button / Call to Action - Creates a button to encourage users to interact. Note: There is a maximum character length of 30 characters.
• Image with Text - Add in an image and a section for text. All images must first be loaded into Cascade. You can see how to do that in the banner section. This field works identically to the Text Module.

Paragraph

Works the same as the Text Module in Cascade.

Multiple paragraphs and lists can be used in this content section.

Button / Call to Action

Create the button text in the first field, and use the second field to link to a URL.

Note: There is a maximum character length of 30 characters.

Image with Text

The Image with Text option works much like the combination of a Text Module and an Image Module.

Images used in an email should not exceed 600 pixels in either height or width. So a 300x500 image is fine, but a 601x700 image would not.

• Image Location URL (location of image) - Use the URL for the desired image.
• Image Description (alt) - To stay accessible, make sure to create an image description for your image.
• Image Destination Link - Use the image in your email as a link to a web page.
• Image Width - 600 pixels maximum width. If left blank, the image will default to 200 pixles. The image's height will maintain its aspect ratio. So if an image is 600x300, and you change this field to 200 (which makes the 600 width 200 now), then the height would become 150 pixels.
• Content - Type in the desired text.
• Image Alignment
  • Left (for paragraph content) - This option creates the image on the left with text to the right.
  • Right (for bulleted content) - This option places the image to the right with a bullet-styled text list to the left.

Adding Additional Content Rows

Additional rows of content can be added to the email body.

Click the Green Plus Sign

Clicking the Green Plus Sign icon at the right of the Row line will add in another content row.

MyPostings Information

A MyPostings feed or even a single post can be pulled into an email automatically.

MyPostings functionality is heavily dependent on MyPostings IDs.

To find a specific MyPostings ID, visit the MyPostings IDs page.

If you do not see the ID you're looking for on that page, you can submit a web request at http://www.sandiego.edu/web-requests to inquire.

Enable MyPostings

By default, MyPostings is disabled on a new email builder.

Click the Yes option to enable new fields.

Add MyPostings Sections

Like rows in Cascade, additional rows of MyPostings can be added to an email by clicking the green plus sign to the right of the MyPostings Section bar. The up and down arrows will move section rows relative to each other, and the red X will immediately delete the entire row without any confirmation warning.

Display Type

The first option when using MyPostings in an email is to select the display type. Display type can either be specific IDs where individual posts are selected to display, or auto list, which will pull whatever posts currently fall within a selected date range.

Specific ID(s) and Post ID(s)

Selecting to display specific IDs will also present the Post ID(s) field further down the page.

Specific IDs will allow you to input 5-digit MyPostings IDs into the Post ID(s) field. Multiple IDs must be separated with a comma, but with no spaces.

Do not combine events with any other category. Others can be comma separated.

This will generate your email with a MyPostings feed that pulls only the specific stipulated posts.

Example:

67997,68996,64696

Auto List

The auto list option allows for a date range to be used and for a specific number of posts to be specified to display.

For non-event categories only. Thumbnails are highly recommended for auto list.

Start Date and End Date

These fields can have date ranges specified to pull listings only within that range. Note: The maximum number of posts to show will still display up to the ranges of the specified dates. The default number of posts to show is 5, so if there are 5 or more postings that fall within the specified date range, only five will show.

If left blank, the feed will display top posts up to the maximum number of posts to display.

How many posts to show?

By default, any MyPostings feed will display up to 5 posts that fall within any of the above specified criteria. Listing any number in this field other than 5 or leaving it blank will adjust the default to the new specified number. If there are not enough posts within the specified criteria to meet the default or minimum number of posts to show, the feed simply shows only the available number.

Section Title

Give your MyPostings section a title such as, "Upcoming Events."

Layout

Stipulate whether you'd prefer the posts display in a single column or two columns.

Show Subject(s)?

Selecting true will display the subjects from the displayed posts. Selecting false will not.

Show Thumbnails?

Selecting true will display the thumbnail images for the displayed posts. Selecting false will not.

Category ID

Select which category of MyPostings posts to display. For example, 10 will display events, 12 will display new articles, and 25 will display spotlights.

Do not combine events with any other category.

Destination ID

Displays posts with a specific destination ID.

Destination IDs are all listed under individual school MyPostings pages such as the one for CAS here.

See More URL

Creates a link for users to click which opens a new browser tab for them and displays the URL you list in this field.

Make sure to use http:// in your link, and www if present in the address. The easiest way to do this is to open a new tab in your browser, go to the page you want to link to, and once it's loaded and displaying correctly for you, copy and paste the URL from your browser into this field.

By design, all contact modules display two sets of information.

Select Option

There are three options for contact modules. Select one of the following:

• Modules - Displays content with box-like styling.
• Text - Displays content only as text. Intended for style-light emails, such as University bereavement notices.
• None - Does not include contact modules on the email.

Modules

Makes the contact modules appear as two rows of "buttons." See the example below.

• Text (line 1) - First line of text.
• Text (line 2) - Second line of text.
• URL (include http://, mailto:, or tel://) - Makes it a button which links to whichever URL you put into this field.
  

Text

Makes the contact modules appear as two rows of style-light text. See the example below.

• Text (line 1) - First line of text.
• Text (line 2) - Second line of text.
• URL (include http://, mailto:, or tel://) - Makes it a button which links to whichever URL you put into this field.

None

Completely removes the contact modules from the email.

Adding More Contact Modules

Additional contact modules can be added in the same way that additional content rows are added.

Click the Green Plus Sign icon to add another row of two contact modules.

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.