Jump to content

Feature Link List Component: Difference between revisions

From Swarthmore Knowledge Base
Kwhiteb1 (talk | contribs)
No edit summary
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{DrupalBack}}
The Feature Link List component, much like the [[Feature Component|Feature component]], is designed to feature a person, event, announcement, or other information. The primary difference between the Feature and the Feature Link List is the presence of a list of links after the abstract and before the call to action.
The Feature Link List component, much like the [[Feature Component|Feature component]], is designed to feature a person, event, announcement, or other information. The primary difference between the Feature and the Feature Link List is the presence of a list of links after the abstract and before the call to action.


Line 9: Line 10:
# Call to Action Link
# Call to Action Link


[[File:Screenshot 2024-06-14 at 1.38.41 PM.png|800px|alt=Diagram depicting the elements of the Double Image Callout component]]
{{Screenshot|Screenshot_2024-06-14_at_1.38.41 PM.png|800px|Diagram depicting the elements of the Double Image Callout component|Fields comprising the Feature Link List component in Drupal.}}


== Examples ==
== Examples ==
{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Feature Link List component using its default configuration.


{{StorybookComponent|id=components-feature-link-list--feature-link-list|height=650}}[https://toolkit.swarthmore.edu/?path=/story/components-feature-link-list--feature-link-list Play with this component on toolkit.swarthmore.edu]
To experiment with different layouts, images, labels, and other settings, open the interactive component playground.
 
'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-feature-link-list Open Component Playground]'''}}
{{StorybookComponent|id=swarthmore-theme-components-feature-link-list|height=650}}


== Step-by-step Instructions ==
== Step-by-step Instructions ==

Latest revision as of 12:57, 10 July 2026

The Feature Link List component, much like the Feature component, is designed to feature a person, event, announcement, or other information. The primary difference between the Feature and the Feature Link List is the presence of a list of links after the abstract and before the call to action.

Elements

  1. Title (required)
  2. Image or Video (not required, but strongly suggested)
  3. Abstract
  4. Link Listing (not required, but strongly suggested)
  5. Call to Action Link
Diagram depicting the elements of the Double Image Callout component
Figure: Fields comprising the Feature Link List component in Drupal.

Examples

Interactive Example
The preview below shows the Feature Link List component using its default configuration.

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

Open Component Playground


Step-by-step Instructions

  1. Add a Title.
  2. Add the Feature Image (optimal dimensions: width of 1530px by height of 1020px).
    1. If using an existing image already in the system:
      1. Click Insert an Image button to launch the browser pop-up window.
      2. Navigate to the image under Select Image, clicking on the radio button to the left of the thumbnail to select it.
      3. Press the Select Image button in the bottom left.
    2. 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.
    3. Optionally, add a Video URL. The system expects the video to come from YouTube.
      1. Note: If both a Video URL and Image File are present, the image will be used as the video’s “poster image”. This is the way the system is intended to be used but is not required.
  3. Add the text that should accompany the feature in the Abstract field.
  4. Add your links in the Link Listing area:
    1. If you're linking to a page within Drupal, begin to type the title in the Link field and select it from the autocomplete suggestions. The Link text field will automatically populate, but can be altered. If your link is outside of swarthmore.edu, simply paste the URL.
    2. Add or edit Link text, the text that will be seen as a clickable link in your feature.
    3. Add additional link fields by clicking the Add another item button.
    4. Remove unwanted links by clicking the Remove button.
  5. Optionally, add a Call to Action Link. This will inherit the standard Call to Action formatting. If desired, toggle Open URL in a new window to have the Call to Action link open in a new tab when clicked.