Skip to main content
School of Medicine IT Web Guide

Half Image

Creating A Half Image

Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.

  1. Determine where the Cell will be used.
  2. In the Dashboard, select Cells in either the top or left-hand navigation.
  3. Select the Add New button.
  4. Cell Name: provide a descriptive name so site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.
  5. Layout: Single Blocks
  6. Block Category: Image Blocks
  7. Block Style: Half Image
  8. Cell Header: this is the main text header.
  9. Cell Text: this is the description within the block. Provide additional information related to the header.
  10. Media Type:  allows you to display either an image or a video in the cell.
    1. Image: Because the cell layout is responsive, parts of the image may be cropped depending on screen size. View the Image documentation for information on where to find images, recommended image size and more.
    2. Video:
      1. Only videos hosted on Panopto or YouTube are supported. Videos hosted on other platforms (such as Vimeo) will not display correctly.
      2. Ensure the video is captioned to meet accessibility requirements.
      3. For accessibility, the video embed code must include a title attribute. Some platforms (such as YouTube) include a title attribute by default while others (such as Panopto) do not.
        1. If a title attribute is present, update it with a clear, descriptive title of the video.
        2. If it is not present, you must add one manually.
        3. Insert: title="Add your descriptive title here" inside the embed code. Replace the placeholder text with a title that accurately describes the video’s content. Example embed code can be found on our Video documentation.
  11. Image Horizontal and Vertical Alignment – The image in this cell is designed to fill the entire background of its container without leaving any empty space. However, if the aspect ratio of the container and the image do not match, parts of the image might get cut off or clipped. To control which parts of the image stay visible, you can adjust how the image is positioned within its container. This allows you to decide which parts of the image are most important to display without clipping.
    • The smaller dimension of the image (width or height) will fill the container 100% and excess of the larger dimension will likely experience some cropping.
    • In most cases Left and Right alignment has no effect on images using a portrait ratio. Likewise, Top and Bottom alignment has no effect on images using a Landscape ratio.
  12. Sticker Text and Link: Allows you to display a small banner in the upper corner of your background image.
    • Text Limit: The sticker text is restricted to 40 characters. This limit helps ensure that the sticker remains clear and uncluttered, especially on smaller screens.
    • Link Option: You can add a hyperlink to the sticker, making it possible to direct users to additional content or external sites.
    • Media Type Compatibility: The Sticker feature is only available when the “Image” media type is selected. It is not supported for video media types.
  13. Add Button: adds a button below the Cell Text.
  14. Add Custom Menu: allows you to add a stylized menu of links.
    1. Custom Menu Title: this optional header displays above the menu
    2. Custom Menu ID: Add the menu number to this field. See below for more details.
  15. Layout Options
    1. Image Width Percent (%): controls how much of the banner is dedicated to displaying the image. The remainder will display the text. For example, If you set the Image Width Percent to 60%, then 60% of the banner will display the image and the remaining 40% will display the text content.
    2. Image Minimum Height (px): by default the minimum height is set to 350 pixels. However, the height will grow to accommodate lengthy content. This setting is useful for two things:
      1. Set this above 350px to increase the height of a banner with minimal content.
      2. This setting is useful to control the height of the image on mobile devices where the image stacks above the text (rather than side-by-side). You can resize your browser window (really thin) to see what this looks like.
      3. Setting the Image Minimum Height to 0 (zero) will hide the image on small screens.
      4. Tip: at smaller screen sizes (like mobile devices), where the image stacks above the text, the image sometimes gets cropped in undesirable ways. There are two ways to combat this:
        1. Try increasing the Image Minimum Height (set it above 350px) and/or modify the Image Horizontal and Vertical Alignment. Be careful how much you increase the Image Minimum Height. Increasing it too much might make the image too large for small screens.
        2. Set the Image Minimum Height to 0 (zero). This will hide the image on small screen sizes and may present a cleaner layout without cropping issues.
    3. Text Alignment: choose your preference. These options impact both the Cell Header text and Cell Content text.
    4. Add Title Accent Underline: selecting Yes will add a small yellow bar below the Cell Header. This option does not work when the Text Alignment is set to Center.
    5. Image Right: by default, the image (or video) will display on the left side of the banner. Selecting this option will display it on the right side.
  16. Click the Create Cell button.
  17. If you’re ready, you can display the Cell on your website.

 

Adding a Custom Menu

Screenshot showing the WordPress interface where you create or edit menus.You’ll need to create the custom menu before it can be placed in a Cell. Note that only Site Administrators can create or edit menus.

  1. In the dashboard, go to Appearance > Menus.
  2. Select the create a new menu link.
  3. Give the menu a meaningful name.
  4. Add items to your menu. The two most common items to add is Pages and Custom Links.
    1. Pages – add a check next to the page(s) you wish to add to the menu then click the Add to Menu button.
    2. Custom Links – provide the link text and url then click the Add to Menu button. This option can be used to add both internal and external links.
    3. Reorder Links – links will be listed in the order they were added. Simply drag and drop to reorder them.
  5. Click the Create Menu button.
  6. Just after creating the menu, look at the page url. The end of the url will say menu=. Whatever number follows is the number that gets added to the Custom Menu ID field when creating the cell.