Jump to content

Getting Started with Drupal: Difference between revisions

From Swarthmore Knowledge Base
Kwhiteb1 (talk | contribs)
Kwhiteb1 (talk | contribs)
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
← [[Drupal Home|Return to the Drupal 10 User Guide]]
{{DrupalBack}}
 
Lets begin by learning how to login to Drupal, then move onto the learning about how of the Drupal console works, and finally end with how publishing works.
Lets begin by learning how to login to Drupal, then move onto the learning about how of the Drupal console works, and finally end with how publishing works.


Line 11: Line 10:
# After logging in, you will be redirected to your Drupal Account Information page.
# After logging in, you will be redirected to your Drupal Account Information page.


<div style="border:1px solid #c7d8f5; background:#f8fbff; border-radius:8px; padding:16px; margin:1.5em 0;">
{{Callout|type=tip|You'll know you've successfully logged into Drupal when you see '''My Sites''' and '''your name''' appear in the black menu bar at the top of the browser window.{{Screenshot|DrupalMySites.png|500px|Screenshot showing the My Sites menu in the Drupal toolbar.|The Drupal toolbar after a successful login.}}}}
<div style="font-weight:bold; font-size:1.1em; color:#1d4f91; margin-bottom:.75em;">
💡 Tip
</div>
<p style="margin-top:0;">
You'll know you've successfully logged into Drupal when you see <b>My Sites</b> and <b>your name</b> appear in the black menu bar at the top of the browser window.
</p>
 
  <div style="display:inline-block; border:1px solid #ddd; padding:12px; border-radius:6px; background:#fff;">
    [[File:DrupalMySites.png|500px]]
  </div>
</div>


== 1.2 How the Drupal Console Works ==
== 1.2 How the Drupal Console Works ==


Clicking on your name will open a submenu below the black menu bar with a '''Log Out''' option. You can use this to logout of Drupal when you are done editing content in the system.
Clicking on your name will open a submenu below the black menu bar with a '''Log Out''' option. You can use this to logout of Drupal when you are done editing content in the system.
{{Screenshot|Screenshot 2024-07-09 at 3.17.30 PM.png|600px|Screenshot showing the admin toolbar|The Drupal toolbar showing the logout button}}


[[File:Screenshot 2024-07-09 at 3.17.30 PM.png|624px|alt=Screenshot 2024-07-09 at 3.17.30 PM.png]]
=== 1.2.1 My Sites ===
 
== 1.2.1 My Sites ==


Clicking '''My Sites''' will open a submenu below the black menu bar that has two options:
Clicking '''My Sites''' will open a submenu below the black menu bar that has two options:
Line 37: Line 24:
# '''View My Profiles '''- lists all the profiles that you currently have permission to edit.
# '''View My Profiles '''- lists all the profiles that you currently have permission to edit.


[[File:Drupal-MySitesNumbers.png|643px|alt="View My Sites" tab selected in the Drupal user interface under the "My Sites" menu]]
{{Screenshot|Drupal-MySitesNumbers.png|643px|Screenshot of the "View My Sites" page showing the Websites/Profiles tabs, search field, and list of websites available for editing.|The View My Sites page lists the websites you have permission to edit.}}


== <br>1.2.2 View My Sites ==
=== 1.2.2 View My Sites ===


Clicking the '''View My Sites''' link will display a list all the websites that you currently have permission to edit. It will also indicate if the website is currently published.
Clicking the '''View My Sites''' link will display a list all the websites that you currently have permission to edit. It will also indicate if the website is currently published.
Line 47: Line 34:
# '''Title | Website Published''' - Displays the site(s) that you have have access to edit. Clicking the site name will take you directly to the website so that you can begin editing it. '''Website Published''' displays if the website is currently published or not.
# '''Title | Website Published''' - Displays the site(s) that you have have access to edit. Clicking the site name will take you directly to the website so that you can begin editing it. '''Website Published''' displays if the website is currently published or not.


