Visit the site

Visit the site

Organizations Involved

Hoffnungszeichen | Sign of Hope e.V. is an association based in Constance, Germany that is active worldwide. Hoffnungszeichen | Sign of Hope e.V. campaigns for human rights and provides humanitarian aid in crisis regions. Last year, we took over the association's existing Drupal 7 website and have been hosting it on our servers ever since. Then this year, against the backdrop of the upcoming end-of-life of Drupal 7, we migrated the very extensive, complex site to the latest version of Drupal 9.

About the project

UX for editors extremely improved

Usability and the user experience (UX)for editors has greatly improved with Drupal 9. Users now benefit from the Media Library in Core, Moderation Management (which makes it easier to control editorial workflows and approval processes) and of course the new admin theme Gin, which makes working with Drupal 9 very pleasant with a very clean interface and many small help features.

Adjusting image croppings, Responsive Image Styles

The website uses sophisticated mechanisms to allow editors to use images directly from the camera or smartphone and upload them directly to the website without any editing steps beforehand. When an image is inserted on the website, the image crop is then determined individually and variants of the image file are generated automatically. These are then cropped and scaled to the correct size. In addition, the optimal variant is automatically delivered for different devices (smartphone, desktop with high-resolution screen, ...) - optimized depending on which end device is requesting.

Media library and crop mechanism

Reprogramming of the frontend theme based on W3CSS

For the new template engine Twig, the complete frontend theme had to be reworked. As a basis we used the W3.CSS framework developed by W3Schools, which is very lightweight and strictly adheres to CSS standards and best practices. Using SASS, we extended W3.CSS with custom components and styles using the Atomic Design approach.

New theme built upon w3css

Content transfer and media token replacement

In this case, the transfer of content was only partially automated using the Migrate tools. On the one hand, a specially programmed extension to the media module was used on the Drupal 7 site, which resolved various (non-standard) media tokens in the body fields. On the other hand, an image cropping mechanism was in use whose data could not be transferred to the more modern Crop API in Drupal 9 - this had to be reworked manually.

Improved editor experience in Drupal 9

Why Drupal was chosen

Already in its version 7, Drupal was the best choice to model the important entities here like countries, topics, projects, peaople and the relationships between all of them. 

Technical Specifications

Drupal version: