Digital Experience Studio > Website Technology > Content Hub > Content Hub Operations > Workflows >

Load Text

Load Text

Once the Word document version of the content has been finalized and approved in Content Hub Ops, the next step is to transfer the content into Content Hub’s data fields. This step ensures that the story is structured properly for publication and can be enriched with metadata and media.

Authors should copy and paste the final version of the story from the Word document into the appropriate fields on the left side of the content details page. The available fields vary depending on the content sub-type and content template, but can include single-line text boxes, multi-line rich text editor (RTE) boxes, in-line components (including quote, photo carousel or in-line image), a hero image, thumbnail image and an open graph image.

To view a sample of a fully loaded content item, view the “Loaded Text Example page.”

While loading the story, make sure to click the “Save” button regularly to avoid losing progress. Content changes do not save automatically.

In-Line Components on MSUToday

Some templates allow for including an in-line component below the first text box rich text editor (RTE) field. An in-line component is a reference to another content item of a specific type, such as Carousel, Quote or In-line Image, that is rendered in MSUToday in a special way. 

When loading a story layout, content authors can, where available, load an existing in-line component or create a new in-line component. See “Add an In-Line Component,” below, for more information. Content authors are required to first create and publish their Quotes, Carousels (including the Carousel Cards) and Images before publishing their full story.

Note: When working on a story that includes In-line Components, such as Carousels, Quotes or In-line Images, make sure to always publish the components prior to publishing the whole story to MSUToday. Otherwise, the content author will have to repeat the publishing workflow for the story to include all in-line components within.

Loading the Content

At this stage, all text is copied over from the Word document and all related assets, such as images or media, should be added to the content item. Assets must be loaded into the Content Hub DAM first and then linked to the content item by selecting them through the “Insert Image” action in a rich text editor field. 

Follow the instructions below to complete the necessary field(s) for the content item.

Instructions: 

  1. Click in the Add text box under the Headline field.
  2. Add text. 

Best practices: 

  • All story content items must have a headline.
  • The headline appears at the top of the content story page on MSUToday, above a hero banner (if present). It also appears below the content thumbnail image on a listing page.
  • Headlines should be 60 characters or fewer for search engine optimization and MSUToday design standards.
  • Authors may use a longer headline for other platforms, such as Cision.
  • If a longer headline is required, utilize the subhead field.
  • Use active voice, clarity, avoid jargon, avoid stuffing keywords unnaturally.
  • Use sentence case or AP style capitalization and minimal punctuation for clarity.
A screenshot of a website story. At the top left:
Fig. 1: This is what a headline component with a hero banner looks like on a live story page.
A screenshot of a website story. At the top left:
Fig. 2: This is what a headline component without a hero banner looks like on a live story page.

Instructions: 

  1. Click in the Add text box under the Subhead field.
  2. Add text. 

Best practices: 

  • Subheads are optional.
A screenshot of a website story. At the top left:
Fig. 3: This is what a subhead with a hero banner looks like on a live story page.

Instructions: 

  1. Click in the Add text box under the Headline field.
  2. Add text. 

Note: This is a rich text component, meaning text formatting is available. Click the three vertical dots icon at the right end of the toolbar to open a menu with additional formatting options, including bulleted lists.

Best practices: 

  • The summary field is optional. If a summary is included, it will appear at the top of the story, below a hero banner (if present), with a shaded background and a “Summary” header.
  • University Communications and Marketing’s user experience research and optimization testing has shown that including a summary on longer stories can improve read rates.
  • Avoid use of images in the summary.
  • UCAM recommends a summary include 2-5 concise bullet points written in plain language to address story highlights, relevance, impact and key takeaways.
  • Use summaries for feature stories, long-form content stories and research stories.
A screenshot of a website story. At the top left:
Fig. 4: This is what a summary field looks like on a live story page.

Text boxes are rich text components, meaning formatting is available. These boxes can also include images, videos and podcast embeds (see below for more information). 

Some template layouts include one text box, while others include two text boxes with an in-line component placeholder between. The latter layout allows for including an additional content item, such as an in-line image, carousel or quote, between two blocks of text. Only one in-line component can be used within these templates. 

Instructions: 

  1. Click in the “Add text” box under the Headline field.
  2. Add text, formatting and additional content, as desired. See additional tabs below for information on working with media.