[[File:view_my_sites2.png|643px]]
{{Screenshot|view_my_sites2.png|643px|Screenshot of the "View My Sites" page showing the Websites/Profiles tabs, search field, and list of websites available for editing.|The View My Sites page lists the websites you have permission to edit.}}
 
{{Callout|type=important|title=Drupal Training|<p>'''You must complete Drupal training before being given editing access to any website.'''</p>
 
<p>If you have questions about user permissions, please contact [mailto:web-update@swarthmore.edu web-update@swarthmore.edu].</p>}}
 
=== 1.2.3 View My Profiles ===


'''View My Profiles''' lists all the Drupal profiles that you have permission to edit. It also indicates whether each profile is currently published. Selecting a name from the list will take you directly to that person's profile so you can begin editing it.


<div style="border:1px solid #c7d8f5; background:#f8fbff; border-radius:8px; padding:16px; margin:1.5em 0;">
Most Drupal users will only have permission to edit their own profile. Some departments, however, grant shared access so designated staff members can manage profiles on behalf of others. This is commonly used by administrative assistants who maintain faculty profile information, such as office hours and contact details.
<div style="font-weight:bold; font-size:1.1em; color:#1d4f91; margin-bottom:.75em;">
Drupal Training
</div>
<p style="margin-top:0;">
'''You must complete Drupal training before being given editing access to any website'''. All questions about user permissions should be sent to: [http://mailto:web-update@swarthmore.edu web-update@swarthmore.edu]
</p>
</div>


== <br>1.2.3 View My Profiles ==
# '''Websites | Profiles''' — Switches between the websites and profiles lists.
# '''Search''' — Searches the list of profiles. This is especially useful if you have permission to edit multiple profiles.
# '''Name | Profile Page Published''' — Displays the profiles you have permission to edit. Selecting a name opens that profile for editing. The list also indicates whether each profile page is currently published.


'''View My Profiles''' will list all the Drupal profiles that you have permission to edit. It will also indicate if the profile is currently published. By clicking on one of the names listed, you will be taken directly there and can begin editing the profile information.
{{Callout|type=tip|Most Drupal editors will only have permission to edit their own profile unless shared access has been configured for their department.}}
{{Screenshot|view_my_profiles1.png|643px|Screenshot showing the View My Profiles page with the profile search field and a list of editable profiles.|The View My Profiles page lists the Drupal profiles you have permission to edit.
}}


Most Drupal users will normally only have access to their own profile. However, some departments are setup to allow certain members of their department to be able to access other people’s profiles. This is most commonly used by administrative assistants of academic departments who support faculty with maintaining their online information (such as changing office hours in their directory/profile).
=== 1.2.4 Toolbar Controls ===


# '''Websites | Profiles''' - lets you toggle between websites or profiles.
The upper-right corner of the Drupal toolbar contains two controls that let you customize your editing experience.
# '''Search''' - allows you to search the list of profiles. This tool helpful if you have access to multiple profiles.
 
# '''Name | Profile Page Published''' - Displays the profile(s) that you have access to edit. This includes your own profile. Clicking the name will take you directly to the profile. The list will also indicate if the profile page is published or not.
# '''Toggle Contextual Links''' — Turns Drupal's in-context editing mode on or off. When enabled, edit icons appear next to editable content throughout the page.
# '''Toggle Menu Bar Orientation''' — Switches the Drupal administration toolbar between a horizontal layout across the top of the page and a vertical layout along the left side.


{{Card|variant=info|title=Info|content='''Note: Most Drupal editors will typically have access to only their own profile unless shared access has been setup within your department.'''}}
{{Screenshot|contextual_links_1.png|643px|Screenshot showing the Toggle Contextual Links and Toggle Menu Bar Orientation controls in the Drupal toolbar.|The Drupal toolbar includes controls for enabling contextual editing and changing the toolbar layout.}}
[[File:view_my_profiles1.png|643px]]


== 1.2.4 Toggle Contextual Links & Toggle Menu Bar Orientation ==
=== 1.2.5 Toggle Contextual Links ===


[[File:contextual_links_1.png|643px]]
The '''Toggle Contextual Links''' button enables Drupal's in-context editing mode. When turned on, pencil icons appear next to editable content throughout the page, allowing you to jump directly to the editor for a section or component without first navigating through the menu bar.


== 1.2.5 Toggle Contextual Links ==
This feature is especially useful when making small changes because it lets you edit content directly where it appears on the page.


Located in the upper right corner of the Drupal menu bar is blue button labelled '''Toggle Contextual Links'''. When enabled, the Drupal editor will display a series of pencil icons next to every section or component that can be edited. This allows editors to conveniently edit content anywhere on the page without having to use the menu bar.
{{Callout|type=tip|Contextual links are only visible to users with permission to edit the page. Website visitors will never see these edit icons.}}


[[File:DrupalEditToggle.png|676px]]
{{Screenshot|DrupalEditToggle.png|676px|Screenshot showing contextual edit icons appearing next to editable content on a webpage.|When contextual links are enabled, edit icons appear next to editable content throughout the page.}}


== <br>1.2.6 Toggle Menu Bar Orientation ==
=== 1.2.6 Toggle Menu Bar Orientation ===


Located in the upper right corner of the Drupal menu bar is an arrow icon. This will switch the Drupal menu functions from appearing as horizontal bar across the top of the browser to a vertical left column. Switching the arrow in the vertical layout will change the view back to the horizontal layout.
The '''Toggle Menu Bar Orientation''' button changes how the Drupal administration toolbar is displayed.


<br>'''Menu Bar - Horizontal Orientation'''
* '''Horizontal''' — Displays the toolbar across the top of the browser window. This is the default layout.
* '''Vertical''' — Displays the toolbar in a collapsible panel along the left side of the browser window. Some editors prefer this layout because it provides more vertical space for editing.


[[File:contextual_links_1.png|676px]]
You can switch between the two layouts at any time. Drupal remembers your preference for future editing sessions.
<br>'''Menu Bar - Vertical Orientation'''


[[File:horizonatal_orientation.png|676px]]
'''Horizontal Toolbar'''


== 1.3 How Publishing Works ==
{{Screenshot|contextual_links_1.png|676px|Screenshot showing the Drupal toolbar in its horizontal layout.|The default horizontal toolbar layout.}}


Every webpage in the Drupal CMS can have a '''Published''' version and a '''Draft''' version, OR be set as '''Unpublished'''.
'''Vertical Toolbar'''


* '''Published '''- The published version of the page is what the public sees when they visit the page’s URL. Published indicates that the webpage is live to the world.
{{Screenshot|horizonatal_orientation.png|676px|Screenshot showing the Drupal toolbar in its vertical layout.|The optional vertical toolbar layout.}}
* '''Draft''' - This is working copy (or DRAFT) of a webpage that can only be viewed and accessed by Drupal editors. This is the version that you and your team would work on when making changes to a page. Once the page is ready (and/or has been approved for publication), you would change the state from Draft to Publish to make it become the published live version.
* '''Unpublished '''- If you no longer wish a page to be available to the public, then you can change the state to unpublished. Unpublished does not mean delete. The page still exists in the Drupal system and can be restored again. You can think of like your own computer’s recycle bin or trash bin. If anyone from the public goes to an unpublished page, they will get a “Access Forbidden” error message.


{{Card|variant=panel|title=Panel|content=* Unpublish does not mean Delete. If you want a particular webpage to be permanently DELETED, then you must contact the web team.
== 1.3 How Publishing Works ==
* Never unpublish your homepage.
* Avoid unpublishing pages that have subpages or dependencies.}}


== 1.3.1 The Publishing Console ==
Every page in Drupal exists in one of three publishing states: '''Published''', '''Draft''', or '''Unpublished'''. Understanding these states is important because they determine who can view your content.


All Drupal publishing is managed in the editor’s right column. Going from top to bottom in the right column:
* '''Published''' — The page is live and publicly accessible. Visitors can view the page using its URL.
* '''Draft''' — A working copy that is only visible to Drupal editors. Drafts allow you and your collaborators to make changes without affecting the live website. When the page is ready, change its state to '''Published''' and save it to make the changes public.
* '''Unpublished''' — The page is hidden from public view but remains in Drupal. Unpublishing does '''not''' delete the page. It can be edited and republished later. Visitors who attempt to access an unpublished page will receive an '''Access Forbidden''' message.


# '''Last Saved / Author''' - This section will tell you when the last time this page was updated and who the original creator of the page was.
{{Callout|type=warning|title=Before You Unpublish|
# '''Revision Log Message''' - This section allows you to add notes or comments (to each saved version) that only you and other Drupal editors can see. This can be helpful when there are multiple editors making changes to same page as it lets you and your team keep track of changes.
* '''Unpublishing does not delete a page.''' If you need a page permanently removed from Drupal, contact the Web Team.
# '''Change To''' - This drop down lets you manage the page state/publishing (published, draft, unpublish)
* '''Never unpublish your site's homepage.'''
# '''Menu Settings -''' This advanced feature lets you add a page directly to your navigation.
* Avoid unpublishing pages that have child pages or other dependencies unless you understand the impact on your site.
}}


Save or Cancel is located outside the right column and to the right of the page title.
=== 1.3.1 The Publishing Console ===


# '''Save / Cancel '''- You can click '''SAVE''' to commit your changes to the system or '''CANCEL''' if you do not wish to save your changes.
The publishing controls are located in the right-hand column of the page editor. From top to bottom, you'll find the following sections:


[[File:publishing1.png|688px]]
# '''Last Saved / Author''' — Displays when the page was last saved and identifies the original author.
There are two option after you’ve made changes. You can save as a draft or you can publish the page.
# '''Revision Log Message''' — Lets you record notes about the changes you've made. Revision log messages are visible only to Drupal editors and can help collaborators understand what changed between versions.
# '''Change To''' — Controls the page's publishing state ('''Draft''', '''Published''', or '''Unpublished''').
# '''Menu Settings''' — Allows you to add the page to your site's navigation. This is an advanced option and is covered later in this guide.
# '''Save / Cancel''' — Located beside the page title, outside the right column. Select '''Save''' to commit your changes or '''Cancel''' to discard them.


You can also unpublish a page. Unpublishing a page does not remove it from Drupal, but it does remove it from public view. If you unpublish a page please contact [mailto:web-update@swarthmore.edu web-update@swarthmore.edu], or submit a ticket so we can adjust search engine results.
{{Screenshot|publishing1.png|688px|Screenshot of the Drupal publishing controls in the page editor.|The publishing controls are located in the right-hand column of the page editor.}}
After making changes to a page, you typically have two options:


# '''Draft''' - To create a draft (or update an existing draft), simply select '''Draft''' in the drop down, and then click '''Save.'''
* '''Save as Draft''' — Saves your changes without making them visible to the public.
# '''Published''' - To make your webpage (or current draft) the new live version, select '''Published''' in the drop down, and then click '''Save.'''
* '''Publish''' — Makes the current version of the page publicly available.


[[File:publish2.png|276px]]
You can also '''Unpublish''' a page to remove it from public view while keeping it in Drupal.


{{Callout|type=important|title=Unpublishing Pages|
If you unpublish a page, it will no longer be accessible to website visitors. The page is '''not''' deleted and can be republished later.


[[Category:Drupal]]
If you unpublish an existing public page, please notify the Web Team at [mailto:web-update@swarthmore.edu web-update@swarthmore.edu] (or submit a support request) so search engine listings can be updated if necessary.
}}
To change a page's publishing state:


# Select the desired state from the '''Change To''' menu.
# Click '''Save'''.


<!-- Imported from Confluence page id=182255624 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/182255624/Getting+Started) -->
{{Screenshot|publish2.png|276px|Screenshot of the Change To menu showing the Draft and Published options.|Select the desired publishing state before saving the page.}}

Latest revision as of 18:50, 9 July 2026

Lets begin by learning how to login to Drupal, then move onto the learning about how of the Drupal console works, and finally end with how publishing works.

1.1 Logging Into Drupal

You only need a web browser to use Drupal. You do not need to download or install any special software. Access to specific websites and profiles on the Swarthmore College website are dependent on your individual user permissions.

  1. To login to Drupal, type swarthmore.edu/user into the web browser of your choice.
  2. Login using your network username and password credentials.
  3. After logging in, you will be redirected to your Drupal Account Information page.
Tip
You'll know you've successfully logged into Drupal when you see My Sites and your name appear in the black menu bar at the top of the browser window.
Screenshot showing the My Sites menu in the Drupal toolbar.
Figure: The Drupal toolbar after a successful login.


1.2 How the Drupal Console Works

Clicking on your name will open a submenu below the black menu bar with a Log Out option. You can use this to logout of Drupal when you are done editing content in the system.

Screenshot showing the admin toolbar
Figure: The Drupal toolbar showing the logout button

1.2.1 My Sites

Clicking My Sites will open a submenu below the black menu bar that has two options:

  1. View My Sites - lists all the websites that you currently have permission to edit.
  2. View My Profiles - lists all the profiles that you currently have permission to edit.
Screenshot of the "View My Sites" page showing the Websites/Profiles tabs, search field, and list of websites available for editing.
Figure: The View My Sites page lists the websites you have permission to edit.

