Jump to content

Specialized Content: Difference between revisions

From Swarthmore Knowledge Base
Kwhiteb1 (talk | contribs)
No edit summary
Kwhiteb1 (talk | contribs)
No edit summary
 
Line 1: Line 1:
← [[Drupal Home|Return to the Drupal 10 User Guide]]
{{DrupalBack}}
== 9.1 Site Settings ==


== 9.1) Site Settings ==
All websites have '''Site Settings''' that allow editors to manage the global settings of their website. Site Settings include:


All websites have '''Site Settings''' that allows editors to manage the global settings of their website. A website’s '''Site Settings''' include the following:
* '''Contact Block''' — The department contact information displayed below the left-hand navigation. This includes the department's mailing address, phone and fax numbers, email address, hours of operation, and social media links.
* '''Shared Site Content''' — A special content zone that appears at the bottom of every page on your site. Any component added to this zone is displayed across the entire site.


* '''Contact Block''' - This is the department contact information located below the left hand navigation. It includes department's mailing address, phone/fax numbers, email, hours of operation, and social media links.
=== 9.1.1 Accessing Site Settings ===
* '''Shared Site Content''' - This is a special content zone that appears at the bottom of every page of your site. Any component added to this content zone will appear on all the pages of your site.


=== 9.1.1) Accessing Site Settings ===
There are two ways to access '''Site Settings''':


There are two ways to access the Site Settings:
# After logging into Drupal and navigating to your website, click '''Site Settings''' in the administration toolbar at the top of the page.
# While viewing a page, click '''Site Settings''' located between '''Edit Page''' and '''Page Revisions'''.


1) After logging into Drupal and navigating to your website, a link to '''Site Settings''' will appear in menu bar at the top next to your name. <br>2) Another link to '''Site Settings''' will also appear next in between Edit Page and Page Revisions.
{{Screenshot|site_settings_access1.png|745px|Screenshot showing the two locations where the Site Settings link appears in Drupal.|Site Settings can be accessed from either the administration toolbar or the page toolbar.}}


[[File:site_settings_access1.png|745px|alt=site_settings_access1.png]]
=== 9.2 The Contact Block ===


=== 9.2) The Contact Block ===
Every website includes a contact block that appears below the site's navigation in the left column. Because this information is managed through '''Site Settings''', it is displayed consistently across every page on your website.


All websites have a contact block that appears below the site’s navigation in the left column. This information appears on all the webpages of your site. Clicking the '''Site Settings''' link (see section 9.1 above) will open the Site Settings Editor which allows you to edit this information. The information in the contact block includes:
The Contact Block includes:


# Address
# Address
Line 24: Line 26:
# Email
# Email
# Hours
# Hours
# Social Media - allows you to add links to your department’s social media accounts.
# Social Media — Links to your department's social media accounts.
# Contact and Social Media (Deprecated) - allows you to customize your contact information. Unless you have specific reason to customize your contact information, it is generally commended that you use the standard fields (address, phone, email, hours) listed above.
# Contact and Social Media (Deprecated) — A legacy field that allows fully customized contact information. Unless you have a specific need for custom formatting, use the built-in contact fields instead.


'''There are two ways to manage the contact block. '''
There are two ways to manage the Contact Block:


# '''Built-In Fields '''- allows you to use the standardized formatting.
# '''Built-in Fields''' — Recommended. Uses standardized formatting.
# '''Deprecated field''' - allows you to customize your information
# '''Deprecated Field''' — Allows fully customized formatting.


=== 9.2.1) Using the built-in default contact fields (recommended) ===
=== 9.2.1 Using the Built-in Contact Fields (Recommended) ===


# Add your mailing address information
# Enter your mailing address.
# Add your phone/fax numbers.  
# Enter your phone and fax numbers.


'''Note: the phone Link field must use following format: '''[tel:xxx-xxx-xxxx '''tel:xxx-xxx-xxxx''']''' (ex: tel:610-328-8000) '''
'''Note:''' The '''Phone Link''' field must use the format <code>tel:610-328-8000</code>.


# Add your department’s email address
# Enter your department email address.
# Add your hours of operation (optional)
# Optionally, enter your hours of operation.
# Add your social media account (optional)
# Optionally, add social media accounts.
# '''If you are using the built-in contact fields, then do not use the deprecated field (see 9.2.2. below)'''<br>
# '''If you are using the built-in contact fields, do not use the deprecated Contact and Social Media field described in Section 9.2.2.'''


'''Built-In Fields will display like this: '''
'''Built-in fields display like this:'''


[[File:contact1.png|241px|alt=contact1.png]]
{{Screenshot|contact1.png|241px|Screenshot showing the Contact Block displayed on a webpage.|The built-in contact fields produce a standardized contact block.}}
'''In Site Settings, you manage that information in the following fields:''


