Jump to content

Creating New Pages On Drupal: Difference between revisions

From Swarthmore Knowledge Base
Kwhiteb1 (talk | contribs)
No edit summary
Kwhiteb1 (talk | contribs)
mNo edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
← [[Drupal Home|Return to the Drupal 10 User Guide]]
{{DrupalBack}}
This section covers creating new pages in Drupal. There are three types of pages that can be created:


This section covers adding new pages to Drupal. There are three types of pages that can be created in Drupal: '''Standard Pages''', '''News Story Pages''', and '''News Links. '''
* '''Standard Pages''' — The most common page type used throughout the website. Standard Pages are appropriate for most content.
* '''News Pages''' — Intended for [[Specialized Content#9.2 News|news stories]] that are syndicated to [[News Feed Components|News Feed components]]. News Pages include additional fields such as Author, Post Date, Thumbnail, Abstract, and Related Stories. They are used primarily by the Communications Office (and some departments) that publish their own news.
* '''News Links''' — A specialized page type used to syndicate external (non-Drupal) news stories to a News Feed component. News Links are typically created only by the Communications Office.


* '''Standard Page''' - Most pages created in Drupal are standard pages. These are all-purpose pages used for most types of content.
== 3.1 Creating Standard Pages ==
* '''News Pages '''- News pages are intended for [https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/172818481/Specialized+Content#9.2)-News news stories] which are syndicated to [https://swatkb.atlassian.net/wiki/x/BwB1Cg News Feed components]. The News Page has several additional fields to support syndication including: Author, Post Date, Thumbnails, Abstracts, and Related Stories. This page type also has some additional social media sharing functionality. This page type is used primarily by the Communications Office (and by some departments) who generate their own news stories for the website.
 
* '''News Links''' - Is a specialized page type used to syndicate non-Drupal stories to the [https://swatkb.atlassian.net/wiki/x/BwB1Cg News Feed component]. New links are typically only used by the Communications Office to include external news stories on the Swarthmore website.
# Click '''Site Settings''' in the Drupal toolbar.
# Click '''Add Standard Page'''.
 
{{Screenshot|top_menu1.png|658px|Screenshot showing the Site Settings menu with the Add Standard Page option.|Select '''Add Standard Page''' from the Site Settings menu.}}
 
The page editor will open with all fields blank. Complete the fields as needed:
# '''Title''' — Required.
# '''Subtitle''' — Optional.
# '''Primary Image''' — Optional.
# '''Body''' — The main page content.
# '''Components''' — Optional page components.
# '''Publishing State''' — Save the page as either '''Draft''' or '''Published'''.
# Click '''Save'''.


== 3.1 Creating Standard Pages ==
Congratulations! You have created a new page in Drupal.
 
{{Screenshot|new_page_editor.png|681px|Screenshot of the Standard Page editor showing the available editing fields.|Complete the fields in the Standard Page editor before saving.}}


# Click on “Site Settings” in the top menu bar.
The example below compares the editor with the resulting webpage.
# Click on “Add Standard Page”
[[File:top_menu1.png|658px|alt=top_menu1.png]]
# This will open the Editor where all the fields are blank. Begin entering in your information:<br>1) Title - Give the new webpage a title. This is the only required field.<br>2) Subtitle - Give the an page an optional subtitle.<br>3) Primary Image - Add an optional image. Learn more about adding images.<br>4) Body - Add your page content here.<br>5) Components - Add optional components. Learn more about adding components.<br>6) Select if you wish to save page in either DRAFT mode or PUBLISHED more. Learn more about publishing.<br>7) Click the SAVE Button<br>
# Congratulations! You have created a new page in the Drupal CMS.


[[File:new_page_editor.png|681px|alt=new_page_editor.png]]
{{Screenshot|newpage_example1.png|500px|Screenshot of the Standard Page editor populated with content.|A completed Standard Page in the editor.}}
# Here is an side-by-side comparison of what appears in the Editor and what appears on a webpage:


[[File:newpage_example1.png|1021px|alt=newpage_example1.png]][[File:newpage_example2.png|1021px|alt=newpage_example2.png]]
{{Screenshot|newpage_example2.png|500px|Screenshot showing the draft Standard Page.|The resulting draft webpage.}}


== 3.2 Creating News Pages ==
== 3.2 Creating News Pages ==


{{Card|variant=info|title=Info|content=Note: News Pages will NOT appear in news feed component unless it has been first tagged by the Communications Office. If you have questions about news stories, please contact the Communications Office at [mailto:web-update@swarthmore.edu web-update@swarthmore.edu]}}
{{Callout|type=important|News Pages will '''not''' appear in a News Feed component until they have been tagged by the Communications Office.


# Click on “Site Settings” in the top menu bar.
If you have questions about News Pages, contact [mailto:web-update@swarthmore.edu web-update@swarthmore.edu].}}
# Click on “Add News Page”
[[File:top_menu_add_news_page.png|662px|alt=top_menu_add_news_page.png]]
# The Page Layout drop down menu should display '''Standard News'''
# Add a Title to the News Story
# Add an optional subtitle
# Add an optional primary image to the news story
# Add content to the body content block
# Add an optional news label
# Add attribution in the following format (by author name)
# Add a thumbnail image (if different from the primary image)
# Add optional related stories if their are specific news stories you wish to link to in the story related news sectiom
# Add optional components
# Select the page as DRAFT or PUBLISHED
# Click Save


[[File:news_page_1.png|596px|alt=news_page_1.png]]
# Click '''Site Settings''' in the Drupal toolbar.
# Click '''Add News Page'''.
 
{{Screenshot|top_menu_add_news_page.png|662px|Screenshot showing the Site Settings menu with the Add News Page option.|Select '''Add News Page''' from the Site Settings menu.}}
 
# Confirm that the '''Page Layout''' is set to '''Standard News'''.
# Add a '''Title'''.
# Add an optional '''Subtitle'''.
# Add an optional '''Primary Image'''.
# Add content to the '''Body''' field.
# Add an optional '''News Label'''.
# Add an attribution in the format '''by Author Name'''.
# Add a '''Thumbnail Image''' (if different from the Primary Image).
# Add optional '''Related Stories'''.
# Add optional '''Components'''.
# Save the page as either '''Draft''' or '''Published'''.
# Click '''Save'''.
 
{{Screenshot|news_page_1.png|596px|Screenshot of the News Page editor showing the additional news-specific fields.|News Pages include additional fields used for syndication and display.}}


== 3.3 Creating News Links ==
== 3.3 Creating News Links ==


{{Card|variant=info|title=Info|content=Note: News Links will NOT appear in news feed component unless it has been first tagged by the Communications Office. If you have questions about news links, please contact the Communications Office at [mailto:web-update@swarthmore.edu web-update@swarthmore.edu].}}
{{Callout|type=important|News Links will '''not''' appear in a News Feed component until they have been tagged by the Communications Office.


# Click on “Site Settings” in the top menu bar.
If you have questions about News Links, contact [mailto:web-update@swarthmore.edu web-update@swarthmore.edu].}}
# Click on “Add News Link”
[[File:top_menu_add_news_link.png|654px|alt=top_menu_add_news_link.png]]
# Add a Title
# Add the Link to the external website
# Add a Label to provide further context to readers. For news links, this is typically the name of publication or website that you are linking too.
# Add a thumbnail image that will appear in news listing
# Save the News Link as either Draft or Published. Note that News Links will NOT appear in News Feed component until they have been published.
# Click SAVE.


[[File:add_news_link2.png|685px|alt=add_news_link2.png]]
# Click '''Site Settings''' in the Drupal toolbar.
# Click '''Add News Link'''.


{{Screenshot|top_menu_add_news_link.png|654px|Screenshot showing the Site Settings menu with the Add News Link option.|Select '''Add News Link''' from the Site Settings menu.}}


[[Category:Drupal]]
# Add a '''Title'''.
# Enter the URL of the external website.
# Add a '''Label''' to provide context for readers. For News Links, this is typically the name of the publication or website.
# Add a '''Thumbnail Image'''.
# Save the News Link as either '''Draft''' or '''Published'''. Note that News Links will not appear in a News Feed component until they have been published.
# Click '''Save'''.


{{Screenshot|add_news_link2.png|685px|Screenshot of the News Link editor showing the required fields.|Complete the News Link fields before saving.}}


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

Latest revision as of 19:01, 9 July 2026

This section covers creating new pages in Drupal. There are three types of pages that can be created:

  • Standard Pages — The most common page type used throughout the website. Standard Pages are appropriate for most content.
  • News Pages — Intended for news stories that are syndicated to News Feed components. News Pages include additional fields such as Author, Post Date, Thumbnail, Abstract, and Related Stories. They are used primarily by the Communications Office (and some departments) that publish their own news.
  • News Links — A specialized page type used to syndicate external (non-Drupal) news stories to a News Feed component. News Links are typically created only by the Communications Office.

3.1 Creating Standard Pages

  1. Click Site Settings in the Drupal toolbar.
  2. Click Add Standard Page.
Screenshot showing the Site Settings menu with the Add Standard Page option.
Figure: Select Add Standard Page from the Site Settings menu.

The page editor will open with all fields blank. Complete the fields as needed:

  1. Title — Required.
  2. Subtitle — Optional.
  3. Primary Image — Optional.
  4. Body — The main page content.
  5. Components — Optional page components.
  6. Publishing State — Save the page as either Draft or Published.
  7. Click Save.

Congratulations! You have created a new page in Drupal.

Screenshot of the Standard Page editor showing the available editing fields.
Figure: Complete the fields in the Standard Page editor before saving.

The example below compares the editor with the resulting webpage.

Screenshot of the Standard Page editor populated with content.
Figure: A completed Standard Page in the editor.
Screenshot showing the draft Standard Page.
Figure: The resulting draft webpage.

3.2 Creating News Pages

Important
News Pages will not appear in a News Feed component until they have been tagged by the Communications Office. If you have questions about News Pages, contact web-update@swarthmore.edu.


  1. Click Site Settings in the Drupal toolbar.
  2. Click Add News Page.
Screenshot showing the Site Settings menu with the Add News Page option.
Figure: Select Add News Page from the Site Settings menu.
  1. Confirm that the Page Layout is set to Standard News.
  2. Add a Title.
  3. Add an optional Subtitle.
  4. Add an optional Primary Image.
  5. Add content to the Body field.
  6. Add an optional News Label.
  7. Add an attribution in the format by Author Name.
  8. Add a Thumbnail Image (if different from the Primary Image).
  9. Add optional Related Stories.
  10. Add optional Components.
  11. Save the page as either Draft or Published.
  12. Click Save.
Screenshot of the News Page editor showing the additional news-specific fields.
Figure: News Pages include additional fields used for syndication and display.

3.3 Creating News Links

Important
News Links will not appear in a News Feed component until they have been tagged by the Communications Office. If you have questions about News Links, contact web-update@swarthmore.edu.


  1. Click Site Settings in the Drupal toolbar.
  2. Click Add News Link.
Screenshot showing the Site Settings menu with the Add News Link option.
Figure: Select Add News Link from the Site Settings menu.
  1. Add a Title.
  2. Enter the URL of the external website.
  3. Add a Label to provide context for readers. For News Links, this is typically the name of the publication or website.
  4. Add a Thumbnail Image.
  5. Save the News Link as either Draft or Published. Note that News Links will not appear in a News Feed component until they have been published.
  6. Click Save.
Screenshot of the News Link editor showing the required fields.
Figure: Complete the News Link fields before saving.