Content Types: Adding a news feed

This help documentation is for inserting a news feed on different pages where tagged articles display in the feed. Since this example uses blocks, contextual filters can not be applied and if statements are coded in the twig templates to link to taxonomy URLs. This example shows the steps for one tag. If using multiple tags, you will need to create additional blocks for each tag and add additional if statements in the twig templates respectively. Depending upon your skill level, the steps may take from 1.5 to 3 hours to complete.

Step #1a: Turn on the following modules

  • Date Popup
  • Field collection
  • Redirect
  1. Click “Modules” on the black toolbar
  2. Search for the module name in the filter list
  3. Click the toggle to display “ON” and click “Save Configuration”

Step #1b: Create the page you want the feed to display on

  1. Go to Content and click "+ Add content", click "Basic page"
  2. Enter a "Title" and add content in the editor to display above the news feed
  3. Click "Save"
  4. Note the node number in URL when editing the page, this will be needed on the Step #6: Blocks tab

Step #1c: Add CSS

  1. Go to Appearance>Settings
  2. Copy and paste the sample CSS code into the "CSS" box
  3. Click "Save Configuration"

Step #1d: Add image styles

  1. Go to Configuration and under "MEDIA" click "Image styles"
  2. Click "+ Add style"
  3. Under "Style name" enter "news lead image"
  4. In the "Select a new effect" dropdown, select scale and click "Add"
  5. Under "Width" enter "1600" and click "Add effect"
  6. Next to "Large (480x480)" click "edit"
  7. In the "Select a new effect" dropdown, select "Scale and crop" and click "Add"
  8. Under "Width" enter "350", under "Height" enter "200" and click "Update effect"

screenshot feed page

Step #2: Add a Taxonomy Vocabulary

  1. Go to Structure>Taxonomy
  2. Click "+ Add vocabulary"
  3. Enter "News" in the name field
  4. Enter "news section tags" in the description field
  5. Click "Save"
  6. Next to "News" click "add terms", enter a term "Name" and click "Save". Repeat for each term.
Which feed an article displays in is determined by which term is selected when adding an article. Choose term names that describe the different sections of the site where news feeds will display.
screenshot of taxonomy terms

