Mosaics

Below is some documentation on adding and editing mosaics, as well as how to attach them to a Program or About page. As part of this is also instructions on adding a quote and a cheat-sheet for the anchor links (for Mosaic Position 5).I understand this is quite lengthy, but a lot of it is repetitive/similar as it steps through each piece of the mosaic individually. We recommend going over the documentation at the same time as looking at one of the existing examples (both in the WordPress back-end and live on the site) so you can see how it all works in practice while reading along.


CREATING/EDITING MOSAICS

Mosaics are the photo grids on Program Pages as well as the About page. It consists of a handful of images, as well as a quote. The images chosen should aim to show off multiple aspects of each program. For example, SpringboardNYC would ideally show learning/workshops as well as the fun extracurriculars, like exploring NYC.
For image sizes, please refer to the Image Guidelines doc or the photoshop templates.
  1. Navigate to Components > Mosaics and click Add New Mosaic or hover over + New in the toolbar and click Mosaic.
  • Alternatively, edit an existing Mosaic.
  • Enter the title of the Mosaic. Be descriptive.
  • Position 1 is the upper left image. This is the primary image for the mosaic, and is the only image displayed in the phone view so is the most important. It is an image with an optional caption.
  1. For an image:
    1. Click Add Image to upload an image or select one from the media library.
    2. Make sure None is selected for Link Type.
    3. Click Publish or Update.
  2. For an image with a caption:
    1. Click Add Image to upload an image or select one from the media library.
    2. Add an image caption in the title field; keep it as short as possible.
    3. Make sure None is selected for Link Type.
    4. Click Publish or Update.
  3. Optional: To make this image a link, select a Link Type:
  • No Link: For this to be simply an image (no link), leave Link Type as none.
  • Internal Links are for content on americantheatrewing.org. Use the Post Type and Link dropdowns to find the content you’d like to link to.
  • External Links are for content outside americantheatrewing.org (such as the application portal, the Tonys site, etc). Enter the link URL in the Link field.
  • Click Publish or Update
  • Position 2 is the upper right image. This could be either an image with an optional caption or an article block:
  1. For an image:
    1. Click Add Image to upload an image or select one from the media library.
    2. Make sure None is selected for Link Type.
    3. Click Publish or Update.
  2. For an image with caption
    1. Click Add Image to upload an image or select one from the media library.
    2. Add a caption in the Title Field; keep it as short as possible.
    3. Make sure None is selected for Link Type.
    4. Click Publish or Update.
  3. For an Article Block:
    1. Click Add Image to upload an image or select one from the media library.
    2. Add the Article Title in the Title Field.
    3. Under Link Type, select Internal.
    4. Under the Post Type and Link dropdowns, navigate through the appropriate options to select the article (or video) you’d like to link to.
    5. Click Publish or Update.
  • Position 3 is the quote in the bottom left corner.
  1. Make sure the quote you’d like to use is already in the CMS.
    1. Quotes are created in Components > Quotes. See below for instructions on adding a quote.
  2. Select the Quote you’d like to use from the Quote Dropdown.
  3. Click Publish or Update.
  • Position 4 is the bottom middle image. This is an image with an optional caption.
  1. For an image:
    1. Click Add Image to upload an image or select one from the media library.
    2. Make sure None is selected for Link Type.
    3. Click Publish or Update.
  2. For an image with a caption:
    1. Click Add Image to upload an image or select one from the media library.
    2. Add an image caption in the title field; keep it as short as possible.
    3. Make sure None is selected for Link Type.
    4. Click Publish or Update.
  3. Optional: To make this image a link, select a Link Type:
  • No Link: For this to be simply an image (no link), leave Link Type as none.
  • Internal Links are for content on americantheatrewing.org. Use the Post Type and Link dropdowns to find the content you’d like to link to.
  • External Links are for content outside americantheatrewing.org (such as the application portal, the Tonys site, etc). Enter the link URL in the Link field.
  • Click Publish or Update
  • Position 5 is an image, an image with a caption, or a call-to-action with a link (similar to spotlights).
  1. For an image:
    1. Click Add Image to upload an image or select one from the media library.
    2. Make sure None is selected for Link Type.
    3. Click Publish or Update.
  2. For an image with a caption:
    1. Click Add Image to upload an image or select one from the media library.
    2. Add an image caption in the title field; keep it as short as possible.
    3. Make sure None is selected for Link Type.
    4. Click Publish or Update.
  3. For a Call-to-Action (ex: Donate Now, Contact Us, Learn More, etc; these are similar to spotlights).
    1. Click Add Image to upload an image or select one from the media library.
  • Note: Use the PSD template for this image to get the purple to gold gradient overlay. This is important to ensure the text will be readable over the image.
  • In the Title field, enter the primary spotlight language; keep it short.
  • In the Call to Action Title field, enter short call-to-action (see examples above).
  • Select the appropriate Link Type:
  • Internal Links are for content on americantheatrewing.org. Use the Post Type and Link dropdowns to find the content you’d like to link to. (i.e. the Donate page).
  • External Links are for content outside americantheatrewing.org (such as the application portal, the Tonys site, etc). Enter the link URL in the Link field.
  • In Page links scroll the user down the page a specific section on the current page. A list of the possibilities are below. In the Anchor field, enter the Anchor Link (see below for a cheat sheet of these).
  • Click Publish or Update.

TO ATTACH A MOSAIC TO A PROGRAM/ABOUT:
  1. Navigate to ATW > Programs or Pages > About, and click into edit the page.
  2. In the primary column, locate the Mosaic section.
  3. Select the appropriate mosaic from the drop-down.
  4. Click Publish or Update.

ADDING QUOTES

To add a quote:
  1. Navigate to Components > Quotes and click Add New Quote or hover over + New in the toolbar and click Quote.
  2. Enter the source of the quote in the Source field. This is most often a person’s name.
  3. Enter the quote in the Quote field (recommended 200 characters or less).
  4. Optional: In the Known For field, add what the quote’s source is known for. Examples include SpringboardNYC alum, Founder of the American Theatre Wing, etc. This step is optional
  5. Click Publish

CHEAT SHEET: Anchors for in-page links
These directly relate to the sections of content on the current page. Be sure this section exists on the page before linking to it, otherwise the link won’t go anywhere.
  • About: #about
  • Past Recipients: #past-recipients
  • Guidelines: #guidelines
  • Apply; #apply
  • The Program: #the-program
  • Internship Fair: #internship-fair
  • Apply: #apply
  • Events: #events
  • FAQ: #faq
  • Contact Us: #contact
  • Support: #support
  • History: #history
  • Press: #press-releases
  • Board of Trustees: #board-of-trustees
  • Advisory Committee: #advisory-committee
  • Staff: #atw-staff

« Return to American Theatre Wing Docs Index