1.2.2 View My Sites

Clicking the View My Sites link will display a list all the websites that you currently have permission to edit. It will also indicate if the website is currently published.

  1. Websites | Profiles - lets you toggle between websites or profiles.
  2. Search - allows you to search the list of websites. This tool helpful if you have access to multiple websites.
  3. Title | Website Published - Displays the site(s) that you have have access to edit. Clicking the site name will take you directly to the website so that you can begin editing it. Website Published displays if the website is currently published or not.
Screenshot of the "View My Sites" page showing the Websites/Profiles tabs, search field, and list of websites available for editing.
Figure: The View My Sites page lists the websites you have permission to edit.
Drupal Training

You must complete Drupal training before being given editing access to any website.

If you have questions about user permissions, please contact web-update@swarthmore.edu.


1.2.3 View My Profiles

View My Profiles lists all the Drupal profiles that you have permission to edit. It also indicates whether each profile is currently published. Selecting a name from the list will take you directly to that person's profile so you can begin editing it.

Most Drupal users will only have permission to edit their own profile. Some departments, however, grant shared access so designated staff members can manage profiles on behalf of others. This is commonly used by administrative assistants who maintain faculty profile information, such as office hours and contact details.

  1. Websites | Profiles — Switches between the websites and profiles lists.
  2. Search — Searches the list of profiles. This is especially useful if you have permission to edit multiple profiles.
  3. Name | Profile Page Published — Displays the profiles you have permission to edit. Selecting a name opens that profile for editing. The list also indicates whether each profile page is currently published.
