Overview
WYSIWYG (what you see is what you get) components provide a multipurpose text editor for incorporating a variety of information onto your page. Paragraphs, lists, tables, and images can be added to these components.
Many of the details found below also apply to text editor sections used by Accordions and other components.
When to use a WYSIWYG
- As a catch-all component for including text content with images, quotes, and tables.
Tips for best results
- Although WYSIWYG is an acronym for "what you see is what you get," there are many differences between the display of the editor and the final product on the site. Be sure to preview your page to ensure that the display is what you were expecting.
- After you paste text into any element, use the Remove Formatting tool in the WYSIWYG editing toolbar to clear out the source formatting
- The previous editor allowed for a variety of column structures that could accommodate different templates. The current editor isn’t currently set up for this, but the Text Card and Connect with us CTA components create column formats that may be useful in some situations. If you are familiar with HTML you can also add columns using the source code editor.
- Like before, images can be added to WYSIWYG components and aligned to left, right, or center. Note that captions are currently obscured by the image background but this will be removed with future style updates.
- YouTube players display at full page width by default. Use your judgment on whether any change is required. In some cases this display is the best option; in others it may feel imbalanced or overwhelm the page’s content. If you prefer to change it, a good alternative is the Featured Media – 1 column component.
- It can be helpful to put content into separate WYSIWYG components for different sections. By giving each section its own anchor tag it will be easier to link the different sections compared to adding anchors into the content manually.
- Working in the source code? If you toggle to Source view to work directly in HTML, you'll need to save your page after every component you edit. Editing one component in code view, then editing or adding another component before saving, can cause your first changes not to be saved. This applies to any field that uses the HTML text editor.
Image dimensions and considerations
- This content type can accommodate a wide range of image sizes and orientations, but the images will be re-sized to fit the layout. Most photos will be limited to 450px wide.
- See Working with Images for more information
Review the following detail sections:
-
Review Working with Images for information on file naming, sizing, and more.
To upload your image:
- In the HTML editor, click where you’d like the top of your picture to appear.
- This may involve some trial and error. Simply Edit the page again and select and delete the image if you decide you want to move it. You will be able to select the same image from the media library without uploading a new one.
- Click the Insert from Media Library button (picture+music note icon) in your editing toolbar.
- Click the Choose Files button at the top to upload your image.
- Add Alternative text: A simple approach to writing alt text is to write a sentence as if you were describing the image to someone on the phone. The description doesn't have to be long or overly detailed, but it's helpful if it explains how it relates to the rest of the content on the page.
- Click Upload, then once your upload is complete click Next.
- Click Save to add the image to the Media Library, then click Insert Selected to insert it onto your page.
- In the HTML editor, click where you’d like the top of your picture to appear.
-
With new components available, it's highly recommended to embed videos with Featured Media - 1 column or Media Cards, for a smooth experience where you're only required to paste in the URL. To embed a full-width video into the WYSIWYG editor, do the following:
- Open up YouTube* in another tab and go to your video; click Share under its title and then Embed. Copy the embed code.
- Click the Source button on the right side of the editor toolbar
- Paste the embed code where you need it to be on the page. This will require enough knowledge of HTML to find the appropriate placement.
- Click the Source button again to return to the WYSIWYG display and save the page.
*If your video is not uploaded to a Rush YouTube channel, please contact Marketing to have this done.
-
- Click the Table (grid) button in the editor toolbar,
- You will be presented with a dialog box to set your table options. Set the number of rows and columns you want for your table and any header options, at minimum choose 'First row' since all tables should have named columns. Delete the values for width, border, cell padding and cell spacing. If you need alternating row colors for readability, use the CSS class drop-down at the bottom to select 'alternating-row'. Once this is complete, click OK to embed the table.
- Populate your table with data. Important: If you are pasting content into your table from another program or document, you must follow the same steps to clean the text of unwanted formatting that you take any other time you paste text. See Text Styles below for more details.
- Your table should now be styled like a standard Rush responsive table. It should also include the mobile shadow and horizontal scrolling functionality.
See Tables for more information.
-
- Save your documents to your Desktop (or the appropriate folder) with the following naming convention: lowercase-name-with-hyphens … If these change yearly, add the year associated with them as well, so lowercase-name-with-hyphens-2016.
- Log into Drupal and in the menu navigate to Content > Media > Add media item > Document or click Add Media in the top-right of the Media Library page and select Document.
- Click the Choose File button and select the document(s) from your computer.
- Once the upload is complete, click Save.
- Open the document from the media library, right-click on the link and copy the link address (the specific wording may vary based on your browser)
- Test out the link in the address bar of your browser to make sure that it works.
- Add the text that you want to act as a link to the document. Highlight that link text, click the link (chain) button and paste in the document URL from the previous step.
- Save the link.
Text Styles
- Add your text in the Body field. Important: If you are copying and pasting pre-written text from another source such as an email or Word, you must take steps to clean the text or you will introduce unwanted formatting from the original source. You have two options:
- Use a tool like HTML Cleaner to remove unwanted styles and HTML attributes. This will retain many HTML tags such as headings, links, and lists.
- Paste with Ctrl-Shift-V will paste as plain text, removing any additional styling and all HTML tags.
A few useful text styles for your content include:
Lead content: An introductory paragraph with the Lead style can make a bold statement or highlight a primary idea. This helps to set it apart from the normal copy.
Blockquotes: Blockquotes can give a visual enhancement to quoted material to help it stand out from other content on the page.
Tables
- Tables show tabular data in columns and rows. The tables have been created to work on a responsive level by adding side scrolling when columns do not fit within the width of the screen.
- Although sometimes useful for structuring and styling pages, tables should only be used for displaying data where there is a relationship between the row/column headers and the content.
- If using the table tool in the menu remove the padding, border, and width attributes to use the built in styles and ensure it works properly on mobile devices
- Tables should always utilize a header row for accessibility and correct styling.
Resident | Bio |
---|---|
Image
Bob, MD |
Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus. |
Image
Betty, MD |
Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus. |
Image
Sam, MD |
Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus. |
Image
Sally, MD |
Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus. |
Alternating Rows
Alternate color rows can be helpful for visually differentiating table rows from each other. This can be enabled in two different ways depending on if you're editing an existing table or creating a new one:
- select the whole table, in the styles drop-down change the style to 'Alternating rows'
- When creating a table with the editor, in the CSS Class drop-down select 'alternating-row'
Column title | Column title 2 | Column title 3 | Column title 4 |
---|---|---|---|
1 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
3 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
7 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
12 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
4 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
23 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
6 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
9 Column title | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato | Column data lorem ipsum dolor sit amet calculato |
Button links
Buttons are links with a specific style applied to them. After adding a link, use the Styles drop-down to select the appropriate button. This won't render in the editor itself, check that it is applied correctly when you preview the page.
Images
Images can be uploaded and embedded with the Insert from Media Library tool. Once added double-click the image to change its alignment on the page with respect to the text. Image captions are not currently working properly.
When aligning images the top of the image will be aligned with where you place the image. If you're trying to place an image to align with a paragraph, place your cursor at the beginning of the paragraph before inserting the image.
This content type can accommodate a wide range of image sizes and orientations, but the images will be re-sized to fit the layout. Most photos will be limited to 450px wide.
Advanced/Custom HTML Code
Currently columns can only be added through the source code. You will need some familiarity with HTML to implement this properly.
2 columns
<div class="grid">
<div class="grid__item grid__item--2">
[content]
</div>
<div class="grid__item grid__item--2">
[content]
</div>
</div>
3 columns
<div class="grid">
<div class="grid__item grid__item--3">
[content]
</div>
<div class="grid__item grid__item--3">
[content]
</div>
<div class="grid__item grid__item--3">
[content]
</div>
</div>