The Teaser Link box icon in your WYSIWYG will allow you to embed a container within the body of your content that can include an image, title, and a brief amount of text.
Create a Teaser Link box
- Insert your mouse in your content where you want your Teaser link to appear.
- In your WYSIWYG icon bar, click on the Widget icon » Teaser Link box.
- A Teaser Links Options dialog box will appear requesting a URL. This can be an internal or external URL. If external, be sure to add the appropriate http:// or https:// before the web address. If it's an internal link, type or paste it in, starting with the / sign. Click OK to continue.
- You'll be returned to your WYSIWYG where a box will have been inserted into your text that you can now edit:
- Adding the image. The image is optional. If you do include the image, it needs to be pre-prepared for this space, sized exactly as 135px by 135px.
- Highlight the "Add an image" text and then click the Insert image icon in your icon bar.
- In the Edit media dialog box (detailed explanation of changes provided below):
- select your image
- add alternative text
- assign its alignment as None
- click the checkbox to include a caption field. Note: you will add the caption back on the page, not directly in the Edit Image box
- set the Display to Small
- Click Save to continue.
- Highlight the "Add an image" text and then click the Insert image icon in your icon bar.
- Title. Enter a title or phrase for your Teaser Link.
- Content. Enter a brief content section to a maximum of 200 words or 1400 characters. Exceeding this amount will cause your entire page to break.
- Caption. The field will appear directly beneath your image, if included, styled italicized light gray text. Click in this field and begin typing.
Updating the Link box's URL
At some point you may need to edit or replace the original URL you added to your Link box. While in Edit mode for your page, double-click in any of the box's spaces other than the title, content, or image box sections to bring up the URL field.
Understanding how the Media Library affects your Teaser Link Box
Media library isn't aware of anything outside itself. The teaser link box is a widget component added to the CKEditor (WYSIWYG) as a neat way to add in a grouping of fields to make a certain kind of pre-formatted output, in this case information with a link wrapped around it. To account for things like viewscreen size and usability, the container that holds the image, title, body, and link is strictly defined.
Using Right or Left alignment in this widget is not recommended since it uses the media library setting of 50% of the space. Center alignment inserts padding around the image, which isn't terrible but doesn't utilize all the possible space allocated for your image. Additionally, no other display setting beyond thumbnail or small is recommended because this widget was always designed to be teaser-like in its presentation.
Example of a completed Teaser Link box
This is an example of a finalized Teaser Link advertising the Davis Farmers Market. A link is embedded and a hover effect underlines the text and triggers a background color change to indicate a clickable area.
Davis Farmers Market
The UC Davis Farmers Market is designed to promote student health as well as local and campus foods. It is a seasonal on-campus extension of the Davis Farmers Market and runs each Wednesday during fall and spring quarters at the UC Davis Quad.
UC Davis
UC Davis is the home of the Aggies — go-getters, change makers and problem solvers who make their mark at one of the top public universities in the United States.
Since we first opened in 1908, we’ve been known for standout academics, sustainability and Aggie Pride as well as valuing the Northern California lifestyle. These themes are woven into our 100-plus-year history and our reputation for solving problems related to food, health, the environment and society.