Tip
Most Drupal editors will only have permission to edit their own profile unless shared access has been configured for their department.
Screenshot showing the View My Profiles page with the profile search field and a list of editable profiles.
Figure: The View My Profiles page lists the Drupal profiles you have permission to edit.

1.2.4 Toolbar Controls

The upper-right corner of the Drupal toolbar contains two controls that let you customize your editing experience.

  1. Toggle Contextual Links — Turns Drupal's in-context editing mode on or off. When enabled, edit icons appear next to editable content throughout the page.
  2. Toggle Menu Bar Orientation — Switches the Drupal administration toolbar between a horizontal layout across the top of the page and a vertical layout along the left side.
Screenshot showing the Toggle Contextual Links and Toggle Menu Bar Orientation controls in the Drupal toolbar.
Figure: The Drupal toolbar includes controls for enabling contextual editing and changing the toolbar layout.

1.2.5 Toggle Contextual Links

The Toggle Contextual Links button enables Drupal's in-context editing mode. When turned on, pencil icons appear next to editable content throughout the page, allowing you to jump directly to the editor for a section or component without first navigating through the menu bar.

This feature is especially useful when making small changes because it lets you edit content directly where it appears on the page.

Tip
Contextual links are only visible to users with permission to edit the page. Website visitors will never see these edit icons.


