Jump to content

Media Object List Component: Difference between revisions

From Swarthmore Knowledge Base
← Older edit
VisualWikitext
Kwhiteb1 (talk | contribs)
189 edits
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
The '''''Media Object''' '''List''''' component allows you to display one or many left or right-aligned images alongside a title, label, text, and link.
{{DrupalBack}}
The '''Media Object List''' component allows you to display one or more left- or right-aligned images alongside a title, label, body text, and call-to-action link.


== Elements ==
== Elements ==
Line 11: Line 12:
# Media Object Item - Layout
# Media Object Item - Layout


[[File:Screenshot 2024-06-14 at 1.39.36 PM.png|800px|alt=Diagram depicting the elements making up the Media Object List component]]
{{Screenshot|Screenshot 2024-06-14 at 1.39.36 PM.png|800px|Diagram showing the fields that make up the Media Object List component.|The Media Object List component fields.}}


== Examples ==
== Examples ==


{{StorybookComponent|id=components-media-object--media-object|height=650}}
{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Media Object List component using its default configuration.
 
To experiment with different layouts and other settings, open the interactive component playground.
 
'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-media-object Open Component Playground]'''}}
 
{{StorybookComponent|id=swarthmore-theme-components-media-object|height=650}}
 
== Step-by-step Instructions ==
== Step-by-step Instructions ==


# Add a '''''Title''''' for 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.
# Add a '''Title''' for the entire component. The Media Object List displays this title above the first item if the title has been configured to display.
# Begin to add your '''''Media Object List '''''items:
# Begin adding your '''Media Object List''' items:
## Add a '''''Title''' ''for the Media Object List item.
## Add a '''Title''' for the Media Object List item.
## Add short '''''Label''''' to give further context to the Media Object List item.
## Add a short '''Label''' to provide additional context for the item.
## Add '''''Body''' ''text that will make up the primary text for the object.
## Add '''Body''' text that will make up the primary content of the item.
## Add the '''''Image.''''' If after previewing your pane you notice that your image looks grainy or pixelated, try uploading a higher quality version.
## Add an '''Image'''. If, after previewing the component, the image appears grainy or pixelated, try uploading a higher quality version.
### <u>If using an existing image already in the system</u>:
### <u>If using an existing image already in the system</u>:
#### Click '''''Insert an Image '''''button to launch the browser pop-up window.
#### Click the '''Insert an Image''' button to launch the image browser.
#### Navigate to the image under '''''Select Image''''', clicking on the radio button to the left of the thumbnail to select it.
#### Navigate to the image under '''Select Image''', select it using the radio button, and click '''Select Image'''.
#### Press the '''''Select Image''''' button in the bottom left.
### <u>If using a new image</u>:
### <u>If using a new image</u>:
#### 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 the '''Insert an Image''' button to launch the image browser.
#### Click '''''Upload Image '''''and then the '''''Browse…''''' button to browse your local system for the file, select it, and click the '''''Select Image '''''button.
#### Click '''Upload Image''', then click '''Browse…''' to locate the image on your computer. Finally, click '''Select Image'''.
## If you've added an image, select whether the image should be left or right-aligned under '''''Media Object Layout'''.''
## If you've added an image, select whether it should be left- or right-aligned using the '''Media Object Layout''' field.
## Optionally, add a '''''Call to Action Link'''''. This will inherit the standard '''''Call to Action''''' formatting.
## Optionally, add a '''Call to Action Link'''. This will inherit the standard '''Call to Action''' formatting.
## Click '''''Add another item''' ''to add additional objects.
## Click '''Add another item''' to add additional Media Object items.
 


[[Category:Drupal]]
[[Category:Drupal]]
<!-- Imported from Confluence page id=20513102 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/20513102/Media+Object+List+Component) -->

Latest revision as of 12:31, 10 July 2026

← Return to the Drupal User Guide

The Media Object List component allows you to display one or more left- or right-aligned images alongside a title, label, body text, and call-to-action link.

Elements

  1. Title (required, user can toggle visibility)
  2. Media Object Item - Title
  3. Media Object Item - Label
  4. Media Object Item - Body
  5. Media Object Item - Image
  6. Media Object Item - Call to Action
  7. Media Object Item - Layout
Diagram showing the fields that make up the Media Object List component.
Figure: The Media Object List component fields.

Examples

Interactive Example
The preview below shows the Media Object List component using its default configuration.

To experiment with different layouts and other settings, open the interactive component playground.

Open Component Playground



Step-by-step Instructions

  1. Add a Title for the entire component. The Media Object List displays this title above the first item if the title has been configured to display.
  2. Begin adding your Media Object List items:
    1. Add a Title for the Media Object List item.
    2. Add a short Label to provide additional context for the item.
    3. Add Body text that will make up the primary content of the item.
    4. Add an Image. If, after previewing the component, the image appears grainy or pixelated, try uploading a higher quality version.
      1. If using an existing image already in the system:
        1. Click the Insert an Image button to launch the image browser.
        2. Navigate to the image under Select Image, select it using the radio button, and click Select Image.
      2. If using a new image:
        1. Click the Insert an Image button to launch the image browser.
        2. Click Upload Image, then click Browse… to locate the image on your computer. Finally, click Select Image.
    5. If you've added an image, select whether it should be left- or right-aligned using the Media Object Layout field.
    6. Optionally, add a Call to Action Link. This will inherit the standard Call to Action formatting.
    7. Click Add another item to add additional Media Object items.
Retrieved from "https://kb.swarthmore.edu/index.php?title=Media_Object_List_Component&oldid=3552"