Rich Text Block

In many CMS systems everything is done within a WYSIWYG editor. Caltech Sites offers a WYSIWYG editor but it's features are somewhat limited. This is by design. You should use the "Rich Text" block to create text but we offer separate blocks for images, video embedding, tables, headings, etc.

Many of the options in the Rich Text Toolbar should be familiar to you from their equivalents in Microsoft Word. The options above, in order, are:

1. Bold
2. Italics
3. Strikethrough
4. Superscript
5. Subscript
6. Use Code Font
7. H1-H6 Heading levels starting from largest to smallest
8. Numbered list
9. Bulleted list
10. Quote
11. Preformatted Code (a.k.a. <pre> tag)
12. Indent
13. Align Center
14. Horizontal rule
15. Line break
16. Link (add or manage links)
17. Embed Video - you should probably use our Video Block instead
18. Document
19. Image
20. Undo
21. Redo

After choosing an image from your image collection (or uploading a new one on the second tab), you will be presented with the following screen, where you can choose the size and alignment of your image.

Image Lightbox

Download Full Image

Zoom Icon

Images added within rich text blocks automatically get a zoom icon which allows viewers to see the original image in a popup (as you can see in the image above). If you do not want the zoom icon on your image, the best option is to use an image block, such the Hero Image block which will allow you to choose whether or not to add the zoom icon. Another option is to upload an image that is either narrower than 400px or shorter than 300px; images with small originals do not get the zoom icon added to them.

MathJax is a powerful formatting language for displaying mathematical formulae and symbols in webpages. For instance, to display \(\Omega(G)\) in a sentence, you would type \(\Omega(G)\). While if you wanted to display a more complex mathematic formula on its own line, you would type $$a^2 + b^2 = c^2$$ or \[a^2 + b^2 = c^2\], which would give you this:

$$a^2 + b^2 = c^2$$

Sometimes, in-sentence MathJax is written as $\Omega(G)$, but Caltech Sites doesn't support that format, because we support mixed-context text. This makes it too easy for our code to mistake non-MathJax text that uses single dollars signs for MathJax text that should be given special formatting.

Anchor links are links that go to a different part of the same page. For example, this link leads back up to the Embedding Images section of this page.

If you want to go to a specific section of a different page, use an "External link" and include the entire URL of that page, plus the # character and then the anchor value (which is discussed below). For links going to a specific section on the same page, use the "Anchor link" option.

Image Lightbox

Download Full Image

To create Anchor links in a Rich Text field, select the text that you want to turn into a link, click the Link icon (near the right side of the toolbar), and choose the "Anchor link" tab from the dialog that appears. You'll generally want to do this after the page is mostly finished, because the target you want to link to needs to exist to be able get its anchor value.

The #: field in the Anchor Link tab is where you insert the anchor value for this link, also known as the URL fragment. Those familiar with URL fragments may be tempted to include a # at the start of the value, but when adding an Anchor Link it's not necessary. Our code will add it for you.

We add ids to all headings - both those added via a Heading Block and those created within a Rich Text field. These IDs are automatically generated from the contents of the heading. A Heading saying "This is a Heading!" will have an anchor value of "this-is-a-heading" (all punctuation is removed). The anchor value for the "Anchors" heading at the top of this section is simply "anchors". If you have a hard time determining the correct ID for a particular heading, you can right-click the Heading on the live page (or a preview) and choose "Inspect" in your browser. This will open the inspector, and the selected line will include the actual id="this-is-a-heading" value. It'll look something like this:

Put that ID into the #: field in the Anchor Link tab, click Insert Anchor, and you're done.