[[File:contact_builtin.png|571px|alt=contact_builtin.png]]
'''These fields are managed in Site Settings:'''


=== 9.2.2) Using the deprecated field to customize your contact block ===
{{Screenshot|contact_builtin.png|571px|Screenshot showing the built-in Contact Block fields in Site Settings.|Use the built-in fields to maintain consistent formatting across your site.}}


# Add all your information to one field and customize it as needed
=== 9.2.2 Using the Deprecated Contact Field ===
# Add you social media information (optional)
# '''If using the deprecated field''', '''do not use the other built-in fields (address, phone/fax, email) listed above in 9.2.1'''


[[File:conatct3.png|270px|alt=conatct3.png]][[File:contact_deprecated2.png|571px|alt=contact_deprecated2.png]]
# Enter all contact information into the '''Contact and Social Media''' field and format it as needed.
# Optionally, add social media information.
# '''If you use the deprecated field, do not use the built-in Address, Phone/Fax, Email, or Hours fields described above.'''


=== 9.2.3) Working with the Contact and Social Media (deprecated field) ===
{{Screenshot|conatct3.png|270px|Screenshot showing the Contact Block created with the deprecated field.|Example of a Contact Block using the deprecated field.}}


Located in the upper right corner of the Contact and Social Media (deprecated) field are three vertical dots. Clicking this icon will open a mini editor menu to allow you format the text using the standard editor tools and add links.
{{Screenshot|contact_deprecated2.png|571px|Screenshot showing the deprecated Contact and Social Media field in Site Settings.|The deprecated field allows fully customized contact information.}}


[[File:contact5.png|799px|alt=contact5.png]]
=== 9.2.3 Working with the Contact and Social Media (Deprecated) Field ===


== 9.3) Shared Site Content ==
The '''Contact and Social Media (Deprecated)''' field includes a menu (three vertical dots) in the upper-right corner. Selecting this menu opens the editor toolbar, allowing you to format text and create links.


All websites have a special zone called the '''Shared Site Content zone'''. Any component(s) added to this special zone will appear on ALL the webpages of your website. It should be used strategically and sparingly depending on the specific needs of your site.
{{Screenshot|contact5.png|799px|Screenshot showing the formatting menu for the deprecated Contact and Social Media field.|The deprecated field includes a simplified formatting toolbar.}}


{{Card|variant=info|title=Info|content='''Please note: '''It is recommended that you do not include more than one component at a time in the Shared Site Content.}}
== 9.3 Shared Site Content ==


=== 9.3.1) Editing an existing component in the Shared Site Content zone. ===
Every website includes a special '''Shared Site Content''' zone. Components added to this zone automatically appear on '''every page''' of your website.


# After clicking on '''Site Settings''' link, scroll to the '''Shared Site Content''' section in the Site Settings editor.
{{Callout|type=tip|title=Best Practice|content=Use Shared Site Content sparingly. In most cases, no more than '''one component''' should be placed in this area at a time.}}
# Any components that currently appear in your site’s Shared Site Content zone will appear here. You can edit the content of those components directly through the Shared Site Content editor.
# After making your changes, click '''Save '''located at bottom of the editor.


{{Card|variant=note|title=Note|content=[add screen grab of Shared Site Content editor with an existing link list pane]}}
=== 9.3.1 Editing an Existing Shared Site Content Component ===


=== 9.3.2) Adding a new component to the Shared Site Content zone. ===
# Open '''Site Settings'''.
# Scroll to the '''Shared Site Content''' section.
# Edit any existing components directly within this section.
# Click '''Save''' at the bottom of the page.


