Create News content in your website

Submitted by kplatis on Wed, 05/27/2020 - 16:56

The following tutorial is a suggestion. It is not the only way to display news in your website, but it is a way to do it using the components provided by the infrastructure.

Pre-requisites

In order to follow the tutorial below, you should first enable 2 Drupal modules: CERN Components and CERN Display Formats. The modules are already installed in the infrastructure (hence to your website) so just navigate to Extend from the admin bar, search for the modules and enable them.

1) Create a Content Type

First of all you need a content type that constitutes the News Content Type.

  1. Navigate to Structure > Content Types > New Content Type
  2. Give a name to the content type (eg. News)
  3. Add some meaningful fields
    1. Body: Text Field
    2. Image: Image Field
    3. Publication Date: Date Field
    4. Tags: Reference to taxonomy

2) Setup how the News node will be displayed

In this step you setup how the node will look like when you visit it. This is done by setting up the Full Content display of the content type you created in step 1.

  1. Visit the Manage Display settings of the content type you created in step 1.
  2. Enable the Full Content view mode of the content type and click Save.Full content enable step
  3. Visit the Full Content tab and choose a layout for your News pages. Our suggestion is to use the News Full Content pattern. Select this pattern and map the fields to the ones of the pattern.
  4. Save the display.

3) Setup a view page to display and filter all your news

Having setup how each news node will look like when you visit it, it is good to have a page where the site visitors can search for the news you will publish. In Drupal terms, this job is done by a view and the final result will look something like the following image (without the colours). To explain the process in a better, this step will be broken into 2 sub-steps.

News View

 

(a) Setup how each news piece will be rendered in the view

In this step you will setup how each one of the news pieces will be rendered (marked red in the image above)

  1. Visit the Manage Display of the News content you have already created (Structure > Content Types > News > Manage Display)
  2. In the tabs list on the top of the page, select a display to map (eg. Teaser)
  3. At the bottom of the display select to render this display using the Preview List display.Map the fields of the news content type to the ones of the pattern as shown in the documentation of Preview list.
  4. Save the display

(b) Setup the view

Having setup how each node will be displayed in the previous step, its time to setup the view that will gather all news in one page and add search fields. This is done by creating a view.

  1. Create a view by navigating in Structure > Views > Add View
  2. Fill the initial data of the view
    1. Give a name to the view (eg. "News" or "All News")
    2. Show Content of type News
    3. Create a page with a title and a URL
    4. Save
  3. In the view settings:
    1. Select Teaser List as Format
    2. Show Display Suite: Content and select as view mode the display you mapped in step (a). In our case it was Teaser.
    3. Under Filter Criteria add the fields that you want to expose to the visitors of your page. Eg. Title, publication date etc. In order to expose a filter, you should check the option "Expose this filter to visitors, to allow them to change it" as in the picture below.How to expose filter
    4. Add any other configuration you think is useful. For example sorting criteria, number of results shown in the view etc.
    5. Save the view

 

4) (Optional) Setup a URL alias pattern

A nice to your content type is to have a common alias pattern for all the news pages. For example you might want your news to have a URL of type /news/<title-of-your-news-piece>. In order to achieve this:

  1. Navigate to the URL alias settings (Configuration > URL aliases > Patterns > Add Pathauto Pattern
  2. Select Pattern type Content and Content Type the News one.
  3. In Path Pattern, you should fill the pattern that your nodes will have
    1. For constant words (eg. /news/) use words
    2. For dynamic values (eg. <title-of-your-news-piece>) you should use tokens. To find the available tokens, click on Browse Available Tokens
    3. Eg. in order to have the pattern /news/<title-of-your-news-piece>, the pattern value should be "/news/[node:title]"
  4. Save the settings. 

After setting up the alias pattern, every News node created after this moment will get the URL alias you have set

Tags
Complete Tutorial