A screenshot of a toolbar with icons (left to right): A curved arrow pointing left; a curved arrow pointing right; a dropdown menu with a label reading
Fig. 5: The rich text formatting menu in the text box enables the following features (left to right): undo the immediate past action; redo the action; apply a formatting class (Paragraph, H2 through H6); comment (for internal use only); insert asset (use to insert an image from Content Hub DAM); insert media (use to insert a video URL); change text size; change font; bold; italics; more options.
A screenshot of a toolbar with two rows of icons. Top row, left to right: an underline icon (
Fig. 6: The more options menu adds additional formatting options. Top row, left to right: underline; remove formatting; change font color; change text background color; highlight text; change text alignment; decrease indent; increase indent; create a numbered list. Bottom row, left to right: create a bulleted list; insert a link; apply block quote formatting (different than an in-line quote); strikethrough text; insert HTML code (to embed HTML); add subscript text; add superscript text; insert a table; insert a code block.

Best practices: 

  • It is up to the content author to ensure that all content meets accessibility standards. Use caution when applying styling, including font and background colors.
  • Use formatting classes (paragraph, H2, H3, etc.) to apply section formatting to text, to break up the content and for ease of scanning.
    • Use H2 subheadings to break the story into distinct sections.
    • Use H3 subheadings within H2 sections to delve into more specific details or subtopics.
    • Use subheads every 200-300 words or 2-4 paragraphs to help break up the story.
  • Do not apply an H1 class to any text. The headline field includes an H1 tag and adding additional H1 tags will cause accessibility issues. 

Instructions: 

  1. In the text box field, place the cursor in the desired image location and click Insert Asset icon on the rich text toolbar.
  2. Locate the asset required for the story and click Select under the image thumbnail. Assets must have previously been uploaded and approved in the Content Hub DAM prior to including in a story.
  3. If a public link already exists with the crop dimensions needed:
    1. The available public link(s) will be displayed in a list.
    2. Locate the appropriate link (look for the component rendering name in the link label).
    3. Click the Select button next to the link.
  4. If no public link exists with the crop dimensions needed:
    1. Click “+ Public Link.”
    2. Select WebP from the list of renditions.
    3. Select Manual crop from the list of crop options.
    4. Select the desired image dimensions from the available list of preset sizes.
    5. Add a prefix at the beginning of the URL path to indicate the selected preset, making this link recognizable for later use.
    6. Optional: Click and drag the lightbox to reposition the cropping.
    7. Click Save.
    8. Wait for the system to generate the public link based on the crop.
    9. Click Select.
    10. Optional: Click on the image to open a panel with options to adjust the alignment of the image to be left, center or right aligned. Add a caption in the Media Caption text field.

See "Creating Public Links" for more information, including screenshots, regarding building public image links.

Best practices: 

  • Double check the image using the preview link during the pre-publishing stage to confirm there are no cropping or pixelation issues.
A block of text appears on the left, with an image of a man wearing a green shirt standing in a field in front of solar panels on the right.
Fig. 7: This is what a right-aligned image looks like on a live story page.
A photo of a woman wearing a brown short sleeve shirt and sitting in front of some trees is on the left. On the right is a block of text.
Fig. 8: This is what a left-aligned image looks like on a live story page. 

Tip: It can be challenging to work with text and code within the same text box. Create the content that will come before and after the podcast first and embed the podcast code after the text is in place. 

Instructions: 

  1. In another tab or window, locate the podcast episode to be included in the content item. Locate and copy the embed code from the podcast host site.
  2. Return to the content item details page in Content Hub.
  3. In the text box field, position the cursor where the podcast should be embedded.
  4. Click the More options icon on the right side of the rich text formatting menu.
  5. Click Code.
  6. Use the keyboard command or right click on the mouse to paste the podcast embed code in the text box where the podcast should appear. 

Best practices: 

  • For accessibility, all podcasts should have episode notes and transcripts available.
  • Double check the podcast during preview to confirm there are no display or function issues.
A screenshot of a story page with a podcast player embeded on it, followed by story text.
Fig. 9: This is what a podcast embed looks like on a live story page.

Instructions: 

  1. In another tab or window, locate the video to be included in the content item. Copy the video URL.

  2. Return to the content item details page in Content Hub.
  3. In the text box field, position the cursor where the video should be embedded.
  4. Click the Insert media icon on the the rich text formatting menu.
  5. Paste the URL in the box. Click the checkmark icon to save.

Best practices: 

  • All videos shared must have captioning available to meet accessibility standards. Captions can either be burned into the video or uploaded to the video hosting platform (e.g., an SRT file).
  • All videos should have a proper thumbnail selected in the hosting platform.
  • Double check the video during preview to confirm there are no display or function issues.

Tip: To easily add space before or after the video, making it possible to continue adding text, hover over the video image until a blue or yellow arrow appears. Click the arrow to add a blank line above or below the video.

A video thumbnail showing a bus painted with MSU branding, with a red YouTube play icon superimposed on the image. The thumbnail is outlined in yellow with icons at the top and bottom to add space above or below, respectively.
Fig. 10: The yellow arrows shown here will add space above or below the video, making it easier to insert a cursor to add additional text.
A video thumbnail image between two blocks of text. The image shows solar panels in a field. A white Spartan helmet and white bold text reading
Fig. 11: This is what a video embed looks like on a live story page.

Instructions: 

  1. Click the “+ Add” button in the In-Line Component section.
  2. To create a new Quote, Carousel or Image component:
    1. Click “+ Add Content” from the drop-down menu.
    2. Enter a name for the content item.
    3. Click the “+” icon to open the selection options for the Content Template.
    4. Choose a Content Template and click Save.
    5. Click Save on the Content creation panel.
    6. The content item will appear in the layout, and the content item will be assigned to the content author. Clicking on the content item will open it in a new tab. Follow the content creation process to draft, review, edit and approve the content outside of Content Hub, and create and publish the component within Content Hub before publishing the story. Expand the tabs below for additional information on creating Quote, Carousel and In-Line Image components.
  3. To add an existing Quote, Carousel or Image component:
    1. Click “+ Add existing items” from the drop-down menu.
    2. Check the box in the corner of the desired content item from the list of available options to add to the selection.
    3. Click Add button.
  4. To remove an in-line component from the layout, click the circle with minus sign icon in the corner of the component. Click Remove to confirm.

Instructions: 

  1. Click the "+ Add" button in the In-Line Component section.
  2. Click “+ Add Content” from the drop-down menu.
  3. Enter a name for the content item.
  4. Click the “+” icon to open the selection options for the Content Template.
  5. Choose the Quote content template and click Save.
  6. Click Save on the Content creation panel. The component now appears in the story layout, marked as in the “In Progress” state.
  7. Click on the component to open the component’s content item details page in a new tab.
  8. Click in the “Add text” section under Quote and enter the quotation.
  9. Click in the “Add text” section under Author and enter the author’s name.
  10. Optional: Add an image.
    1. Click in the “Add text” section under Image to add an image.
    2. Click the Insert Asset icon on the rich text toolbar.
    3. Locate the asset required for the story and click Select under the image thumbnail.
    4. If a public link already exists with the crop dimensions needed:
      1. The available public link(s) will be displayed in a list.
      2. Locate the appropriate link (look for the component preset name in the link label).
      3. Click the Select button next to the link.
    5. If no public link exists with the crop dimensions needed:
      1. Click “+ Public Link.”
      2. Select WebP from the list of renditions.
      3. Select Manual crop from the list of crop options.
      4. Select the desired image dimensions from the available list of preset sizes.
      5. Add a prefix to the URL path to indicate the preset type, making this link recognizable for later use.
      6. Optional: Click and drag the lightbox to reposition the cropping.
      7. Click Save.
      8. Wait for the system to generate the public link based on the crop.
      9. Click Select.
  11. Click Save.
  12. Click Finalize.

Best practices: 

  • Quotation marks should be “smart quotes.”
  • Use good judgement when including lengthy quotes in an in-line quote component. 

Tip: Carousels are made up of cards. Building a carousel card nested within a carousel nested within a story layout can get confusing when the user interface is similar for all. Refer to the label at the top of the content item details page to confirm what content item (i.e., card, carousel or story) is being edited and save often.

Instructions: 

  1. Click the "+ Add" button in the In-Line Component section.
  2. Click “+ Add Content” from the drop-down menu.
  3. Enter a name for the content item.
  4. Click the “+” icon to open the selection options for the Content Template.
  5. Choose the Carousel content template and click Save.
  6. Click Save on the Content creation panel. The component now appears in the story layout, marked as in the “In Progress” state.
  7. Click on the component to open the component’s content item details page in a new tab.

Note: The Carousel Headline and Carousel Description fields do not appear in a live story on MSUToday. These fields are optional. 

  1. Add at least one and no more than 20 carousel cards:
    1. Click “+ Add.”
    2. Click Content.
    3. Enter a name for the carousel card.
    4. Click the “+” icon to open the Content Template selection panel.
    5. Choose Carousel Card and click Save.
    6. Click Save.
    7. Repeat, as needed, for each card.
  2. Add content to the carousel card(s).
    1. Click on a Carousel Card item to open it in a new tab.
    2. Optional: Click in the “Add text” section under Card Headline and enter text to add a caption for the asset.
    3. Click in the “Add text” section under Card Image to add an image to the card.
    4. Click the Insert Asset icon on the rich text toolbar.
    5. Locate the asset required for the story and click Select under the image thumbnail.
    6. If a public link already exists with the crop dimensions needed:
      1. The available public link(s) will be displayed in a list.
      2. Locate the appropriate link (look for the component rendering name in the link label).
      3. Click the Select button next to the link.
    7. If no public link exists with the crop dimensions needed:
      1. Click “+ Public Link.”
      2. Select WebP from the list of renditions.
      3. Select Manual crop from the list of crop options.
      4. Select the desired image dimensions.
      5. Add a prefix to the URL path to indicate the rendition and crop, making this link recognizable for later use.
      6. Optional: Click and drag the lightbox to reposition the cropping.
      7. Click Save.
      8. Wait for the system to generate the public link based on the crop.
      9. Click Select.
    8. Click Save.
    9. Click Finalize.
  3. Return to the carousel content item details page.
  4. Click Save.
  5. Click Finalize.
  6. Return to the story page.

Best practices: 

  • A carousel is typically more than one image. If using only one image, consider an in-line image component instead.
  • Double check all the images in the carousel during preview to ensure there are no cropping or pixelation issues.
A block of text is followed by in image slider with arrows to the left and right to change the visible image. The image shown is of bare branched trees in front of a field of green grass.
Fig. 12: This is what a carousel in-line component looks like on a live story page.

See "Creating Public Links" for more information, including screenshots, regarding building public image links.

Instructions: 

  1. Click the "+ Add" button in the In-Line Component section
  2. Click “+ Add Content” from the drop-down menu.
  3. Enter a name for the content item.
  4. Click the “+” icon to open the selection options for the Content Template.
  5. Choose the In-Line Image content template and click Save.
  6. Click Save on the Content creation panel. The component now appears in the story layout, marked as in the “In Progress” state.
  7. Click on the component to open the component’s content item details page in a new tab.
  8. Click in the “Add text” section under In-Line Image to add an image.
  9. Click the Insert Asset icon on the rich text toolbar.
  10. Locate the asset required for the story and click Select under the image thumbnail.
  11. If a public link already exists with the crop dimensions needed:
    1. The available public link(s) will be displayed in a list.
    2. Locate the appropriate link (look for the component rendering name in the link label).
    3. Click the Select button next to the link.
  12. If no public link exists with the crop dimensions needed:
    1. Click “+ Public Link.”
    2. Select WebP from the list of renditions.
    3. Select Manual crop from the list of crop options.
    4. Select the desired image dimensions.
    5. Add a prefix to the URL path to indicate the rendition and crop, making this link recognizable for later use.
    6. Optional: Click and drag the lightbox to reposition the cropping.
    7. Click Save.
    8. Wait for the system to generate the public link based on the crop.
    9. Click Select.
  13. Click Save.
  14. Click Finalize.

Best practices: 

  • Choose an image with a horizontal orientation for best effect.
  • Double check the image during preview to confirm there are no cropping or pixelation issues.

See "Creating Public Links" for more information, including screenshots, regarding building public image links.

Instructions: 

  1. Click in the “Add text” section under Hero Image to add an image.
  2. Click the Insert Asset icon on the rich text toolbar.
  3. Locate the asset required for the story and click Select under the image thumbnail.
  4. If a public link already exists with the crop dimensions needed:
    1. The available public link(s) will be displayed in a list.
    2. Locate the appropriate link (look for the component rendering name in the link label).
    3. Click the Select button next to the link.
  5. If no public link exists with the crop dimensions needed:
    1. Click “+ Public Link.”
    2. Select WebP from the list of renditions.
    3. Select Manual crop from the list of crop options.
    4. Select the desired Hero dimensions, MSU Story Hero – Standard Wide (2000 x 800px).
    5. Add story-hero to the beginning of the URL path to indicate the rendition and crop, making this link recognizable for later use.
    6. Optional: Click and drag the lightbox to reposition the cropping.
    7. Click Save.
    8. Wait for the system to generate the public link based on the crop.
    9. Click Select.

Best practices: 

  • Use an appropriately sized image for a hero banner.
  • Do not select MSU Homepage - Large Hero Banner, MSU Secondary page - Small Hero Banner, or MSU Secondary page Extra Small Hero Banner.
  • When creating new public links, be sure to include story-hero in the link title.
  • Do not add a media caption. Hero images do not use captions.

While this field is a rich text component, it should only be used to add an image. Any text added here will not appear on the live MSUToday story. The layout mapping expects only a single image in this field and ignores anything else.

See "Creating Public Links" for more information, including screenshots, regarding building public image links.

Instructions: 

  1. Click in the “Add text” section under Thumbnail Image to add an image.
  2. Click the Insert Asset icon on the rich text toolbar.
  3. Locate the asset required for the story and click Select under the image thumbnail.
  4. If a public link already exists with the crop dimensions needed:
    1. The available public link(s) will be displayed in a list.
    2. Locate the appropriate link (look for the component rendering name in the link label).
    3. Click the Select button next to the link.
  5. If no public link exists with the crop dimensions needed:
    1. Click “+ Public Link.”
    2. Select WebP from the list of renditions.
    3. Select Manual crop from the list of crop options.
    4. Select the desired thumbnail dimensions, MSU Story Card – Thumbnail – Desktop (500 x 300px).
    5. Add story-thumbnail to the beginning of the URL path to indicate the rendition and crop, making this link recognizable for later use.
    6. Optional: Click and drag the lightbox to reposition the cropping.
    7. Click Save.
    8. Wait for the system to generate the public link based on the crop.
    9. Click Select.

Best practices: 

  • Use an appropriately sized image for a thumbnail. This image will appear on listing pages.
  • When creating new public links, be sure to include thumbnail in the link title.
  • Do not add a media caption. Thumbnail images do not use captions.
A small horizontal image of a sand dune and beach next to a large body of water spans the top of a rectangle. A small green box with white text reading
Fig. 13: This is what a thumbnail image looks like on a live listing page.

While this field is a rich text component, it should only be used to add an image. Any text added here will not appear on the live MSUToday story. The layout mapping expects only a single image in this field and ignores anything else.

See "Creating Public Links" for more information, including screenshots, regarding building public image links.

Instructions: 

  1. Click in the “Add text” section under Open Graph Image to add an image.
  2. Click the Insert Asset icon on the rich text toolbar.
  3. Locate the asset required for the story and click Select under the image thumbnail.
  4. If a public link already exists with the crop dimensions needed:
    1. The available public link(s) will be displayed in a list.
    2. Locate the appropriate link (look for the component rendering name in the link label).
    3. Click the Select button next to the link.
  5. If no public link exists with the crop dimensions needed:
    1. Click “+ Public Link.”
    2. Select WebP from the list of renditions.
    3. Select Manual crop from the list of crop options.
    4. Select the desired dimensions, MSU Story Card – Open Graph – Desktop (1200 x 630px).
    5. Add a prefix to the URL path to indicate the rendition and crop, making this link recognizable for later use.
    6. Optional: Click and drag the lightbox to reposition the cropping.
    7. Click Save.
    8. Wait for the system to generate the public link based on the crop.
    9. Click Select.

Best practices: 

  • Open graph images are what appear when a web page is shared on social media, via text message or appears in search engine results.
  • Users should always upload an open graph image to a story page. If no open graph image is present, the platform where a link is shared may pull in another image from the page, and that image may be an inappropriate match for the content being shared.
  • Use an appropriately sized image for an open graph image.
  • When creating new public links, be sure to include open graph in the link title.
  • Do not add a media caption. Open graph images do not use captions.

While this field is a rich text component, it should only be used to add an image. Any text added here will not appear on the live MSUToday story. The layout mapping expects only a single image in this field and ignores anything else.

See "Creating Public Links" for more information, including screenshots, regarding building public image links.

Prepare for Taxonomy Validation

After all content and media have been entered, the content author is ready to enter the next state: Validate Taxonomy. Click the Confirm Taxonomy button at the top right corner of the content item details page, indicating that the content item layout is final. All that is left is confirming metadata and preparing for publishing. 

On the left is bold text reading the content item name,
Fig. 14: The Confirm Taxonomy button has been marked in red.

 

 

Documentation updated: June 30, 2025

Is there an issue with this documentation? Report it here.

Content Hub Operations