TheMedia Object Listcomponent allows you to display one or many left or right-aligned images alongside a title, label, text, and link.
Elements
item
item
itemTitle (required, user can toggle visibility)
Media Object Item - Title
Media Object Item - Label
Media Object Item - Body
Media Object Item - Image
Media Object Item - Call to Action
Media Object Item - Layout
Examples
Aura html |
---|
params | JTdCJTIyaHRtbENvZGUlMjIlM0ElMjIlM0NmaWVsZHNldCUyMGlkJTNEJTVDJTIyc3Rvcnlib29rLXRvZ2dsZXMlNUMlMjIlM0UlNUNuJTIwJTIwJTNDbGVnZW5kJTNFTWVkaWElMjBPYmplY3QlMjBMaXN0JTIwQ29tcG9uZW50JTNDJTJGbGVnZW5kJTNFJTVDbiUyMCUyMCUzQ2RpdiUzRSU1Q24lMjAlMjAlMjAlMjAlM0NpbnB1dCUyMHR5cGUlM0QlNUMlMjJyYWRpbyU1QyUyMiUyMGlkJTNEJTVDJTIyc3Rvcnlib29rLXRvZ2dsZXMtLWdvb2QlNUMlMjIlMjBuYW1lJTNEJTVDJTIyaW1wbGVtZW50YXRpb24lNUMlMjIlMjB2YWx1ZSUzRCU1QyUyMmdvb2QlNUMlMjIlMjBvbmNoYW5nZSUzRCU1QyUyMmhhbmRsZUNoYW5nZSh0aGlzKSUzQiU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjBjaGVja2VkJTIwJTJGJTNFJTVDbiUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwZm9yJTNEJTVDJTIyc3Rvcnlib29rLXRvZ2dsZXMtLWdvb2QlNUMlMjIlM0VJZGVhbCUzQyUyRmxhYmVsJTNFJTVDbiUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCU1QyUyMnJhZGlvJTVDJTIyJTIwaWQlM0QlNUMlMjJzdG9yeWJvb2stdG9nZ2xlcy0tYmFkJTVDJTIyJTIwbmFtZSUzRCU1QyUyMmltcGxlbWVudGF0aW9uJTVDJTIyJTIwdmFsdWUlM0QlNUMlMjJiYWQlNUMlMjIlMjBvbmNoYW5nZSUzRCU1QyUyMmhhbmRsZUNoYW5nZSh0aGlzKSUzQiU1QyUyMiUyMCUyRiUzRSU1Q24lMjAlMjAlMjAlMjAlM0NsYWJlbCUyMGZvciUzRCU1QyUyMnN0b3J5Ym9vay10b2dnbGVzLS1iYWQlNUMlMjIlM0VOZWVkcyUyMHdvcmslM0MlMkZsYWJlbCUzRSU1Q24lMjAlMjAlM0MlMkZkaXYlM0UlNUNuJTIwJTIwJTNDZGl2JTIwaWQlM0QlNUMlMjJ0b2dnbGUtYWJzdHJhY3QlNUMlMjIlM0UlNUNuJTIwJTIwJTIwJTIwJTNDdWwlMjBpZCUzRCU1QyUyMnRvZ2dsZS1hYnN0cmFjdC0tZ29vZCU1QyUyMiUyMHN0eWxlJTNEJTVDJTIyY29sb3IlM0ElMjBncmVlbiUzQiU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlM0NsaSUzRUltYWdlcyUyMGhhdmUlMjByZWNvbW1lbmRlZCUyMGRpbWVuc2lvbnMlM0MlMkZsaSUzRSU1Q24lMjAlMjAlMjAlMjAlM0MlMkZ1bCUzRSU1Q24lMjAlMjAlMjAlMjAlM0N1bCUyMGlkJTNEJTVDJTIydG9nZ2xlLWFic3RyYWN0LS1iYWQlNUMlMjIlMjBjbGFzcyUzRCU1QyUyMmhpZGRlbiU1QyUyMiUyMHN0eWxlJTNEJTVDJTIyY29sb3IlM0ElMjByZWQlM0IlNUMlMjIlM0UlNUNuJTNDbGklM0VJbWFnZXMlMjBhcmUlMjB0b28lMjBzbWFsbCUzQyUyRmxpJTNFJTVDbiUyMCUyMCUyMCUyMCUzQyUyRnVsJTNFJTVDbiU1Q24lMjAlMjAlM0MlMkZkaXYlM0UlNUNuJTNDJTJGZmllbGRzZXQlM0UlNUNuJTVDbiU1Q24lM0NpZnJhbWUlNUNuJTIwJTIwc3JjJTNEJTVDJTIyaHR0cHMlM0ElMkYlMkZzd2FydGhtb3JlLXdlYi5naXRodWIuaW8lMkZ3d3dfZDlfc3dhcnRobW9yZV90aGVtZSUyRmlmcmFtZS5odG1sJTNGaWQlM0Rjb21wb25lbnRzLW1lZGlhLW9iamVjdC0tbWVkaWEtb2JqZWN0JTI2dmlld01vZGUlM0RzdG9yeSU1QyUyMiU1Q24lMjAlMjBpZCUzRCU1QyUyMnN0b3J5Ym9vay1pZnJhbWUlNUMlMjIlMjB3aWR0aCUzRCU1QyUyMjEwMCUyNSU1QyUyMiUyMGhlaWdodCUzRCU1QyUyMjY1MHB4JTVDJTIyJTIwc3R5bGUlM0QlNUMlMjJib3JkZXIlM0ElMjAxcHglMjBzb2xpZCUyMGxpZ2h0Z3JheSUzQiU1QyUyMiUzRSUzQyUyRmlmcmFtZSUzRSUyMiUyQyUyMmNzc0NvZGUlMjIlM0ElMjJ1bCUyM3RvZ2dsZS1hYnN0cmFjdC0tZ29vZCUyMGxpJTIwJTdCJTVDbiUyMCUyMGxpc3Qtc3R5bGUtdHlwZSUzQSUyMCclRTIlOUMlOTQlRUYlQjglOEYnJTNCJTVDbiUyMCUyMHBhZGRpbmctaW5saW5lLXN0YXJ0JTNBJTIwMWNoJTNCJTVDbiUyMCUyMGNvbG9yJTNBJTIwdHJhbnNwYXJlbnQlM0IlMjAlMjAlNUNuJTIwJTIwdGV4dC1zaGFkb3clM0ElMjAwJTIwMCUyMDAlMjBncmVlbiUzQiU1Q24lN0QlNUNuJTVDbnVsJTIzdG9nZ2xlLWFic3RyYWN0LS1iYWQlMjBsaSUyMCU3QiU1Q24lMjAlMjBsaXN0LXN0eWxlLXR5cGUlM0ElMjAnJUUyJTlDJTk2JUVGJUI4JThGJyUzQiU1Q24lMjAlMjBwYWRkaW5nLWlubGluZS1zdGFydCUzQSUyMDFjaCUzQiU1Q24lMjAlMjBjb2xvciUzQSUyMHRyYW5zcGFyZW50JTNCJTIwJTIwJTVDbiUyMCUyMHRleHQtc2hhZG93JTNBJTIwMCUyMDAlMjAwJTIwcmVkJTNCJTVDbiU3RCU1Q24lNUNuZmllbGRzZXQlMjAlN0IlNUNuJTIwYm9yZGVyJTNBJTIwMXB4JTIwc29saWQlMjBsaWdodGdyYXklM0IlNUNuJTdEJTVDbiU1Q25sZWdlbmQlMjAlN0IlNUNuJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQSUyMHJnYigxODAlMkMlMjA0OSUyQyUyMDUzKSUzQiU1Q24lMjAlMjBjb2xvciUzQSUyMCUyM2ZmZiUzQiU1Q24lMjAlMjBwYWRkaW5nJTNBJTIwNnB4JTNCJTVDbiU3RCU1Q24lNUNuJTIzc3Rvcnlib29rLXRvZ2dsZXMlMjAlN0IlNUNuJTIwJTIwbWFyZ2luJTNBJTIwMnJlbSUzQiU1Q24lMjAlMjBmb250LWZhbWlseSUzQSUyMC1hcHBsZS1zeXN0ZW0lMkMlMjBCbGlua01hY1N5c3RlbUZvbnQlMkMlMjAlNUMlMjJTZWdvZSUyMFVJJTVDJTIyJTJDJTIwJTVDJTIyUm9ib3RvJTVDJTIyJTJDJTIwJTVDJTIyT3h5Z2VuJTVDJTIyJTJDJTIwJTVDJTIyVWJ1bnR1JTVDJTIyJTJDJTIwJTVDJTIyRmlyYSUyMFNhbnMlNUMlMjIlMkMlMjAlNUMlMjJEcm9pZCUyMFNhbnMlNUMlMjIlMkMlMjAlNUMlMjJIZWx2ZXRpY2ElMjBOZXVlJTVDJTIyJTJDJTIwc2Fucy1zZXJpZiUzQiU1Q24lN0QlNUNuJTVDbi5oaWRkZW4lMjAlN0IlNUNuJTIwJTIwZGlzcGxheSUzQSUyMG5vbmUlM0IlNUNuJTdEJTVDbiUyMiUyQyUyMmpzQ29kZSUyMiUzQSUyMmNvbnN0JTIwaWZyYW1lJTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3N0b3J5Ym9vay1pZnJhbWUnKSUzQiU1Q25jb25zdCUyMGdvb2RBYnN0cmFjdCUyMCUzRCUyMGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtYWJzdHJhY3QtLWdvb2QnKSUzQiU1Q25jb25zdCUyMGJhZEFic3RyYWN0JTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RvZ2dsZS1hYnN0cmFjdC0tYmFkJyklM0IlNUNuJTVDbmZ1bmN0aW9uJTIwZ2VuZXJhdGVJZnJhbWVTcmMocGFyYW1zKSUyMCU3QiU1Q24lMjAlMjBjb25zdCUyMCU3QiUyMHZhbHVlJTJDJTIwdHlwZSUyQyUyMGNoZWNrZWQlMkMlMjBjdXJyZW50U3JjJTIwJTdEJTIwJTNEJTIwcGFyYW1zJTNCJTVDbiU1Q24lMjAlMjBsZXQlMjB1cmwlMjAlM0QlMjBuZXclMjBVUkwoY3VycmVudFNyYyklM0IlNUNuJTIwJTIwbGV0JTIwYXJnc1N0cmluZyUyMCUzRCUyMHVybC5zZWFyY2hQYXJhbXMuZ2V0KCdhcmdzJyklMjAlN0MlN0MlMjAnJyUzQiU1Q24lMjAlMjBsZXQlMjBhcmdzJTIwJTNEJTIwbmV3JTIwTWFwKGFyZ3NTdHJpbmcuc3BsaXQoJyUzQicpLmZpbHRlcihCb29sZWFuKS5tYXAocGFyYW0lMjAlM0QlM0UlMjAlN0IlNUNuJTIwJTIwJTIwJTIwbGV0JTIwJTVCa2V5JTJDJTIwdmFsJTVEJTIwJTNEJTIwcGFyYW0uc3BsaXQoJyUzQScpJTNCJTVDbiUyMCUyMCUyMCUyMHJldHVybiUyMCU1QmtleSUyQyUyMHZhbCU1RCUzQiU1Q24lMjAlMjAlN0QpKSUzQiU1Q24lNUNuJTIwJTIwaWYlMjAodHlwZSUyMCUzRCUzRCUzRCUyMCdyYWRpbyclMjAlMjYlMjYlMjB2YWx1ZSUyMCUzRCUzRCUzRCUyMCdnb29kJyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwYXJncy5zZXQoJ2JhZEV4YW1wbGUnJTJDJTIwJ2ZhbHNlJyklM0IlNUNuJTIwJTIwJTdEJTIwZWxzZSUyMGlmJTIwKHR5cGUlMjAlM0QlM0QlM0QlMjAncmFkaW8nJTIwJTI2JTI2JTIwdmFsdWUlMjAlM0QlM0QlM0QlMjAnYmFkJyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwYXJncy5zZXQoJ2JhZEV4YW1wbGUnJTJDJTIwJ3RydWUnKSUzQiU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMGlmJTIwKHR5cGUlMjAlM0QlM0QlM0QlMjAnY2hlY2tib3gnJTIwJTI2JTI2JTIwdmFsdWUlMjAlM0QlM0QlM0QlMjAnbGF5b3V0JyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwaWYlMjAoY2hlY2tlZCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTIwJTIwYXJncy5zZXQoJ2xheW91dCclMkMlMjAnc3RhbmRhcmQtcmlnaHQnKSUzQiU1Q24lMjAlMjAlMjAlMjAlN0QlMjBlbHNlJTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMGFyZ3MuZGVsZXRlKCdsYXlvdXQnKSUzQiU1Q24lMjAlMjAlMjAlMjAlN0QlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAlMkYlMkYlMjBDb252ZXJ0JTIwYXJncyUyME1hcCUyMGJhY2slMjB0byUyMGElMjBzdHJpbmclMjB3aXRoJTIwY29sb25zJTVDbiUyMCUyMGxldCUyMHVwZGF0ZWRBcmdzU3RyaW5nJTIwJTNEJTIwQXJyYXkuZnJvbShhcmdzKS5tYXAoKCU1QmtleSUyQyUyMHZhbCU1RCklMjAlM0QlM0UlMjAlNjAlMjQlN0JrZXklN0QlM0ElMjQlN0J2YWwlN0QlNjApLmpvaW4oJyUzQicpJTNCJTVDbiU1Q24lMjAlMjAlMkYlMkYlMjBVcGRhdGUlMjB0aGUlMjBhcmdzJTIwcGFyYW1ldGVyJTIwaW4lMjB0aGUlMjBVUkwlNUNuJTIwJTIwaWYlMjAodXBkYXRlZEFyZ3NTdHJpbmcpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHVybC5zZWFyY2hQYXJhbXMuc2V0KCdhcmdzJyUyQyUyMHVwZGF0ZWRBcmdzU3RyaW5nKSUzQiU1Q24lMjAlMjAlN0QlMjBlbHNlJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHVybC5zZWFyY2hQYXJhbXMuZGVsZXRlKCdhcmdzJyklM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjByZXR1cm4lMjB1cmwudG9TdHJpbmcoKSUzQiU1Q24lN0QlNUNuJTVDbiU1Q25mdW5jdGlvbiUyMGhhbmRsZUNoYW5nZShzcmMpJTIwJTdCJTVDbiUyMCUyMGNvbnN0JTIwdmFsdWUlMjAlM0QlMjBzcmMudmFsdWUlM0IlNUNuJTIwJTIwY29uc3QlMjB0eXBlJTIwJTNEJTIwc3JjLnR5cGUlM0IlNUNuJTIwJTIwY29uc3QlMjBjaGVja2VkJTIwJTNEJTIwc3JjLmNoZWNrZWQlM0IlNUNuJTIwJTIwY29uc3QlMjBjdXJyZW50U3JjJTIwJTNEJTIwaWZyYW1lLnNyYyUzQiU1Q24lNUNuJTIwJTIwaWYlMjAodmFsdWUlMjAlM0QlM0QlM0QlMjAnZ29vZCcpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGdvb2RBYnN0cmFjdC5jbGFzc0xpc3QucmVtb3ZlKCdoaWRkZW4nKSUzQiU1Q24lMjAlMjAlMjAlMjBiYWRBYnN0cmFjdC5jbGFzc0xpc3QuYWRkKCdoaWRkZW4nKSUzQiU1Q24lMjAlMjAlN0QlMjBlbHNlJTIwaWYlMjAodmFsdWUlMjAlM0QlM0QlM0QlMjAnYmFkJyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwZ29vZEFic3RyYWN0LmNsYXNzTGlzdC5hZGQoJ2hpZGRlbicpJTNCJTVDbiUyMCUyMCUyMCUyMGJhZEFic3RyYWN0LmNsYXNzTGlzdC5yZW1vdmUoJ2hpZGRlbicpJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwaWZyYW1lLnNyYyUyMCUzRCUyMGdlbmVyYXRlSWZyYW1lU3JjKCU3QiUyMHZhbHVlJTJDJTIwdHlwZSUyQyUyMGNoZWNrZWQlMkMlMjBjdXJyZW50U3JjJTIwJTdEKSUzQiU1Q24lN0QlNUNuJTIyJTJDJTIydGhlbWUlMjIlM0ElMjJkcmFjdWxhJTIyJTdE |
---|
|
Step-by-step Instructions
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.
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 a 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.
Optionally, add a Begin to add your Media Object List items:
Add a Title for the Media Object List item.
Add short Label to give further context to the Media Object List item.
Add Body text that will make up the primary text for the object.
Add the Image. If after previewing your pane you notice that your image looks grainy or pixelated, try uploading a higher quality version.
If
your using an existing image
has already
been uploaded to in the system:
Click
the File Browser tab Insert an Image button to launch the browser pop-up window.
Navigate to the
fileimage under Select Image, clicking on
the title the radio button to the left of the thumbnail to select it.
Press the Select Image button in the bottom left.
Double click the title or use the Insert file button in the upper left.
- Enter Alternate text describing the contents of the image (used by screen readers, search engines, or when the image cannot be loaded)
If using a new image:
If you’re adding a new image to the system, click the Insert an Image button to launch the browser pop-up window button.
Click Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.
If you've added an image, select whether the image should be left or right-aligned under Media Object Layout.
Optionally, add a Call to Action Link. This will inherit the standard Call to Action formatting.
If you're creating a Media Object List, clickClick Add another item to add additional objects
. This button will not appear for the single Media Object pane type.