Images In Text Area

Images can be added directly into a Text Area to complement the content on your pages. Once an image is added, there are a variety of ways in which it can be styled.
﻿
Jump to: 
﻿ Adding an Image⁠ ﻿
﻿ Changing the Focal Point of an Image⁠ ﻿
﻿ Formatting and Styling an Image⁠ ﻿
﻿ Video Tutorial⁠ ﻿
Adding an ImageTo add an image through the Text Area, follow these steps.
﻿
Place your cursor where you'd like to embed the image, then click on the Media icon.
﻿
Screenshot of the Text Area editing box and toolbar. The "Add Media" icon is outlined in yellow.Screenshot of the Text Area editing box and toolbar. The "Add Media" icon is outlined in yellow.
﻿
A new window will appear where you can add a new image or even select an existing image/video/file. Choose the desired image from your computer and then select Upload and Continue:
﻿
Screenshot of the interface for adding media. The buttons for "Select File" and "Upload and Continue" are outlined, highlighting where users should click. Screenshot of the interface for adding media. The buttons for "Select File" and "Upload and Continue" are outlined, highlighting where users should click. 
﻿
The following window will appear. You are able to rename your photo if you wish, as well as provide additional information about it. Using a descriptive image name will help you find it in your media library later.
﻿
Screenshot of the interface for adding media. The field for "Name" is highlighted, along with the toggle for "Decorative Image." Screenshot of the interface for adding media. The field for "Name" is highlighted, along with the toggle for "Decorative Image." 
﻿
Decorative ImageThere is a slider labeled "Decorative Image" that appears here. It defaults to being "on" but is very important to evaluate. 
An image is considered "Decorative" if it doesn't provide any relevance to the page. For instance, if you are simply adding color to the page or generic imagery to a page, you would leave this slider as is. However, in most cases, you will need to turn off this slider and provide Alt Text. 
Using Alternative TextOn the other hand, if your image is relevant to the information on the page, you would uncheck this slider and provide alternative text, described below. An example of a non-decorative image would be a photo that shows members of your department doing something, such as a faculty member receiving an award. 
What is Alt Text?Images on web pages provide not only visual appeal, but many times also convey important information. Alt Text improves accessibility by providing a text equivalent of the information presented visually. Including alt text with your images ensures all individuals, regardless of visual ability, can engage with your content. Alt text should be:
Accurate: including spelling, grammar, and proper punctuation.
Concise: using the fewest words possible while providing a meaningful description for the image.
Equivalent: presenting the same content and/or function of the image.
Assistive technologies will announce when an object is an image, so including this information is redundant and not necessary.
﻿
Once you determine your image is more than a simple decoration, uncheck the "Decorative Image" slider. This will change the options on the screen to include a field for Alternative Text. Below this field is Help Text which links to the Stanford Office of Digital Accessibility, where you can find  more information about using Alt Text.  In this example, we might write something concise like "Professor Carolyn Bertozzi poses with President Biden after receiving the Nobel Prize." 
﻿
Screenshot of the interface for adding media. The slider for "Decorative Image" is now off and a field for "Alternative Text" has appeared. This area is outlined, highlighting to viewers where they should look. Screenshot of the interface for adding media. The slider for "Decorative Image" is now off and a field for "Alternative Text" has appeared. This area is outlined, highlighting to viewers where they should look. 
﻿
Caption/CreditWhen you wish to include a caption or provide credit for a photo, you can include this text in the Caption/Credit box. Text can be styled using several of the different styling options (see the  Editing Your Text⁠  guide for specific information about text formats), and is limited to 160 characters.
﻿
Any captions or credits will be displayed as overlay text on the bottom corner of your image. See our  website of examples  to view what this will look like with your specific theme and color palette.
﻿
Screenshot of the interface for adding media. The Caption/Credit area is outlined, highlighting to viewers where they should look. Screenshot of the interface for adding media. The Caption/Credit area is outlined, highlighting to viewers where they should look. 
﻿
Changing the Focal PointFocal Point is feature that allows you to choose from where the image crops. The focal point defaults to the center of the image, both horizontally and vertically. To change this, simply drag the plus sign to the desired focal point of your image, such as around the eyes and nose on a person's face. 
﻿
Setting the focal point can be especially helpful when resizing the image, as explained below.
﻿
Screenshot of the interface for adding media. The focal point area is outlined, highlighting to viewers where they should look to make an adjustment. Screenshot of the interface for adding media. The focal point area is outlined, highlighting to viewers where they should look to make an adjustment. 
﻿
Video Tutorial for Adjusting the Focal Point﻿
https://youtu.be/lRsYFEQOLKM
Add a caption...
﻿
Save and Insert4.  Once you have finished setting up your image, click the button to "Save and Insert."
﻿
Screenshot of the interface for adding media. The "Save and Insert" button is outlined, highlighting to viewers where they should look. Screenshot of the interface for adding media. The "Save and Insert" button is outlined, highlighting to viewers where they should look. 
﻿
Formatting and Styling an ImageTo change the way your image appears on your page, you'll need to access the Media Toolbar. To do so, simply click on the media item and use the buttons that appear to perform actions including: adjust alignment, change size and scale, override the caption/alt text, toggle captioning, and provide a link. Each button's function will appear when you hover over it.
﻿
Screenshot of a Text Area with a media item. The Media toolbar is outlined, highlighting to viewers where they should look. Screenshot of a Text Area with a media item. The Media toolbar is outlined, highlighting to viewers where they should look. 
﻿
Toolbar FunctionsToggle Caption On﻿
Screenshot of the Media Toolbar. The Toggle Captions button is outlined, highlighting to viewers where they should look. Screenshot of the Media Toolbar. The Toggle Captions button is outlined, highlighting to viewers where they should look. 
﻿
Toggling captions allows you to choose whether or not the image caption is visible on the screen. The caption will always be visible to users when they hover over the image, but this tool provides the option to control whether or not it is displayed outright.
﻿
Link Media﻿
Screenshot of the Media Toolbar. The Link Media button is outlined, highlighting to viewers where they should look. Screenshot of the Media Toolbar. The Link Media button is outlined, highlighting to viewers where they should look. 
﻿
This is the hyperlink button, where you can add internal/external links to the image. You can also link to PDFs uploaded onto your site. 
﻿
Override Media Image Alternate Text﻿
Screenshot of the Media Toolbar. The Override Media Image Alternative Text button is outlined, highlighting to viewers where they should look. Screenshot of the Media Toolbar. The Override Media Image Alternative Text button is outlined, highlighting to viewers where they should look. 
﻿
You may have inserted an image from your media library that was previously uploaded. Perhaps the alt text doesn't read the way you'd like it to in this particular instance. You can now edit the alt text on a case by case basis by clicking this button. Doing so allows you to customize your alt text when one image is used in multiple places.
﻿
Adjust Image Size and Scale﻿
Screenshot of the Media Toolbar. The Adjust Image Size and Scale dropdown menu is outlined, highlighting to viewers where they should look. Screenshot of the Media Toolbar. The Adjust Image Size and Scale dropdown menu is outlined, highlighting to viewers where they should look. 
﻿
Clicking here will pull up a dropdown menu.
﻿
Screenshot of the Media Toolbar. The Adjust Image Size and Scale dropdown menu is expanded, showing all of the sizing options from which users can select. Screenshot of the Media Toolbar. The Adjust Image Size and Scale dropdown menu is expanded, showing all of the sizing options from which users can select. 
﻿
Use this menu to adjust the size and scale of your image.
﻿
Break Text: Left or Center Aligned﻿
Screenshot of the Media Toolbar. The Break Text: Left or Center Aligned buttons are outlined, highlighting to viewers where they should look. Screenshot of the Media Toolbar. The Break Text: Left or Center Aligned buttons are outlined, highlighting to viewers where they should look. 
﻿
Select one of these options if you wish for your image or video to be shown on its own line, with text located above and below. With this option, you can align your media to the left or center, as displayed in the corresponding icons.
﻿
Align Left or Right and Wrap Text﻿
Screenshot of the Media Toolbar. The Align Left or Right and Wrap Text buttons are outlined, highlighting to viewers where they should look. Screenshot of the Media Toolbar. The Align Left or Right and Wrap Text buttons are outlined, highlighting to viewers where they should look. 
﻿
Select one of these options if you wish to have the nearby text wrap around your image or video. With this option, you can align your media to the left or right, as displayed in the corresponding icons.
﻿
Video TutorialThe relevant content spans from 17:38-21:11.
﻿
https://youtu.be/vlapRoM5thU?si=oiXr_cwpFYZAtUni&t=1058
Video tutorial for adding an image to a Text Area.Video tutorial for adding an image to a Text Area.
﻿
﻿