Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

TheMedia Object Listcomponent allows you to display one or many left or right-aligned images alongside a title, label, text, and link.

Elements

  1. item

  2. item

  3. itemTitle (required, user can toggle visibility)

  4. Media Object Item - Title

  5. Media Object Item - Label

  6. Media Object Item - Body

  7. Media Object Item - Image

  8. Media Object Item - Call to Action

  9. Media Object Item - Layout

Examples

Aura html
paramsJTdCJTIyaHRtbENvZGUlMjIlM0ElMjIlM0NmaWVsZHNldCUyMGlkJTNEJTVDJTIyc3Rvcnlib29rLXRvZ2dsZXMlNUMlMjIlM0UlNUNuJTIwJTIwJTNDbGVnZW5kJTNFTWVkaWElMjBPYmplY3QlMjBMaXN0JTIwQ29tcG9uZW50JTNDJTJGbGVnZW5kJTNFJTVDbiUyMCUyMCUzQ2RpdiUzRSU1Q24lMjAlMjAlMjAlMjAlM0NpbnB1dCUyMHR5cGUlM0QlNUMlMjJyYWRpbyU1QyUyMiUyMGlkJTNEJTVDJTIyc3Rvcnlib29rLXRvZ2dsZXMtLWdvb2QlNUMlMjIlMjBuYW1lJTNEJTVDJTIyaW1wbGVtZW50YXRpb24lNUMlMjIlMjB2YWx1ZSUzRCU1QyUyMmdvb2QlNUMlMjIlMjBvbmNoYW5nZSUzRCU1QyUyMmhhbmRsZUNoYW5nZSh0aGlzKSUzQiU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjBjaGVja2VkJTIwJTJGJTNFJTVDbiUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwZm9yJTNEJTVDJTIyc3Rvcnlib29rLXRvZ2dsZXMtLWdvb2QlNUMlMjIlM0VJZGVhbCUzQyUyRmxhYmVsJTNFJTVDbiUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCU1QyUyMnJhZGlvJTVDJTIyJTIwaWQlM0QlNUMlMjJzdG9yeWJvb2stdG9nZ2xlcy0tYmFkJTVDJTIyJTIwbmFtZSUzRCU1QyUyMmltcGxlbWVudGF0aW9uJTVDJTIyJTIwdmFsdWUlM0QlNUMlMjJiYWQlNUMlMjIlMjBvbmNoYW5nZSUzRCU1QyUyMmhhbmRsZUNoYW5nZSh0aGlzKSUzQiU1QyUyMiUyMCUyRiUzRSU1Q24lMjAlMjAlMjAlMjAlM0NsYWJlbCUyMGZvciUzRCU1QyUyMnN0b3J5Ym9vay10b2dnbGVzLS1iYWQlNUMlMjIlM0VOZWVkcyUyMHdvcmslM0MlMkZsYWJlbCUzRSU1Q24lMjAlMjAlM0MlMkZkaXYlM0UlNUNuJTIwJTIwJTNDZGl2JTIwaWQlM0QlNUMlMjJ0b2dnbGUtYWJzdHJhY3QlNUMlMjIlM0UlNUNuJTIwJTIwJTIwJTIwJTNDdWwlMjBpZCUzRCU1QyUyMnRvZ2dsZS1hYnN0cmFjdC0tZ29vZCU1QyUyMiUyMHN0eWxlJTNEJTVDJTIyY29sb3IlM0ElMjBncmVlbiUzQiU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlM0NsaSUzRUltYWdlcyUyMGhhdmUlMjByZWNvbW1lbmRlZCUyMGRpbWVuc2lvbnMlM0MlMkZsaSUzRSU1Q24lMjAlMjAlMjAlMjAlM0MlMkZ1bCUzRSU1Q24lMjAlMjAlMjAlMjAlM0N1bCUyMGlkJTNEJTVDJTIydG9nZ2xlLWFic3RyYWN0LS1iYWQlNUMlMjIlMjBjbGFzcyUzRCU1QyUyMmhpZGRlbiU1QyUyMiUyMHN0eWxlJTNEJTVDJTIyY29sb3IlM0ElMjByZWQlM0IlNUMlMjIlM0UlNUNuJTNDbGklM0VJbWFnZXMlMjBhcmUlMjB0b28lMjBzbWFsbCUzQyUyRmxpJTNFJTVDbiUyMCUyMCUyMCUyMCUzQyUyRnVsJTNFJTVDbiU1Q24lMjAlMjAlM0MlMkZkaXYlM0UlNUNuJTNDJTJGZmllbGRzZXQlM0UlNUNuJTVDbiU1Q24lM0NpZnJhbWUlNUNuJTIwJTIwc3JjJTNEJTVDJTIyaHR0cHMlM0ElMkYlMkZzd2FydGhtb3JlLXdlYi5naXRodWIuaW8lMkZ3d3dfZDlfc3dhcnRobW9yZV90aGVtZSUyRmlmcmFtZS5odG1sJTNGaWQlM0Rjb21wb25lbnRzLW1lZGlhLW9iamVjdC0tbWVkaWEtb2JqZWN0JTI2dmlld01vZGUlM0RzdG9yeSU1QyUyMiU1Q24lMjAlMjBpZCUzRCU1QyUyMnN0b3J5Ym9vay1pZnJhbWUlNUMlMjIlMjB3aWR0aCUzRCU1QyUyMjEwMCUyNSU1QyUyMiUyMGhlaWdodCUzRCU1QyUyMjY1MHB4JTVDJTIyJTIwc3R5bGUlM0QlNUMlMjJib3JkZXIlM0ElMjAxcHglMjBzb2xpZCUyMGxpZ2h0Z3JheSUzQiU1QyUyMiUzRSUzQyUyRmlmcmFtZSUzRSUyMiUyQyUyMmNzc0NvZGUlMjIlM0ElMjJ1bCUyM3RvZ2dsZS1hYnN0cmFjdC0tZ29vZCUyMGxpJTIwJTdCJTVDbiUyMCUyMGxpc3Qtc3R5bGUtdHlwZSUzQSUyMCclRTIlOUMlOTQlRUYlQjglOEYnJTNCJTVDbiUyMCUyMHBhZGRpbmctaW5saW5lLXN0YXJ0JTNBJTIwMWNoJTNCJTVDbiUyMCUyMGNvbG9yJTNBJTIwdHJhbnNwYXJlbnQlM0IlMjAlMjAlNUNuJTIwJTIwdGV4dC1zaGFkb3clM0ElMjAwJTIwMCUyMDAlMjBncmVlbiUzQiU1Q24lN0QlNUNuJTVDbnVsJTIzdG9nZ2xlLWFic3RyYWN0LS1iYWQlMjBsaSUyMCU3QiU1Q24lMjAlMjBsaXN0LXN0eWxlLXR5cGUlM0ElMjAnJUUyJTlDJTk2JUVGJUI4JThGJyUzQiU1Q24lMjAlMjBwYWRkaW5nLWlubGluZS1zdGFydCUzQSUyMDFjaCUzQiU1Q24lMjAlMjBjb2xvciUzQSUyMHRyYW5zcGFyZW50JTNCJTIwJTIwJTVDbiUyMCUyMHRleHQtc2hhZG93JTNBJTIwMCUyMDAlMjAwJTIwcmVkJTNCJTVDbiU3RCU1Q24lNUNuZmllbGRzZXQlMjAlN0IlNUNuJTIwYm9yZGVyJTNBJTIwMXB4JTIwc29saWQlMjBsaWdodGdyYXklM0IlNUNuJTdEJTVDbiU1Q25sZWdlbmQlMjAlN0IlNUNuJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQSUyMHJnYigxODAlMkMlMjA0OSUyQyUyMDUzKSUzQiU1Q24lMjAlMjBjb2xvciUzQSUyMCUyM2ZmZiUzQiU1Q24lMjAlMjBwYWRkaW5nJTNBJTIwNnB4JTNCJTVDbiU3RCU1Q24lNUNuJTIzc3Rvcnlib29rLXRvZ2dsZXMlMjAlN0IlNUNuJTIwJTIwbWFyZ2luJTNBJTIwMnJlbSUzQiU1Q24lMjAlMjBmb250LWZhbWlseSUzQSUyMC1hcHBsZS1zeXN0ZW0lMkMlMjBCbGlua01hY1N5c3RlbUZvbnQlMkMlMjAlNUMlMjJTZWdvZSUyMFVJJTVDJTIyJTJDJTIwJTVDJTIyUm9ib3RvJTVDJTIyJTJDJTIwJTVDJTIyT3h5Z2VuJTVDJTIyJTJDJTIwJTVDJTIyVWJ1bnR1JTVDJTIyJTJDJTIwJTVDJTIyRmlyYSUyMFNhbnMlNUMlMjIlMkMlMjAlNUMlMjJEcm9pZCUyMFNhbnMlNUMlMjIlMkMlMjAlNUMlMjJIZWx2ZXRpY2ElMjBOZXVlJTVDJTIyJTJDJTIwc2Fucy1zZXJpZiUzQiU1Q24lN0QlNUNuJTVDbi5oaWRkZW4lMjAlN0IlNUNuJTIwJTIwZGlzcGxheSUzQSUyMG5vbmUlM0IlNUNuJTdEJTVDbiUyMiUyQyUyMmpzQ29kZSUyMiUzQSUyMmNvbnN0JTIwaWZyYW1lJTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3N0b3J5Ym9vay1pZnJhbWUnKSUzQiU1Q25jb25zdCUyMGdvb2RBYnN0cmFjdCUyMCUzRCUyMGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtYWJzdHJhY3QtLWdvb2QnKSUzQiU1Q25jb25zdCUyMGJhZEFic3RyYWN0JTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RvZ2dsZS1hYnN0cmFjdC0tYmFkJyklM0IlNUNuJTVDbmZ1bmN0aW9uJTIwZ2VuZXJhdGVJZnJhbWVTcmMocGFyYW1zKSUyMCU3QiU1Q24lMjAlMjBjb25zdCUyMCU3QiUyMHZhbHVlJTJDJTIwdHlwZSUyQyUyMGNoZWNrZWQlMkMlMjBjdXJyZW50U3JjJTIwJTdEJTIwJTNEJTIwcGFyYW1zJTNCJTVDbiU1Q24lMjAlMjBsZXQlMjB1cmwlMjAlM0QlMjBuZXclMjBVUkwoY3VycmVudFNyYyklM0IlNUNuJTIwJTIwbGV0JTIwYXJnc1N0cmluZyUyMCUzRCUyMHVybC5zZWFyY2hQYXJhbXMuZ2V0KCdhcmdzJyklMjAlN0MlN0MlMjAnJyUzQiU1Q24lMjAlMjBsZXQlMjBhcmdzJTIwJTNEJTIwbmV3JTIwTWFwKGFyZ3NTdHJpbmcuc3BsaXQoJyUzQicpLmZpbHRlcihCb29sZWFuKS5tYXAocGFyYW0lMjAlM0QlM0UlMjAlN0IlNUNuJTIwJTIwJTIwJTIwbGV0JTIwJTVCa2V5JTJDJTIwdmFsJTVEJTIwJTNEJTIwcGFyYW0uc3BsaXQoJyUzQScpJTNCJTVDbiUyMCUyMCUyMCUyMHJldHVybiUyMCU1QmtleSUyQyUyMHZhbCU1RCUzQiU1Q24lMjAlMjAlN0QpKSUzQiU1Q24lNUNuJTIwJTIwaWYlMjAodHlwZSUyMCUzRCUzRCUzRCUyMCdyYWRpbyclMjAlMjYlMjYlMjB2YWx1ZSUyMCUzRCUzRCUzRCUyMCdnb29kJyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwYXJncy5zZXQoJ2JhZEV4YW1wbGUnJTJDJTIwJ2ZhbHNlJyklM0IlNUNuJTIwJTIwJTdEJTIwZWxzZSUyMGlmJTIwKHR5cGUlMjAlM0QlM0QlM0QlMjAncmFkaW8nJTIwJTI2JTI2JTIwdmFsdWUlMjAlM0QlM0QlM0QlMjAnYmFkJyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwYXJncy5zZXQoJ2JhZEV4YW1wbGUnJTJDJTIwJ3RydWUnKSUzQiU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMGlmJTIwKHR5cGUlMjAlM0QlM0QlM0QlMjAnY2hlY2tib3gnJTIwJTI2JTI2JTIwdmFsdWUlMjAlM0QlM0QlM0QlMjAnbGF5b3V0JyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwaWYlMjAoY2hlY2tlZCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTIwJTIwYXJncy5zZXQoJ2xheW91dCclMkMlMjAnc3RhbmRhcmQtcmlnaHQnKSUzQiU1Q24lMjAlMjAlMjAlMjAlN0QlMjBlbHNlJTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMGFyZ3MuZGVsZXRlKCdsYXlvdXQnKSUzQiU1Q24lMjAlMjAlMjAlMjAlN0QlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAlMkYlMkYlMjBDb252ZXJ0JTIwYXJncyUyME1hcCUyMGJhY2slMjB0byUyMGElMjBzdHJpbmclMjB3aXRoJTIwY29sb25zJTVDbiUyMCUyMGxldCUyMHVwZGF0ZWRBcmdzU3RyaW5nJTIwJTNEJTIwQXJyYXkuZnJvbShhcmdzKS5tYXAoKCU1QmtleSUyQyUyMHZhbCU1RCklMjAlM0QlM0UlMjAlNjAlMjQlN0JrZXklN0QlM0ElMjQlN0J2YWwlN0QlNjApLmpvaW4oJyUzQicpJTNCJTVDbiU1Q24lMjAlMjAlMkYlMkYlMjBVcGRhdGUlMjB0aGUlMjBhcmdzJTIwcGFyYW1ldGVyJTIwaW4lMjB0aGUlMjBVUkwlNUNuJTIwJTIwaWYlMjAodXBkYXRlZEFyZ3NTdHJpbmcpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHVybC5zZWFyY2hQYXJhbXMuc2V0KCdhcmdzJyUyQyUyMHVwZGF0ZWRBcmdzU3RyaW5nKSUzQiU1Q24lMjAlMjAlN0QlMjBlbHNlJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHVybC5zZWFyY2hQYXJhbXMuZGVsZXRlKCdhcmdzJyklM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjByZXR1cm4lMjB1cmwudG9TdHJpbmcoKSUzQiU1Q24lN0QlNUNuJTVDbiU1Q25mdW5jdGlvbiUyMGhhbmRsZUNoYW5nZShzcmMpJTIwJTdCJTVDbiUyMCUyMGNvbnN0JTIwdmFsdWUlMjAlM0QlMjBzcmMudmFsdWUlM0IlNUNuJTIwJTIwY29uc3QlMjB0eXBlJTIwJTNEJTIwc3JjLnR5cGUlM0IlNUNuJTIwJTIwY29uc3QlMjBjaGVja2VkJTIwJTNEJTIwc3JjLmNoZWNrZWQlM0IlNUNuJTIwJTIwY29uc3QlMjBjdXJyZW50U3JjJTIwJTNEJTIwaWZyYW1lLnNyYyUzQiU1Q24lNUNuJTIwJTIwaWYlMjAodmFsdWUlMjAlM0QlM0QlM0QlMjAnZ29vZCcpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGdvb2RBYnN0cmFjdC5jbGFzc0xpc3QucmVtb3ZlKCdoaWRkZW4nKSUzQiU1Q24lMjAlMjAlMjAlMjBiYWRBYnN0cmFjdC5jbGFzc0xpc3QuYWRkKCdoaWRkZW4nKSUzQiU1Q24lMjAlMjAlN0QlMjBlbHNlJTIwaWYlMjAodmFsdWUlMjAlM0QlM0QlM0QlMjAnYmFkJyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwZ29vZEFic3RyYWN0LmNsYXNzTGlzdC5hZGQoJ2hpZGRlbicpJTNCJTVDbiUyMCUyMCUyMCUyMGJhZEFic3RyYWN0LmNsYXNzTGlzdC5yZW1vdmUoJ2hpZGRlbicpJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwaWZyYW1lLnNyYyUyMCUzRCUyMGdlbmVyYXRlSWZyYW1lU3JjKCU3QiUyMHZhbHVlJTJDJTIwdHlwZSUyQyUyMGNoZWNrZWQlMkMlMjBjdXJyZW50U3JjJTIwJTdEKSUzQiU1Q24lN0QlNUNuJTIyJTJDJTIydGhlbWUlMjIlM0ElMjJkcmFjdWxhJTIyJTdE