# After clicking on '''Site Settings''', scroll to the bottom of '''Shared Site Content''' section in the Site Settings editor.
=== 9.3.2 Adding a Component to Shared Site Content ===
# Located at the bottom '''Shared Site Content''' section is drop down menu called '''Add Component to Shared Site Content.'''
# Select the new component type you wish to add to your sites' '''Shared Site Content''' zone. There are four types component types that can be added to Shared Site Zone: Call To Action, Feature, Feature Link List, Link List.
# Add the information to the component.
# Click '''Save '''located at bottom of the editor


{{Card|variant=note|title=Note|content=[add screen grab of drop down selector]}}
# Open '''Site Settings'''.
# Scroll to the '''Shared Site Content''' section.
# From the '''Add Component to Shared Site Content''' drop-down menu, choose the component you want to add.
# Complete the component fields.
# Click '''Save'''.


=== 9.3.3) Removing a component from the Shared Site Content zone. ===
The following component types can be added to Shared Site Content:


# After clicking on '''Site Settings''' link, scroll to the '''Shared Site Content''' section in the Site Settings editor.
* Call to Action
# Find the component, you wish to remove. Located in the upper right corner of the component will be a Remove button. Click the remove button.
* Feature
# Then click '''Save '''located at bottom of the editor.
* Feature Link List
* Link List


{{Card|variant=note|title=Note|content=[add screen grab of remove button]}}
=== 9.3.3 Removing a Shared Site Content Component ===


== 9.4) News ==
# Open '''Site Settings'''.
# Scroll to the '''Shared Site Content''' section.
# Locate the component you want to remove.
# Click the '''Remove''' button in the upper-right corner of the component.
# Click '''Save'''.


