Teaser Link Box

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

  1. Insert your mouse in your content where you want your Teaser link to appear.
    Teaser Link Box option is available from the Widget icon dropdown menu.
    Location of the Teaser Link Box option in the Widget menu.
  2. In your WYSIWYG icon bar, click on the Widget icon » Teaser Link box
  3. 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.
  4. You'll be returned to your WYSIWYG where a box will have been inserted into your text that you can now edit:
    Teaser link box regions of image, title, and content.
    The bordered areas represent in-screen editable regions users can add content. Highlight the "Add an image" text and then click the insert image icon to replace it.
  5. 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. 
    1. Highlight the "Add an image" text and then click the Insert image icon in your icon bar. 
      Location of the Add an image text to highlight
    2. In the Edit media dialog box (detailed explanation of changes provided below):
      Specific settings for an image associated with the teaser link box, which should be alignment none and display small.
      1. select your image
      2. add alternative text
      3. assign its alignment as None
      4. 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
      5. set the Display to Small
    3. Click Save to continue.
  6. Title. Enter a title or phrase for your Teaser Link.
  7. 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.
  8. 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.