Interesting option for news websites on Drupal — featured news collections

Drupal is a great choice for media websites. This is due to easy content editing, flexible moderation workflows, advanced media handling, and much more.

And, of course, media and news websites on Drupal can enjoy unlimited content display options for. Today, we would like to show you one of them that we implemented for our customer’s Drupal website — so-called featured news collections, aka grouped news.

According to this Drupal setup, news on the same topic are grouped together in ways that provide a high level of usability for readers. More details are coming next.

Featured news collections as opposed to standard Drupal setup

Let’s see what makes the grouped news functionality special for news websites on Drupal, and how it differs from the standard Drupal setup:

• Standard news are represented by Drupal nodes — one node per item. When you open a Drupal node, you see it in full view. When you open another Drupal node — you see another one. They can be grouped together by topic or category if they are tagged with the same taxonomy term. Still, all of them will be opened one by one.
• On the contrary, featured news collections include multiple news on the same topic. When something happens in the world, they allow the reader to see the situation from all angles, or its step-by-step progress shown by new updates. The display offers a full view of all news items, which is very handy to read.

The features of this news setup in more detail

Individual URLs for news items

We provided each featured news page has a general URL that the reader sees in the browser. However, each news item also has an individual direct link. When it is used, the page smoothly scrolls directly to the place where the particular item begins (due to jQuery Animate plugin).

The URL in the browser is also updated to the URL of the particular item. The URL change is achieved through the replaceState() method of the HTML5 History API, which allows developers to change the URL without the full page refresh.

These individual URLs are added to RSS feed and to the sitemap. Each of them also has social share buttons.

When shared, all pieces of news have individual meta tags. When someone follows their individual shared links, the page will smoothly scroll exactly to the place where each of them begins.

Individual URLs and SEO

Every SEO expert knows that the same content available at different URls is a bad idea for Drupal sites or any others. We solved this by providing custom functionality that tells search engines to index the featured news collection only. The separate pieces of news will not be indexed or displayed in search results.

Navigation through the page

So the page with featured news has two blocks:

1) the block with news items in full view

If the block with news items has many of them, they will be divided into pages using the pager functionality.

2) the list of titles to navigate between all news items

What happens when a user clicks on a certain news item title in the navigation block?

• If the item is found on the currently displayed page, the page smoothly scrolls to it and the URL is replaced, as we described above.
• If it is not found on that page, we query the page that has it, using AJAX. Thanks to AJAX, the page with the full node view is loaded without page refresh. We calculate the position of the news item from the top of the page and animate scroll to it.

Design for mobiles and tablets

News websites on Drupal should be convenient to access from any device. So, for mobiles and tablets, we provided the styling of the navigation block as a fixed floating block that becomes available upon clicks on the floating icon.

Enjoy interesting options for news websites on Drupal!

This was just a simple example of content display options for news websites on Drupal. Anything else is possible exactly in accordance with your ideas. In addition to AJAX for real-time updates, it’s possible to use frameworks like React, Vue, Angular, and so on.

Contact our Drupal team to discuss your news display functionality!