Migration from Drupal 7: simplified content management and enhanced user experience with innovative modules and integrations.
The University of Applied Science had a multilingual website on Drupal 7. It served thousands of users, had contributions from hundreds of authors, and included an intranet.
However, it also had an outdated access management system and lacked a user- and mobile-friendly design and interface.
Attico International's team migrated the website to Drupal 9, reducing development and support costs.
With the addition of innovative modules, the new website featured:
The University of Applied Sciences, located in Germany, has a student population of over 9,500 and employs more than 800 staff, including 150 professors, across 40+ departments. Its website serves two primary functions:
The content-making process is organized in the following way:
Key figures about the website's content:
The website was built on Drupal 7, around 10 years before the project. As a result, its interface and access management were quite complicated and weren't very user-friendly or mobile-friendly. There have been complaints from administrators and editors.
Furthermore, the website design did not follow modern trends, making it appear somewhat obsolete.
Images prepared by hundreds of content-makers could have a small size and low resolution.
There was only one size of an image for all devices; so they could appear as bad quality on some devices. For the marketing team, the image quality control process was strenuous.
All of this could affect the university's perception, potentially making it less attractive to prospective students.
Due to all the factors mentioned and the upcoming Drupal 7 End of Life, the University team formulated the following tasks for Attico International:
To help the University achieve its goals, the Attico team identified a set of optimal solutions while migrating the website to Drupal 9.
These modules provided a variety of functionalities, such as adding moderation states for content, establishing workflows with transitions between different states, defining permissions for individual menus, enabling group functionality for the Node module, allowing automatic publishing and unpublishing of content, and creating a reusable and structured library of images.
We were strict about security — the site should not be vulnerable to any attacks. Thus, we used the best modules and followed best practices to prevent damage.
Before the website migration, the University utilized a taxonomy-based system to manage access permissions. Only developers could implement most changes, such as adding a new department into the system; and it was impossible to create a department's page.
To improve the access management system more quickly and reduce development and support costs, we implemented a ready-made contributed Drupal module "Group".
The Group module was designed with the goal of making access management as user-friendly as possible. With this module, the University could configure scenarios for access permissions directly through the admin panel, without any custom code. Each of the over 50 different departments received its own page. Employees and students engaged in content creation gained tailored access to editing and adding content. Within each department, a hierarchy of roles like "Assistant," "Editor," and "Administrator" was established, each with specific permissions. Implementation of the Group module dramatically simplified the process of controlling publications across the University’s departments.
Storybook and Theme Processor helped us significantly simplify the development and integration of the frontend for Drupal: reduce development costs, ensure cohesive design, and make the website easily scalable.
We used Storybook as a development environment for the frontend. This allowed us to develop and test UI components in isolation from the site’s business logic. These components were then combined into larger elements and the site pages.
The Theme Processor acted as a unique bridge between development units, allowing developers to easily specify which Storybook components or elements they needed in a particular spot on the website, and then pass the related data to the frontend.
This feature helped reduce development time by at least 20 hours when automating the processing of the numerous images uploaded directly by users to the site.
Why automated image processing was required:
Modern image display standards dictate providing tailored image sizes for each device screen size. The University had hundreds of content creators, and they often included images in their content. The goal was to ensure that users only needed to upload images in their original size. After publishing, the CMS should automatically adjust these image parameters to be optimal for a specific device. This feature was particularly vital given the increasing use of mobile devices to access the site, where internet connections can occasionally be unstable.
The Drupal Image Styles tool enables us to scale, crop, resize, rotate, desaturate images, and convert their types; due to that, images look good on various devices, including Retina displays of Macs, tablets, and small cell phone screens. However, the challenge is that a developer typically has to manually set the necessary image parameters for each unique block on the website.
To eliminate manual operations, we developed a smart tool that automatically performs the required actions based on the parameters provided. This ensured that the correct image size was automatically delivered for each block on various devices.
Image upload and selection interface
At the University, different educational programs have individual application deadlines. Editors are responsible for updating these deadlines. Before the website migration, this was a challenging process: editors had to modify application dates on separate pages for each program. We developed a dedicated page for editors, allowing them to modify or delete the 'Application Period' field value for Degree Programs in a single place. Specifically, we created a unique Content Type for both languages. With the new page, editors could adjust the 'Application Period' field values quickly, as they didn't have to open an individual editing page for each program anymore. Given the number of departments and nodes on the site, this functionality is crucial.
Centralized library for application deadlines
We implemented several integrations for the new University website, including:
DIAS Integration
Official announcements and university rules are stored on a third-party platform, DIAS. On the Drupal side, pages containing these publications are stored as separate entities. This allows them to be cached and displayed even if the DIAS platform becomes unavailable.
BITE
Vacancies are displayed on the site via the BITE API. To respond to or interact with these vacancies, users are directed to the BITE system.
Opus 4
Lists of Publications — University Library Service. Publications are accumulated on the publications server and automatically listed on the website.
Podigee
Podcast Player. We integrated a personalized podcast player via an iframe. Users can input a link to the podcast or playlist, and the item is embedded into the page through the iframe and cached to speed up output.
The use of Storybook and Theme Processor greatly simplified the development and integration of the frontend for Drupal.
The Resizer tool eliminated the need to create hundreds of different image styles, which improved the developer experience.
"We appreciate their expertise and hard work and look forward to working with Attico International’s team.
The website of our university is an essential part of our communication and outreach efforts. We needed a reliable partner to help us improve our Drupal backend functionality, and Attico International delivered. The new features and integrations they implemented have made our website more efficient, user-friendly, and streamlined. We appreciate their expertise and hard work and look forward to working with Attico International’s team.” — the Client’s Representative