[[File:Screenshot 2024-07-09 at 10.31.31 AM.png|210px|alt=Screenshot 2024-07-09 at 10.31.31 AM.png]]
== 9.4 News ==
Some departments include a [https://swatkb.atlassian.net/wiki/x/BwB1Cg News Feed Component] on their website. The content that appears in news feed component is produced by the Communications Office. Whenever a news story is written for the Swarthmore website, it is also tagged by the Communications Office to automatically appear on the appropriate websites that also have an active news feed component.


Some departments also choose to write their own news stories. If a department writes their news stories that they wish to appear in their [https://swatkb.atlassian.net/wiki/x/BwB1Cg News Feed Component], then they would need to follow these two steps:
{{Screenshot|Screenshot 2024-07-09 at 10.31.31 AM.png|210px|Screenshot showing a News Feed component.|Example of a News Feed component.}}


* [https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/edit-v2/182157323#3.2-Creating-News-Pages Create a NEWS page in Drupal.] Write the story using the News page template.
Some departments include a [[News Feed Component|News Feed]] component on their website. The content displayed in the News Feed is produced by the Communications Office. Whenever a news story is published on the Swarthmore website, the Communications Office tags it so it automatically appears in the appropriate News Feed components across the website.
* When your news story is ready for publication, contact the Communications Office at [mailto:webeditor@swarthmore.edu webeditor@swarthmore.edu]. Communication's editors will then tag the news story so that it appears in the correct news feeds component.


Any questions about news that appears (or doesn’t appear) in your department News Feed Component, should be directed to Communications Office at [mailto:webeditor@swarthmore.edu webeditor@swarthmore.edu].
Some departments also publish their own news stories. If you want your department's stories to appear in your site's News Feed, complete the following steps:


== 9.5) Events ==
* [[Creating New Pages#3.2_Creating_News_Pages|Create a News Page]] in Drupal using the News Page content type.
* When your story is ready for publication, contact the Communications Office at [mailto:webeditor@swarthmore.edu webeditor@swarthmore.edu]. Communications staff will tag the story so it appears in the appropriate News Feed components.


[[File:events_component.png|210px|alt=events_component.png]]
If you have questions about news that appears (or does not appear) in your department's News Feed, contact the Communications Office at [mailto:webeditor@swarthmore.edu webeditor@swarthmore.edu].
Many departments also include a [https://swatkb.atlassian.net/wiki/x/OwE5AQ Events Calendar Feed Component] on their website. The content that appears in the Events Calendar Feed Component is pulled directly from the [https://swatcentral.swarthmore.edu/ Campus Calendar] (SwatCentral/25Live). Whenever an event is entered into [https://www.swarthmore.edu/events-management/information-faculty-staff-and-students Swat Central], it can also be setup to appear on the appropriate Events Calendar Component in Drupal. Having an Events Calendar component on your site is great way to promote upcoming events on both your website and Campus Calendar.


* For any questions about reserving space or using [https://swatcentral.swarthmore.edu/ Campus Calendar] (Swat Central/25Live) system, please contact the [https://www.swarthmore.edu/events-management Events Management] office at [mailto:space@swarthmore.edu space@swarthmore.edu].
== 9.5 Events ==
* For any questions about particular events that appears (or don't appear) in your Events Calendar Feed Component, please contact the Campus Calendar administrators at [mailto:calendar@swarthmore.edu calendar@swarthmore.edu].


== 9.6) Acalog ==
{{Screenshot|events_component.png|210px|Screenshot showing an Events Calendar Feed component.|Example of an Events Calendar Feed component.}}


Academic departments manage course data through the [https://www.swarthmore.edu/registrar/acalog Acalog] system by the Registrar’s Office. Questions about Acalog should directed to the [https://www.swarthmore.edu/registrar Registrar’s Office]. The course data in Acalog is then syndicated to each department’s corresponding courses page in Drupal (Example: [https://www.swarthmore.edu/history/current-courses History]).
Many departments also include an [[Events Calendar Feed Component|Events Calendar Feed]] component on their website. The content displayed in this component is pulled directly from the [https://swatcentral.swarthmore.edu/ Campus Calendar] (SwatCentral/25Live). Whenever an event is entered into [https://www.swarthmore.edu/events-management/information-faculty-staff-and-students Swat Central], it can be configured to appear in the appropriate Events Calendar Feed component in Drupal.


Questions about how the content appears on the Drupal page should be directed to the web team at [mailto:web-update@swarthmore.edu web-update@swarthmore.edu]
Using an Events Calendar Feed is a convenient way to promote upcoming events on both your department website and the Campus Calendar.


== 9.7) Videos ==
* For questions about reserving space or using the [https://swatcentral.swarthmore.edu/ Campus Calendar] (Swat Central/25Live), contact the [https://www.swarthmore.edu/events-management Events Management] office at [mailto:space@swarthmore.edu space@swarthmore.edu].
* For questions about events that appear (or do not appear) in your Events Calendar Feed component, contact the Campus Calendar administrators at [mailto:calendar@swarthmore.edu calendar@swarthmore.edu].


Drupal supports both [https://www.youtube.com/user/SwarthmoreCollegePA Youtube] and [https://vimeo.com/ Vimeo] videos. Several components allow videos. These include: [[Feature Component|Feature]], [[Feature Link List Component|Feature Link List]], [[Slideshow/Gallery Component|Slideshow/Gallery]], and [[Video-Only Component|Video Only]] components. Learn more about adding videos to specific components by clicking on any of the links listed above.
== 9.6 Acalog ==


{{Card|variant=info|title=Info|content=NOTE: Videos that appear on the [http://Swarthmore.edu Swarthmore.edu] website must meet certain requirements. Videos that do not meet these criteria are subject to removal.
Academic departments manage course information through the [https://www.swarthmore.edu/registrar/acalog Acalog] system maintained by the Registrar's Office. Questions about Acalog should be directed to the [https://www.swarthmore.edu/registrar Registrar's Office].


* The video must include closed captioning of the audio in order to meet Swarthmore’s accessibility standards.
Course information from Acalog is syndicated to each department's course pages in Drupal (for example, the [https://www.swarthmore.edu/history/current-courses History] department).
* The video must not include any copyrighted material such as copyrighted music or images.}}


== 9.8) Forms ==
Questions about how this content appears on the Drupal website should be directed to the Web Team at [mailto:web-update@swarthmore.edu web-update@swarthmore.edu].


There are three options for creating online forms. Which option is most appropriate will depend on the specific needs of the project.
== 9.7 Videos ==


* [[Google Forms|Google Forms]] - is a simple and easy way to create an online form, online surveys, and quizzes.
Drupal supports both [https://www.youtube.com/user/SwarthmoreCollegePA YouTube] and [https://vimeo.com/ Vimeo] videos. Videos can be used in several components, including:
* [[Qualtrics|Qualtrics]] - is a full-featured online survey tool that can be used to create and distribute online surveys. Qualtrics is supported by most of the top colleges and universities in the country and offers a simple, easy to understand interface, along with the power and flexibility of the best online survey tools. Qualtrics is available to all members of Swarthmore community and has been used for faculty and student research, informal polls, online voting for committees, order forms, and course evaluations.
* [mailto:web-update@swarthmore.edu Drupal Forms] - is an online form that is built directly in Drupal. Drupal forms must be created by the Web Team. Contact us at [mailto:web-update@swarthmore.edu web-update@swarthmore.edu] for more information on building Drupal forms.


* [[Feature Component|Feature]]
* [[Feature Link List Component|Feature Link List]]
* [[Slideshow/Gallery Component|Slideshow/Gallery]]
* [[Video-Only Component|Video Only]]


[[Category:Drupal]]
See the documentation for each component for instructions on adding videos.
 
{{Callout|type=important|title=Video Requirements|content=Videos published on the Swarthmore website must meet the following requirements:
 
* Videos must include '''closed captions''' to meet the College's accessibility standards.
* Videos must not contain copyrighted material (including music or images) unless you have permission to use it.}}
 
== 9.8 Forms ==
 
There are three primary options for creating online forms. The best choice depends on your project's requirements.


* [[Google Forms|Google Forms]] — A simple way to create forms, surveys, and quizzes.
* [[Qualtrics|Qualtrics]] — A full-featured survey platform available to the Swarthmore community. Qualtrics is commonly used for faculty and student research, committee voting, order forms, course evaluations, and more.
* [mailto:web-update@swarthmore.edu Drupal Forms] — Forms built directly within Drupal. Drupal forms must be created by the Web Team. Contact [mailto:web-update@swarthmore.edu web-update@swarthmore.edu] for more information.


<!-- Imported from Confluence page id=172818481 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/172818481/Specialized+Content) -->
[[Category:Drupal]]

Latest revision as of 14:58, 10 July 2026

9.1 Site Settings

All websites have Site Settings that allow editors to manage the global settings of their website. Site Settings include:

  • Contact Block — The department contact information displayed below the left-hand navigation. This includes the department's mailing address, phone and fax numbers, email address, hours of operation, and social media links.
  • Shared Site Content — A special content zone that appears at the bottom of every page on your site. Any component added to this zone is displayed across the entire site.

9.1.1 Accessing Site Settings

There are two ways to access Site Settings:

  1. After logging into Drupal and navigating to your website, click Site Settings in the administration toolbar at the top of the page.
  2. While viewing a page, click Site Settings located between Edit Page and Page Revisions.
Screenshot showing the two locations where the Site Settings link appears in Drupal.
Figure: Site Settings can be accessed from either the administration toolbar or the page toolbar.

9.2 The Contact Block

Every website includes a contact block that appears below the site's navigation in the left column. Because this information is managed through Site Settings, it is displayed consistently across every page on your website.

The Contact Block includes:

  1. Address
  2. Phone/Fax
  3. Email
  4. Hours
  5. Social Media — Links to your department's social media accounts.
  6. Contact and Social Media (Deprecated) — A legacy field that allows fully customized contact information. Unless you have a specific need for custom formatting, use the built-in contact fields instead.

There are two ways to manage the Contact Block:

  1. Built-in Fields — Recommended. Uses standardized formatting.
  2. Deprecated Field — Allows fully customized formatting.

9.2.1 Using the Built-in Contact Fields (Recommended)

  1. Enter your mailing address.
  2. Enter your phone and fax numbers.

Note: The Phone Link field must use the format tel:610-328-8000.

  1. Enter your department email address.
  2. Optionally, enter your hours of operation.
  3. Optionally, add social media accounts.
  4. If you are using the built-in contact fields, do not use the deprecated Contact and Social Media field described in Section 9.2.2.

Built-in fields display like this:

Screenshot showing the Contact Block displayed on a webpage.
Figure: The built-in contact fields produce a standardized contact block.

These fields are managed in Site Settings:

Screenshot showing the built-in Contact Block fields in Site Settings.
Figure: Use the built-in fields to maintain consistent formatting across your site.

9.2.2 Using the Deprecated Contact Field

  1. Enter all contact information into the Contact and Social Media field and format it as needed.
  2. Optionally, add social media information.
  3. If you use the deprecated field, do not use the built-in Address, Phone/Fax, Email, or Hours fields described above.
Screenshot showing the Contact Block created with the deprecated field.
Figure: Example of a Contact Block using the deprecated field.
Screenshot showing the deprecated Contact and Social Media field in Site Settings.
Figure: The deprecated field allows fully customized contact information.

9.2.3 Working with the Contact and Social Media (Deprecated) Field

The Contact and Social Media (Deprecated) field includes a menu (three vertical dots) in the upper-right corner. Selecting this menu opens the editor toolbar, allowing you to format text and create links.

Screenshot showing the formatting menu for the deprecated Contact and Social Media field.
Figure: The deprecated field includes a simplified formatting toolbar.

9.3 Shared Site Content

Every website includes a special Shared Site Content zone. Components added to this zone automatically appear on every page of your website.

Best Practice
Use Shared Site Content sparingly. In most cases, no more than one component should be placed in this area at a time.


9.3.1 Editing an Existing Shared Site Content Component

  1. Open Site Settings.
  2. Scroll to the Shared Site Content section.
  3. Edit any existing components directly within this section.
  4. Click Save at the bottom of the page.

9.3.2 Adding a Component to Shared Site Content

  1. Open Site Settings.
  2. Scroll to the Shared Site Content section.
  3. From the Add Component to Shared Site Content drop-down menu, choose the component you want to add.
  4. Complete the component fields.
  5. Click Save.

The following component types can be added to Shared Site Content:

  • Call to Action
  • Feature
  • Feature Link List
  • Link List

9.3.3 Removing a Shared Site Content Component

  1. Open Site Settings.
  2. Scroll to the Shared Site Content section.
  3. Locate the component you want to remove.
  4. Click the Remove button in the upper-right corner of the component.
  5. Click Save.

9.4 News

Screenshot showing a News Feed component.
Figure: Example of a News Feed component.

Some departments include a News Feed component on their website. The content displayed in the News Feed is produced by the Communications Office. Whenever a news story is published on the Swarthmore website, the Communications Office tags it so it automatically appears in the appropriate News Feed components across the website.

Some departments also publish their own news stories. If you want your department's stories to appear in your site's News Feed, complete the following steps:

  • Create a News Page in Drupal using the News Page content type.
  • When your story is ready for publication, contact the Communications Office at webeditor@swarthmore.edu. Communications staff will tag the story so it appears in the appropriate News Feed components.

If you have questions about news that appears (or does not appear) in your department's News Feed, contact the Communications Office at webeditor@swarthmore.edu.

9.5 Events

Screenshot showing an Events Calendar Feed component.
Figure: Example of an Events Calendar Feed component.

Many departments also include an Events Calendar Feed component on their website. The content displayed in this component is pulled directly from the Campus Calendar (SwatCentral/25Live). Whenever an event is entered into Swat Central, it can be configured to appear in the appropriate Events Calendar Feed component in Drupal.

Using an Events Calendar Feed is a convenient way to promote upcoming events on both your department website and the Campus Calendar.

9.6 Acalog

Academic departments manage course information through the Acalog system maintained by the Registrar's Office. Questions about Acalog should be directed to the Registrar's Office.

Course information from Acalog is syndicated to each department's course pages in Drupal (for example, the History department).

Questions about how this content appears on the Drupal website should be directed to the Web Team at web-update@swarthmore.edu.

9.7 Videos

Drupal supports both YouTube and Vimeo videos. Videos can be used in several components, including:

See the documentation for each component for instructions on adding videos.

Video Requirements
Videos published on the Swarthmore website must meet the following requirements:
  • Videos must include closed captions to meet the College's accessibility standards.
  • Videos must not contain copyrighted material (including music or images) unless you have permission to use it.


9.8 Forms

There are three primary options for creating online forms. The best choice depends on your project's requirements.

  • Google Forms — A simple way to create forms, surveys, and quizzes.
  • Qualtrics — A full-featured survey platform available to the Swarthmore community. Qualtrics is commonly used for faculty and student research, committee voting, order forms, course evaluations, and more.
  • Drupal Forms — Forms built directly within Drupal. Drupal forms must be created by the Web Team. Contact web-update@swarthmore.edu for more information.