Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughEnsure you have the right expertise
Whether Drupal is a suitable solution begins with acquiring or hiring the right person or people.
- You want to work with someone who has a lot of knowledge about Drupal and the available free modules (all Drupal modules are free and open source)
- Drupal modules are easy-to-install pieces of code that extend the basic functions of Drupal
- Drupal shines best when you combine existing modules
- This allows you to build a website faster and cheaper because you don't have to create everything from scratch
- It's a matter of smartly using what other people or organizations have already created
If you have this expertise in-house or have someone on your team who does, then Drupal is suitable for virtually all types of websites.
Is Drupal suitable for a simple corporate website?
If you want a simple business website with a few pages, you can use Drupal for that. Especially if you have the expertise described above. If not, you might want to consider WordPress or services like Wix or Squarespace. However, note that with the latter two options, you take a risk because you never own your own website.
Is Drupal suitable for a slick, beautiful website with animations?
Absolutely. You can customize the so-called Drupal themes to your heart's content. Choosing Drupal doesn't mean you're limited in terms of look and feel.
Additionally, you can even choose to completely decouple the front end from what Drupal delivers. This is also known as 'Headless'. This way, you have all the freedom to design and build the front end of the Drupal website as you wish while retaining the benefits of Drupal's back end.
Is Drupal suitable for a community?
100%. Drupal out of the box already offers many features important for a community, such as user registration, but it's also easily expandable with free open source modules like the Group module. With this module, you can create different groups within a Drupal website, designate group administrators, and make content available only through a Group. This way, you can create a website that functions similar to Reddit or Facebook in terms of features.
Is Drupal suitable for an intranet?
An intranet and community often have the same functional characteristics. In that case, Drupal is also suitable for building an intranet. I have personally built several intranets with Drupal where colleagues could share news among themselves. It's also possible, for example, to display colleagues' birthdays to show who is celebrating on that day.
Is Drupal suitable for an online magazine?
Drupal is also extremely suitable for an online magazine. As mentioned above, you can design and style the front end of Drupal as you wish. This means you can also display beautiful large photos as is customary on trendy magazine websites. Additionally, Drupal includes the ability to be extended with a powerful search system like Elasticsearch. Users can then easily search among a large number of articles.
Is Drupal suitable for an online shop?
When it comes to building an online shop, I must admit that I haven't always had the best experiences with Drupal (but this was more than 5 years ago). Building an online shop involves a lot, such as managing inventory, calculating shipping costs, and handling payments. There are modules available like Drupal Commerce that can handle many of these things out of the box, but configuring this module is quite a task. If you have a small online shop, you're probably better off with a specialized service like Shopify.
Is Drupal suitable for a large dataset that users can search through?
When you connect Drupal with the aforementioned Elasticsearch, and ensure you have enough server power, it is certainly possible to use Drupal for searching through large datasets. Elasticsearch is also used by notable companies such as Uber, the aforementioned Shopify, and Slack.
This allows you to leverage the modularity of Drupal to its fullest. Drupal's standard search engine is suitable for a few hundred records, but if you want more, it's possible to connect an external service.
Where else is Drupal suitable for?
Do you have a specific use case and want to know if Drupal is suitable for it? Let me know by leaving a comment below.
Recognize the problem that your Drupal website is not sending emails? For example, when there's a (security) update or when someone has filled out a Webform. In this blog, I'll show you in a few simple steps how to ensure that the emails your Drupal website sends always get delivered.
In this example, I'm building a tool that allows a user to calculate the amount of subsidy that housing associations receive when renovating buildings.
Creating Webform Fields
First, we create a webform and the necessary elements. When creating elements, you have the choice between different types such as text fields, numbers, or radio buttons.
When working with numbers, it may seem logical to choose a number element. However, these have unwanted functionality. If you have the focus on the number field and scroll up or down, for example, to view the rest of the form, the number is decreased or increased. This happened to me a few times without realizing it, which is why I opt for text fields with an input mask. With an input mask, you can determine what a user can enter. When creating or editing a text field element, you can choose what input mask to use under 'Form Display.' For the year, I choose 'Custom...' and then '9999.' This means users must enter 4 digits.
The elements I have added are:
- Year of construction of the house (text field with input mask '9999')
- Type of house: single-family or multi-family (radio buttons)
- The compactness of the building (text field with input mask '9.9')
- Amount of energy required in kWh (text field with input mask '99')
- Amount of sustainable energy generated, which should always be 0 or less (text field with input mask '-99')
Displaying Different Results Based on User Input/Choices
Based on the values the user enters, a different 'EPV' value, the subsidy amount per square meter, is displayed on the results page. For example, if a user enters the following:
- Year of construction: 2018
- Type: single-family house
- Compactness: 0.8
- Energy requirement: 40
- Generated energy: 0
Then the EPV value will be 1.25 euros.
But if the user provides different input, the EPV value should also change. For example:
- Year of construction: 2019
- Type: multi-family house
- Compactness: 0.6
- Energy requirement: 10
- Generated energy: -20
Then the EPV value should be 1.15 euros.
First, we create a text field in the webform that can contain the variable EPV value that we can update. This field, named 'EPV value,' is set to private under the 'Advanced' tab. This means the field is not shown on the form to the visitor. It's also advisable to disable the field so that an administrator can't accidentally enter something during testing.
We set the default value to 'not applicable.' This is displayed when users enter values that make them ineligible for EPV subsidy.
Now we can adjust the value of the 'EPV value' field based on the user's input. We do this by adding various handlers after the form is submitted. These handlers are created in the webform under 'Settings > Emails/Handlers > Add Handler.'
When creating or editing the handler, you can override the value of the 'EPV value' field in the 'Update the below submission data. (YAML)' field. We do this by using the key of the field, which you can find in the elements table under 'Build.' It's the text under the 'Key' heading of the element you want to edit. We use the key 'epv' and override it by putting 'epv: 1.25 euros' in the 'Update the below submission data. (YAML)' field.
We want to ensure that the value is overridden only if certain conditions are met. We can add this under the 'Conditions' tab of the Handler. First, we indicate that the status must be 'Enabled' and that all conditions must be met before the handler is executed.
Next, we add the following conditions:
- The 'Year of construction' must be 'Less than' the number '2019.' This means the EPV value is updated only if a number less than 2019 is entered by the user.
- The 'Type of house' must be set to 'single-family' using 'Value is.'
- 'Compactness' must be 'Less than' the number '1.'
- The 'Heating requirement' must be 'Less than' the number '43.'
- The 'Generated energy' must be 'Less than or equal to' the number '0.'
Only when a user enters values in the webform that meet these conditions will this handler be triggered, and the 'EPV value' will be updated. Now it's possible to add multiple handlers that update the 'EPV value' based on other conditions.
Complex Calculation/Formula
The calculator tool also has a complex formula that comes into play when 'Compactness' is greater than '1.' The heating requirement must be (43 + 40 * (compactness - 1)). For example, if the user enters 1.5 for compactness, the entered value for 'Heating requirement' must be lower or equal to (43 + 40 * (1.5 - 1)).
To execute this formula in a webform, we use a 'Computed Twig' element and name it 'Formula' with the key 'formula.' With this field, you can perform calculations and store the result in the field. When creating a Computed Twig element, you enter the formula in the 'Computed value/markup' field in the following format {{ formula }}. In this case, {{ (43 + 40 * (data.compactness - 1)) }}.
Because the result of the formula is stored in the 'Formula' field, we can use it in the conditions of the handlers' requirements. We can create a handler where the 'Heating requirement' must be less than or equal to the result of the 'Formula' field. We do this by calling this result with the following token: [webform_submission:values:formula].
Displaying Results to the User
Now we need to ensure that the user sees the results of the calculator tool. We do this with the 'EPV value' that we have updated via the handlers based on the user's input fields.
As soon as the user clicks the submit button, it's possible to display a message. We set this up under 'Settings > Confirmation' in the webform. In the 'Confirmation message,' you can display the 'EPV value' by using the following token '[webform_submission:values:epv]'. As you can see, we use the 'epv' key that we updated via the handler. The confirmation message can be further supplemented with explanations or by repeating the other entered values.
Drupal + Webform = Low-code Calculator Configurator
As you have discovered, Drupal in combination with the Webform module is extremely suitable for creating calculators with complex logic. By using handlers, conditions, tokens, and the Computed Twig field, you have few limitations as an ambitious site builder when creating such tools.
If you have any questions or comments about the above, please leave a comment below.
Getting Started
I started by creating a Staging environment of my website. I use Cloudways to host my Drupal website so it was as easy as a few clicks in the Cloudways control panel
In this clone of my website I installed the Upgrade Status module by logging into the command line (i use MobaXterm), navigating to the directory which includes the index.php file of Drupal and typing:
composer require drupal/upgrade_status
I logged in on my cloned Drupal website and checked the info in the Upgrade Status module (admin/reports/upgrade-status). The Upgrade Status tells you what you need to do before you can upgrade
My Drupal version was already updated to the minimal required core (9.4.x) but I also had to update the PHP on my Cloudways server to 8.1 which was easily done by using the Cloudways control panel.
Updating modules
Next I looked for modules that were not compatible with Drupal 10. Luckily I didn't really need the incompatible modules so I just uninstalled them and removed the files and the directories from the modules/contrib directory by logging in via SCP (i use WinSCP).
I updated all the modules to the latest version by clicking on the version number in the Upgrade Status and opening them in a new tab. Here I copied the composer command to upgrade the module. I pasted the command into the command line and upgraded all the modules this way. As I had to upgrade 20+ modules this became a bit tedious.
Updating themes
Next I had to uninstall the themes that were deprecated in Drupal 10 such as Bartik, Seven, Stable and Classy. Navigating to 'admin/appearance' I could easily disable and uninstall Bartik and Seven. I installed Claro and set this as the admin theme.
But the Stable and Classy themes weren't showing up in the appearances/themes overview so I couldn't uninstall them. In order to make them show up I had to go into login with SCP (you can also use SFTP or FTP) and modify the the core/themes/classy.info.yml and core/themes/stable.info.yml and set hidden from true to false. After clearing the cache I was now able to uninstall both the Classy and Stable themes.
My own custom theme was depending on Classy so I needed to update the 'themes/my_theme/my_theme.info.yml' to change the base theme from classy to starterkit (which will replace the deprecated Classy and Stable themes). I also had to change the version of my theme from 9^ to 10^ to make it compatible for Drupal 10.
Updating Drupal
Now for the Drupal upgrade. I followed the instructions as detailed here and changed the directory and files permission with WinSCP as instructed. I run the following composer command:
composer require 'drupal/core-recommended:^10' 'drupal/core-composer-scaffold:^10' 'drupal/core-project-message:^10' --update-with-dependencies --no-update
And after that the actual upgrade command:
composer update
To update the database I navigated to 'mydomain.com/update.php'. I followed the instructions and waited for the database to be updated.
Troubleshooting
Going to the homepage I got a white screen of death (WSOD) with a unhelpful message telling me there was an error. I also got the same WSOD when navigating to any page on my website so I couldn't login to see a more detailed error message in the logs. In order to show a more helpful error message on the WSOD I had to turn on error messaging in my /sites/default/settings.php by adding the following code at the end:
$config['system.logging']['error_level'] = 'verbose';
The error message on the WSOD now told me something about the node_type plugin not existing. After some searching I found this solution by montogro. As I needed drush to export the configuration files I installed it via the command line by running the command:
composer require drush/drush
Next I run the following command:
drush cex
Now I could copy the files in my sites/default/files/myconfiguration directory to a folder on my local hard drive. I opened this folder with Visual Studio Code and searched for 'node_type'.
Just a montogro I found this being referenced in the Asset Injector module. I uninstalled the Asset Injector module with drush with the following command:
drush pm:uninstall asset_injector
After clearing the cache with drush cr I refreshed the homepage of my website and voila: It's working! I removed the error code I added to my settings.php and checked if everything worked correctly.
After I was sure the upgrade was successful I went back into my Cloudways control panel and pushed the staging files and database to the live environment.
This completed my journey to upgrade Drupal 9 to Drupal 10. Hopefully this will help you into making the upgrade for 9 to 10. Let me know in the comments if you have any comments or questions.
For Drupaljam 2023 I was asked to give a talk on how to make your Drupal website less polluting and more climate friendly. I share tactics and tricks on how to reduce the CO2 impact of your site.
Every time a visitor accesses your website, kilobytes are sent back and forth. The heavier your website (the number of kilobytes to be downloaded), the more electricity is consumed and the more CO2 emissions occur. To make your website more sustainable, you need to make it lighter.
A first step is to determine what a visitor downloads when they visit your website.
You can do this by inspecting a page on your website in a browser (such as Chrome).
- In Chrome, open the inspection tool by right-clicking and choosing "Inspect" (you can also use the shortcut CTRL+SHIFT+i)
- In the inspector, navigate to the "Network" tab. Press CTRL+F5 to reload the page.
- You will now see which files are downloaded every time a unique visitor views your page.
- By sorting the files by "Size," you can see the largest files (and thus culprits).
Action 1: Replace Videos with Images
If your website displays videos that autoplay, chances are they will be at the top of the list. The best approach is to replace the video with a static image or at least allow the visitor to choose whether to play the video, rather than autoplaying it.
By the way, this is a requirement if you want your website to comply with accessibility standards. These standards state that the user must have the option to pause videos and animations longer than five seconds.
Additionally, for every video you embed, consider whether it could be better presented as an (interactive) infographic. Some videos attempt to explain complex issues, but not everyone always has the time to watch a video or the ability to listen to it, such as when they are in an office setting. An infographic provides a solution, allowing the visitor to consume the information at their own pace.
There are also techniques available nowadays to animate SVGs. This way, you can add playfulness by animating something while significantly reducing the number of kilobytes required.
Optimize Images
Images can be large files. However, if you optimize images smartly, you can save a lot of kilobytes by:
- Offering images in a modern file format such as WebP. This format is supported by all major browsers and provides the same image quality as JPEG or PNG but with better compression.
- Using vector files such as SVG when an image consists mainly of abstract shapes. The advantage is that these images always scale sharply when enlarged, whereas JPEG or PNG images become blurry.
- Setting the compression of JPEG and PNG images to 85% instead of 100%. The difference in quality is hardly noticeable to the human eye, but it significantly reduces the number of kilobytes the user needs to download.
- Ensuring that images are displayed at the correct size. In a website I worked on, all 12 images on the homepage were loaded at 1200 pixels wide. However, CSS was used to display the images at different sizes to the visitor. For example, a profile photo next to a quote was displayed at 75 pixels wide. By making a small technical adjustment to load and display the images at the correct size, the homepage size was drastically reduced.
Green Hosting
If you have a website, it inevitably consumes energy. A significant portion of this energy is used to keep the server running on which your website is hosted. Therefore, it is essential to always choose a hosting provider that uses green energy. Also, ensure that this claim is verified by an independent organization. Any hosting provider can claim to use green energy, but that may not always be the (whole) truth. Here you can find a list of all hosting providers verified by the Green Web Foundation.
Additionally, it is best to host the website in the country where most of your website visitors come from. The less distance the kilobytes have to travel, the less electricity is consumed.
Clean Up Content
Make sure that visitors cannot access pages that have no value. For example an outdated news article or a product page for a product that is no longer available. Every time a visitor accidentally lands on these pages, the entire page is downloaded.
In your analytics tool (such as Google Analytics, Piwik, or Matomo), you can identify pages that do not convert well or at all. Be careful not to focus solely on vanity metrics such as page views. A page that receives many visits but has minimal conversions is essentially worthless.
For example, I once wrote a blog about DuckDuckGo. In Google search results, this blog appeared above a reference to DuckDuckGo, resulting in hundreds of visitors who were actually looking for the privacy-friendly search engine. This led to a massive waste of data, as visitors would click away within milliseconds.
ABC: Always Be Caching
To limit the data usage of your website, ensure that your caching is properly configured. With caching, you can avoid downloading the entire page for each visit but only retrieve the sections that differ.
Popular Content Management Systems like Drupal and WordPress have built-in caching systems, so make sure they are enabled. However, it's worth exploring services like Cloudflare or Fastly.
In addition to caching the website, these services also ensure that your website is accessible from multiple locations around the world. When someone in the United States visits your website, it will be served by a server in the United States. This makes it faster for your American visitors and also more sustainable, as the data doesn't need to travel as far, reducing electricity consumption. Both services also offer options to further optimize images.
The basic package of Cloudflare can be tried for free.
Get Started
Hopefully, you can immediately start implementing these improvements to make your website less polluting. Do you have any good tips of your own? Share them below by leaving a comment.
If you find Wordpress, Wix or Squarespace too limiting
First off: Many sites can be easily (and better) built with simpler tools such as Wordpress or website building apps like Wix or Squarespace. Using Drupal for a basic five page corporate website is overkill. Setting up Drupal correctly requires time. The tools mentioned above are better suited straight out of the box.
That being said, these tools are also one size fits all. If you want to do just that little bit extra you’re bound to hit a wall. I’m talking about things like:
- Creating a space for user to login and view private content
- Community functionality where users can share content
- Easily creating content types and extend them with custom fields
Drupal is modular from the start. This means there are less limits when building a website, but there is also a steeper learning curve. And you need to know what modules are available and how to use them. Which brings me to my next point.
If you use what Drupal gives you
If you start your project with a very detailed document which specifies every functionality, and demand it will be exactly as you describe, you will be paying through the nose to get it done. Chipping in your budget, which can be better spent elsewhere.
If you want to experience the real power of Drupal you will need to use what it gives you. Don’t try to mould it to your specific needs but rather let it guide you. Have a global idea of what your site has to do and see how you can use core functionality and existing modules to get close to your ideal website.
It probably won’t be 100% like you want it, but what I've learned developing Drupal sites for 10+ years, is that you can come pretty close, like 95%. Close enough to test it out with real users. If you still require that remaining 5% you can always ask a developer to write some custom code, but this should be a last resort.
What CMS is the agency using for their own website?
First have a look at the website of the agency. Is it built with Drupal? If this is the case then it is a pretty good indicator how passionate the agency is about Drupal. If not, Drupal might just be a side gig.
The best way to sniff out the CMS that’s powering the website is using Wappalyzer. This way you can easily see if a website is built with Drupal. Beware that sometimes wappalyzer won’t return any results in the CMS column. In that case the website most likely is headless and can still use Drupal as an underlying infrastructure. In that case it’s best to just straight up ask the agency if they use Drupal for their own website.
What other Drupal websites have they built?
The agency should be able to provide a list of at least five other Drupal websites they have developed. It doesn't need to be exactly in the same industry your business is in. Just make sure they made some Drupal websites. And if you’re looking to get a community built it’s a bonus when they already have something similar included in their portfolio.
What is their knowledge of existing Drupal modules?
If you want an agency to design and build a Drupal website for you it’s because you have a problem. This can be something like:
- I want to attract more customers with my website
- I need to share files privately with my customer
- I want users to search through thousands of nodes
Before you contact an agency it’s important to have a detailed description of your problem. With this you can ask the agency how they think they can solve this problem for you. This doesn’t need to be a step to step guide, but more of a global overview of what techniques, modules or custom code they think will be required.
Hopefully your problem is a common use case and can be solved with existing modules. Ask for a list of modules the agency will be using. If the agency has difficulty providing a list with modules this should be a red flag. They either are not experienced enough knowing what modules are available or they want to solve everything with custom code ignoring already existing technology which can be costly, spiking up the price of the proposal.
What is no code?
Basically it comes down to building a complex website using a Graphical User Interface instead of typing code using a programming language such as PHP.
Personal experience
I’ve been designing and building Drupal websites for over 10+ years now and I didn’t have to write any code once. I might have tweaked some files here and there but the number of times I had to dive into some PHP code can be counted on one hand.
What I have built with Drupal are not just simple websites with a few pages. I’ve built:
- A video sharing sites for a University
- An intranet where employees can share news and files. Including an overview of upcoming birthdays and an extensive search option where employees can easily find each other's information, such as an e-mail or telephone number
- A community where users can sign up and privately share information. Even creating (private) groups within the community
Drupal is flexible
Out of the box Drupal is already very flexible. You can create content types, such as Articles, and add fields to them. These fields can be anything such as a simple text field or an image, video, file, mp3. You can also reference any entity within a field making it possible to set up relations between different content items (called nodes in Drupal). But you can even reference users or taxonomy terms.
Because Drupal is built with this flexibility in mind almost anything is an entity. Making it possible to connect different parts and ensuring all Drupal modules play nicely together.
Custom Code unsustainable
Custom Code makes you dependent on the developer who created this piece of code. What happens if the code needs to be changed but the developer has moved on or isn’t available for a long period of time? You might end up with a broken website.
In theory it is always possible to let another developer take a swing at it, but most likely they will grunt at the code they get presented and will tell you it’s better to start from scratch. Which is fair, because it probably will be faster for them than to go through someone else’s code trying to figure out how they created the solution.
Compare this to an already available Drupal module which you can download and use for free. Every Drupal module has a maintainer who is responsible for bugs and feature requests. If this maintainer becomes inactive it is possible for someone else to pick up where they left. Everyone can report a bug or request a feature and multiple developers can look into a sustainable solution.
When you can’t avoid Custom Code
If you need to connect Drupal to another system, such as an internal CRM tool, it is impossible to avoid some Custom Code. The arguments above still apply, though. Is it really necessary to connect these systems to Drupal to sync data? If it only concerns a few instances every month maybe it’s something that can be done by hand. If it is a well known system there might already be a module available, so make sure to check that first.
Update: After posting this blog I got a few reactions and I feel like I need to nuance a bit. If you are a developer and you can create a solution writing 10 lines of Custom Code instead of using a couple of modules, then by all means go for it. This blog is intended as a cautionary tale for organisations wasting money on a small part of a Drupal website (Custom Code) where it could better be spent on other facets of the website. Let me phrase it this way: if the Custom Code costs more than a third of the total price of your Drupal website, there might be something askew making you reconsider.
How do you feel about Custom Code?
Let me know by leaving a comment. I'm interested to hear use cases where Custom Code is unavoidable or why Custom Code might be better than an existing module.
Also, don’t forget to subscribe to my Drupal newsletter of Drupal RSS Feed.
Say, for example, that you want to share content (like PDF files) with your clients. You don’t want them to be publicly available, because they are for your clients eyes only. You also don’t want clients looking at each other's files. This is where the Group module comes in. Here you can create different group types (such as client) with which you can create a separate group for each client you want to share files with.
In this tutorial I will show you how to set up the group module which can be used to share nodes privately to a set group of users.
Setting the Privates Files Directory
If you only want to share nodes within a group you can ignore this part. If you want to share files you need to create a private files directory. Else users without the correct permissions would still be able to access the files by guessing the correct URL of the file and typing it in the address bar of their browser. Learn how to set up a private files directory for Drupal.
Setting up the Group module
- Install the Group module
- Enable the Group node module
- Navigate to Group > Group types
- Click
- Name the group type. I will follow the example I mentioned above and name it Client
- You can enable or disable Create a new revision when a group is modified as you please
- Enabling The group creator automatically becomes a member can be helpful when you want users to create their own groups
- It’s best to enable Group creator must complete their membership in case you have required fields on a users’ profile page
- Enabling both Automatically configure an administrative role and Automatically assign this administrative role to group creators is very useful, because now you can create admin permissions within the group
- Click
- Next we need to create the content type that will be used to share within the groups. Navigate to Structure > Content types
- Click
- I will name this content type File
- You can fill in the settings in the tabs as you please
- Click
- You can now add any fields you like, but as in the example I’m following I will add a File field. Click
- Below Add a new field select File
- Label the field File
- Click
- Under Upload destination select Private Files (see the remark I made about this above)
- Click
- In the next screen you can change the settings as you please. Below Allowed file extensions I’ll put pdf as I only want to share PDF files
- I like to name the File directory something more generic like files
- I also check Enable Description field because then you can label the fields with something that makes more sense instead of just showing the filename
- Click
- What we need to do next is to make nodes of this content type available to the Client group we’ve created. Navigate to Group > Group types > Client and click on the Content tab
- Click on
- You can leave the setting on the next screen as is. Click on
- To test if this works we need to create a Group (Client). Navigate to Groups
- Click on
- Enter any title and click on and complete your membership
- Enter any URL alias. This will be shown in the address bar of the browser when viewing the group and click on
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web