Drupal is a great choice for media websites, with 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, or 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. Read more below.
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 is 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 stories 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 through 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 with 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 having 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 is possible to match 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!