The default designs given by your typical website builder can get boring and plain. The internet is populated by too many of the same. Some do have great designs, but limited customizability and functionality. Drupal has both – and more! With Drupal 8, one can create websites that are not just functional but also stunningly beautiful and eye-catchy!
In this article, we’ll look at what views are in Drupal and how to use them to present your content exactly the way you want and like.
What is Drupal?
Drupal is an open-source web content management system. It is a versatile piece of software that allows one to add or remove features by the use of modules. On top of that, one can use drupal to install themes – giving websites a fresh look and feel in no time!
It is written in PHP, and usually runs on the LAMP stack (it can run on other tech stacks as well such as the MAMP or XAMPP). A template language is used to render the webpage into HTML. And so, every template includes a certain number of files with them which are then rendered into HTML code as needed in the webpage’s layout.
What is a CMS?
In simple words, a content management system, or CMS, is a software that helps manage digital content. It allows for the quick creation, editing, and maintenance of an organization’s digital content by one or more users. Most CMS’s employ a scripting language (like PHP) which runs in conjunction with a web server (where the website is hosted) and a database (where the content is stored). Typically, for each page requested for the website – the script dynamically outputs the HTML needed to render the webpage by using the content in the database and essentially modifying it based on the user’s specified settings.
Most CMS’s run on a certain tech stack consisting of a scripting language in which it’s written, an operating system on which the CMS runs, a database in which it stored the content, and a web server on which the script runs to fetch and render the webpages to the user’s browser. Such a popular stack is the LAMP stack, which includes Linux OS, Apache web server, MySQL database, & the PHP scripting language.
Why use Drupal over any other CMS?
A question arises, why should one use Drupal over other CMS’s out there? A simple answer is that Drupal is better – both in terms of functionality and flexibility. It comes with thousands of modules and themes ready to be installed. You get freedom, security, as well as accountability while using Drupal. Moreover, installing and running Drupal is completely free of cost!
“Drupal provides an open-source back-end framework for at least 14% of the top 10,000 websites worldwide – ranging from personal blogs to corporate, political, and government sites.” [1]
Drupal can seem a little harder to get up and running for which you need to set up your “stack”, but this is because of the way Drupal is structured to provide massive customizability! As a result, it allows the admin to make their website exactly how they want it – and better!
Adding specific features is like “snapping legos together”. This is because Drupal’s modules do things in a standard way and interface with a common underlying system. Here’s also where Views come in.
Understanding Drupal “Views”
In Drupal, a view instance is a listing of information or content. It can be a list of nodes, users, comments, links, or basically anything! A view takes a criterion, runs it against all the content in the website, and returns back what matches in a format of your choice. Formats can range from HTML tables, lists, and grids to RSS feeds to even PDF & CSV files.
In more technical terms, this is like an user interface to build SQL queries that pull information from the database and present it on the web page in the desired format. This is accomplished by the Views module (which now comes with the core module in Drupal 8).
There is a Views UI module that acts as a visual user interface of the whole Views system. It allows the website builders to create and configure individual views. After all the views have been set-up, the Views UI module can be uninstalled. While it helps increase the website’s performance, it also has the added benefit of limiting admins of the website from making any changes to the views themselves.
Multiple displays can be added to a single view. A page accessible via a specific URL address, a block to be placed in a theme region, or a feed to be exported in RSS or OPML formats are all examples of possible view displays. A presentation format for each sort of view can be chosen, and the range of possible values varies depending on the type of display. Suitable alternatives for page display include unformatted lists, tables, HTML lists, and grids. Installing more core modules can give access to more display and output formats to be used in a view instance.
When to use views?
Views are a powerful way to display content on your website. If you’re still confused about the use cases, the need for views may arise when,
- the default front page view work, but you want to sort it differently
- you want to have a search functionality within your blogs page
- posts of a certain type needs to be restricted while using /tracker
- you want a block with 5 most recent posts to be displayed
- the “articles” module is good, but you want to display it differently
- you want to have a map displaying all the store locations
- you want to have a monthly archive that shows a list of articles in the form of “Month, YYYY (X)” where X is the number of posts that month and you want them in a block and you want them to look like a certain module but also display it differently and maybe also has all the articles go out in an RSS feed – well, you get the point.
This is, of course, not an exhaustive list of the use cases of views, instead, it is an idea of how views can be implemented and how one can use it in their websites to create a specific functionality they have in mind!
Adding a view instance
Okay but how to actually add a view to the website? Well, it’s simple.
- Log in to your Drupal website as an admin
- Navigate to Structure -> Views -> Add new view
- Fill up the details required,
- View Basic Information: A name and an optional description
- View Settings: Select what needs to be displayed (Content, Users, Files, etc.) under the “Show” dropdown menu. According to the 1st selection, a 2nd dropdown would be populated, and so on. For example, “Show Content of type Article tagged with “news” sorted by Newest First”
- Display Types: A view instance can have multiple displays. A page display or a block display can be added and configured. A page makes output at a particular URL, for the main page content at that URL. While a block Makes output in a block, which can be placed on pages.
- Select the display format.
- Click on the “Save and edit” button.
After doing all of that, a very basic view instance is ready to be used in the website to fetch content and display it in the format specified.
At its core, any view may make use of the many available components such as Fields, Relationships, Arguments, Contextual filters, Sort, Displays, Header, Footers, and Empty Text to make advanced views.
The Views UI module being essentially an interfaced SQL-query builder, each component relates with an SQL query in the following way:
| SQL Query | Views Component |
| SELECT n.title, u.name | fields |
| FROM {node} n base table | view type |
| INNER JOIN {users} u ON n.uid = u.uid | relationship |
| WHERE n.status = 1 | filter |
| AND u.uid = arg(1) | argument |
| ORDER BY n.changed DESC | sort |
Understanding views templates
The default views templates are located under the folder: “/core/modules/views/templates/” . There are 4 types of templates, with each view using a minimum of two templates.
- The first template is called the layout template. It is named “views-view.html.twig” and is used for all views. As the name suggests, It contains the layout for the view and mainly covers view content, header, footer, exposed form, and attachments.
- The second template is the style template. Here, the template varies depending on the applied view style. There are 4 types as mentioned before – grid, table, HTML list, or unformatted. Grid: views-view-grid.html.twigTable: views-view-table.html.twigHTML List: views-view-list.html.twigUnformatted: views-view-unformatted.html.twig
- “views-view-fields.html.twig” is the third template and is used only if the view row style is set to “Fields”. It is responsible for looping through available fields and printing fields wrappers, labels, and markup.
- “views-view-field.html.twig” is the fourth and the last template. This is used only if the view row style is set to “Fields”. This is the last template and is responsible for printing each field markup.
Overriding views templates
Sometimes, you may need to make certain changes to the default view templates to customize your views display. One way of doing that is by copying the template files located under the aforementioned folder to the current theme folder and editing the template files in use.
A naming system needs to be followed while overriding view templates, the following are the possible template names sorted by precedence:
- [base template name]–[view machine name]–[view display id].html.twig
- [base template name]–[view machine name]–[view display type].html.twig
- [base template name]–[view display type].html.twig
- [base template name]–[view machine name].html.twig
- [base template name].html.twig
Let’s understand this with an example and assume there is a view named “recent_blog”. Now considering four scenarios of changes one would want, here’s how each of the template files would be overridden:
- to modify any wrapper div or class or to a top-level hierarchy then the layout view template would need to be overridden.
“views-view.html.twig” will be “views-view–recent_blog.html.twig” - to modify how a display style looks, the second style view template would need to be overridden. Overridden files would be renamed to “views-view-grid–recent_blog.html.twig” for grid and “views-view-table–recent_blog.html.twig” for tables and so on.
- to add any wrapper “div” or class to the loop structure then the third view template would be overridden and renamed to “views-view-fields–recent_blog.html.twig”.
- to change/update specific field output style/layout then the fourth view template would be overridden and renamed to “views-view-field–recent_blog.html.twig”
Summary
To summarize, Drupal is one beast of a CMS to build any sort of professional website, especially ones that deal with a lot of content. It has a large community of users and thousands of modules and themes to make the website unique and functional. In Drupal 8, Views now comes pre-installed under the core modules and is clearly an integral part of customizing the look and feel of the website. With that said, it is clear that switching over to Drupal as the primary CMS of your website is definitely worth the initial investment it takes to learn and set it up.