Step #3: Create a Content Type

  1. Go to Structure>Content Types
  2. Click "+ Add content type"
  3. Enter "News" in the Name field
  4. On the left navigation
    1. Click "Publishing options"and uncheck Promoted to front page
    2. Click "Display settings" and uncheck "Display author and date information"
  5. Click "Save content type"
  6. On the Content types page, next to "News", click "manage fields" and add the following new fields and field settings (note: field name must be unique in the system, if already in use you may need a different field name which will also need updated in the twig templates).
    • Byline
      1. In "Add new field", enter the label "Byline", select field type "Text", click "Save"
      2. On the Byline "Field Settings" tab, click "Save field settings" then click "Save Settings"
    • Date Posted
      1. In "Add new field", enter the label "Date Posted", select field type "Date", in the "Select list" dropdown select "Pop-up calendar and click "Save"
      2. On the Date Posted "Field Settings" tab, under "Date attributes to collect" check only month and day
      3. Click "Save field settings" then click "Save settings"
    • Lead Image
      1. In "Add new field", enter the label "Lead image", select field type "Image", click "Save"
      2. On the Lead image "Field Settings" tab, click "Save field settings"
      3. Under "File directory" enter "images/news/lead"
      4. Click "Enable alt field"
      5. Click "Save settings"
    • Optional Upload
      1. In "Add new field", enter the label "Optional Upload", select field type "Field collection", select "Embedded" dropdown and click "Save"
      2. On the Optional Upload "Field Settings" tab, click "Save field settings"
      3. Under "OPTIONAL UPLOAD FIELD SETTINGS", change the "Number of values" dropdown to "Unlimited"
      4. Click "Save settings"
      5. Next to "Optional Upload" click "field_optional_upload"
      6. In "Add new field", enter the label "image", select field type "image" and click "Save"
      7. On the image "Field Settings" tab, click "Save field settings"
      8. Click "Enable alt field"
      9. Click "Save settings"
    • Optional Link
      1. Go to Structure>Content types and next to "News" click "manage fields"
      2. In "Add new field", enter the label "Optional Link", select field type "Link" and click "Save"
      3. On the Optional Link "Field Settings" tab, click "Save field settings"
      4. Under "Link Title", select "Required Title"
      5. Click "Save settings"
    • Tags
      1. In "Add new field", enter the label "Tags", select field type "Term reference", change the "autocomplete term..." dropdown to "Check boxes/radio buttons" and click "Save"
      2. On the Tags "Field Settings" tab, under "Vocabulary", select "News" and click "Save field settings"
      3. Under "TAGS FIELD SETTINGS", change the "Number of values" dropdown to "Unlimited"
      4. Click "Save settings"
  7. On the Structure>Content type> News page, in the table, move "Body" under "Lead image" and click "Save"
    screenshot content type
  8. On the Structure>Content type> News page, click the "Manage Display" tab
    1. Click "CUSTOM DISPLAY SETTINGS"
    2. Check the box next to "Teaser" and "Abbreviated teaser"
    3. Click "Save"
    4. Select the "Default" button
    5. In the table, move fields in the order you want them to display on an article page (see example on screenshot below)
    6. Change all of the fields' "LABEL" dropdowns to "Hidden"
    7. Click "Save"
      screenshot mange content type display
    8. Next to "Lead image" click the gear icon
    9. In the "Image style" dropdown, select "news lead image"
    10. Click "Update"
    11. Click "Save"
  9. Go to Content, click "+ Add content" and click "News"
  10. Create at least five news articles with the same tag selected for testing (example tag: Alumni News")
  11. Make one of the test news articles a feature by editing the article and clicking "Publishing Options" on the bottom left navigation then checking the box next to "Promoted to front page"

Step #4: View

  1. Go to Structure>Views
  2. Click "+ Import"
  3. Under "View name" enter "news"
  4. Cut and paste the sample view code into the "Paste view code here" box.
  5. Click "Import"
  6. Click "News Band - Alumni News" button
  7. Next to "Display name" click the "News Band - Alumni News" link, change "Alumni News" to the name of the tag you're using to filter the feed (Example: News Band - [tag name]) and click "Apply". Do the same for "Main Feature - Alumni News"
  8. Under "FILTER CRITERIA" click "Content: Tags (=)"
    1. Next to "For", in the dropdown, select "This block (override)" and under "Operator" select "Is one of"
    2. Under "Select terms from vocabulary News" type the name of the tag you're using to filter the feed (Example: Alumni News) and select it
    3. Click "Apply (this display)"
    4. Click "Main Feature - Alumni News" button and repeat the "FILTER CRITERIA" steps above
  9. On the "News (Content)" page, click "Save"

screenshot view

Step #5: Create Twig Templates

  1. Go to Structure>Twig templates
  2. Click "+ Create template"
  3. Create the following templates
    • node__news
      1. Under "Theme Hook" enter "node__news"
      2. Copy and paste the sample node__news code into the "Template" box
      3. Change the taxonomy term URL alias and anchor text for your news feed.

        {% if myfield.taxonomy_term.name == 'Alumni News' %} <a href="news/alumni-news"><em>More Alumni News</em></a>

      4. Click "Save"
    • node__news__abbr_teaser
      1. Under "Theme Hook" enter "node__news__abbr_teaser"
      2. Copy and paste the sample node__news__abbr_teaser code into the "Template" box
      3. Change the taxonomy term URL alias and anchor text for your news feed.

        {% if myfield.taxonomy_term.name == 'Alumni News' %}

        <a href="news/alumni-news">
        READ MORE ALUMNI NEWS


      4. Click "Save"
    • node__news__teaser
      1. Under "Theme Hook" enter "node__news__teaser"
      2. Cut and paste the sample node__news__teaser code into the "Template" box and click "Save"
    • views_view_unformatted__news__block_3
      1. Under "Theme Hook" enter "views_view_unformatted__news__block_3"
      2. Cut and paste the sample views_view_unformatted__news__block_3 code into the "Template" box
      3. Change the taxonomy term URL alias and anchor text for your news feed.

        <a href="news/alumni-news" class="wdn-alt-header read-more" style="font-size: .8rem;"> Read More Alumni News → </a>

      4. Click "Save"
    • views_view_unformatted__news__block_2
      1. Under "Theme Hook" enter "views_view_unformatted__news__block_2"
      2. Cut and paste the sample views_view_unformatted__news__block_2 code into the "Template" box
      3. Click "Save"

Step #6: Blocks

  • Go to Structure>Blocks
  • If the blocks aren't displaying under "Content", scroll down to "Disabled" to find them
  • Next to "View: News: News Band - [tag]", click "configure"
  • Under "Block title" enter "<none>"
  • Under the UNLedu (default theme), select "Content", if not already selected
  • On the lower left navigation select "Pages", under "Show block on specific page" select "Only the listed pages" and enter the node path in the box for the page the news feed will display on (Example: node/155)
  • Click "Save block"
  • Repeat the steps for "View: News: Main Feature - [tag]
  • Go to the page the blocks display on to view your feed
screenshot blocks

Page Feedback

Was this article helpful?