Step-by-step Instructions

  1. Under the YOUR SITE - Site Administration dropdown, hover over Add new pane and select either Media Object or Media Object List to create a new pane.

    1. Note: The primary difference between the two is that the Media Object List lets you add multiple Media Objects, which are then displayed beneath a title, while the Media Object is a single, non-repeatable element.

    Add a Title. The title will not be displayed on the Media Object; the Titlefor the entire component. The Media Object List will display this title above the first object in the list, if the user has selected to display the title.

  2. Optionally, add a Begin to add your Media Object List items:

    1. Add a Title for the Media Object List item.

    2. Add short Label to give further context to the Media Object List item.

    3. Add Body text that will make up the primary text for the object.

    4. Add the Image. If after previewing your pane you notice that your image looks grainy or pixelated, try uploading a higher quality version.

      1. If

      your
      1. using an existing image

      has
      1. already

      been uploaded to
      1. in the system:

        1. Click

        the File Browser tab
        1. Insert an Image button to launch the browser pop-up window.

        2. Navigate to the

        file
        1. image under Select Image, clicking on

        the title
        1. the radio button to the left of the thumbnail to select it.

        2. Press the Select Image button in the bottom left.

      2. Double click the title or use the Insert file button in the upper left.

      3. Enter Alternate text describing the contents of the image (used by screen readers, search engines, or when the image cannot be loaded)
      4. If using a new image:

        1. If you’re adding a new image to the system, click the Insert an Image button to launch the browser pop-up window button.

        2. Click Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.

    5. If you've added an image, select whether the image should be left or right-aligned under Media Object Layout.

    6. Optionally, add a Call to Action Link. This will inherit the standard Call to Action formatting.

    If you're creating a Media Object List, click
    1. Click Add another item to add additional objects

    . This button will not appear for the single Media Object pane type
    1. .