Screenshot showing contextual edit icons appearing next to editable content on a webpage.
Figure: When contextual links are enabled, edit icons appear next to editable content throughout the page.

1.2.6 Toggle Menu Bar Orientation

The Toggle Menu Bar Orientation button changes how the Drupal administration toolbar is displayed.

  • Horizontal — Displays the toolbar across the top of the browser window. This is the default layout.
  • Vertical — Displays the toolbar in a collapsible panel along the left side of the browser window. Some editors prefer this layout because it provides more vertical space for editing.

You can switch between the two layouts at any time. Drupal remembers your preference for future editing sessions.

Horizontal Toolbar

Screenshot showing the Drupal toolbar in its horizontal layout.
Figure: The default horizontal toolbar layout.

Vertical Toolbar

Screenshot showing the Drupal toolbar in its vertical layout.
Figure: The optional vertical toolbar layout.

1.3 How Publishing Works

Every page in Drupal exists in one of three publishing states: Published, Draft, or Unpublished. Understanding these states is important because they determine who can view your content.

  • Published — The page is live and publicly accessible. Visitors can view the page using its URL.
  • Draft — A working copy that is only visible to Drupal editors. Drafts allow you and your collaborators to make changes without affecting the live website. When the page is ready, change its state to Published and save it to make the changes public.
  • Unpublished — The page is hidden from public view but remains in Drupal. Unpublishing does not delete the page. It can be edited and republished later. Visitors who attempt to access an unpublished page will receive an Access Forbidden message.
Before You Unpublish
  • Unpublishing does not delete a page. If you need a page permanently removed from Drupal, contact the Web Team.
  • Never unpublish your site's homepage.
  • Avoid unpublishing pages that have child pages or other dependencies unless you understand the impact on your site.


1.3.1 The Publishing Console

The publishing controls are located in the right-hand column of the page editor. From top to bottom, you'll find the following sections:

  1. Last Saved / Author — Displays when the page was last saved and identifies the original author.
  2. Revision Log Message — Lets you record notes about the changes you've made. Revision log messages are visible only to Drupal editors and can help collaborators understand what changed between versions.
  3. Change To — Controls the page's publishing state (Draft, Published, or Unpublished).
  4. Menu Settings — Allows you to add the page to your site's navigation. This is an advanced option and is covered later in this guide.
  5. Save / Cancel — Located beside the page title, outside the right column. Select Save to commit your changes or Cancel to discard them.
Screenshot of the Drupal publishing controls in the page editor.
Figure: The publishing controls are located in the right-hand column of the page editor.

After making changes to a page, you typically have two options:

  • Save as Draft — Saves your changes without making them visible to the public.
  • Publish — Makes the current version of the page publicly available.

You can also Unpublish a page to remove it from public view while keeping it in Drupal.

Unpublishing Pages

If you unpublish a page, it will no longer be accessible to website visitors. The page is not deleted and can be republished later.

If you unpublish an existing public page, please notify the Web Team at web-update@swarthmore.edu (or submit a support request) so search engine listings can be updated if necessary.

To change a page's publishing state:

  1. Select the desired state from the Change To menu.
  2. Click Save.
Screenshot of the Change To menu showing the Draft and Published options.
Figure: Select the desired publishing state before saving the page.