Tutorials

Balint Kleri’s blog post explores how Drupal Canvas enables fully decoupled frontend development using React-based Code Components, a browser-based editor, and CLI tools. From Storybook integration to Nuxt previews and server-side rendering, the guide demonstrates advanced use cases for modern frontend workflows with Drupal at the center. ...more

Greg O'Toole’s new video guide explores how AI bots—from crawlers to LLM fetchers—are reshaping the open web. The four-part presentation covers bot trends, good vs bad actors, strategic site governance, and emerging content strategy opportunities for developers and Drupal site owners. ...more

In the fifth part of his Unmanaged Files in Drupal series, Jeff Greenberg demonstrates how to enhance the custom Twig function introduced earlier to make it more versatile. By allowing developers to return either a file URL or a fully rendered image tag directly from Twig, this method streamlines theme development and showcases how to safely return HTML using the is_safe option. ...more

Learn how to streamline collaboration on your Drupal projects with Git patches. In this updated guide, Specbee’s Shefali Shetty explains how to create and apply patches using git diff and git apply, explore advanced patch options, and follow best practices for smooth, conflict-free updates in 2025. ...more

Single Directory Components (SDCs) are a key innovation in Drupal 11, packaging templates, logic, and styles together. In this tutorial, Philip Norton of Hash Bang Code demonstrates how to preview these components directly within Drupal using the SDC Component Library module. The guide explains how to structure .story.twig files, configure access permissions, and preview multiple component variations—all without relying on external tools like Storybook. ...more

In this short tutorial, Mark Conroy of The Confident demonstrates how to maintain a consistent design across LocalGov Drupal microsites using a base theme and sub-themes. This approach ensures a unified look while enabling site-level customization—ideal for councils managing multiple microsites under one platform. ...more

In a detailed technical guide, Andres Torres outlines how to create a photo content workflow in Drupal that automatically extracts Exif metadata and displays image locations on interactive maps. Using the Exif, File Metadata Manager, and Geolocation Field modules, along with a custom helper module, site builders can create rich, location-aware photo galleries. ...more

CAPTCHA and reCAPTCHA are essential tools in the fight against spam bots on Drupal sites. In this detailed guide, Nadiia Nykolaichuk explains how these technologies work, what sets them apart, and how to configure the top Drupal modules to safeguard your forms. From basic math problems to Google’s invisible scoring system, learn how to add reliable, user-friendly protection to your site. ...more

George Bonnici’s latest tutorial demonstrates how to build a production-ready Hero component using Drupal 11’s new Canvas visual builder and Single Directory Components (SDCs). The step-by-step guide covers installation, configuration, and best practices for creating reusable, responsive components that empower both developers and site builders to design visually consistent, high-performance pages without code duplication. ...more

In a concise video tutorial, Randy Fay demonstrates how to install and configure a complete DDEV development environment on Linux from scratch. The walkthrough includes Docker setup, DDEV installation, HTTPS configuration, project launch, and step debugging with PhpStorm. Ideal for developers new to local environments, this guide ensures fast, platform-agnostic setup with real-time testing. ...more

Managing image captions in web design can be deceptively tricky—especially when they exceed image width. In this practical guide, Mario Hernandez introduces a performant CSS solution that ensures figcaptions never outgrow their images. By leveraging modern properties like inline-size and contain, this technique aligns captions perfectly with image boundaries while boosting rendering efficiency. ...more

When logging in to a Drupal 9 site after module updates, a blank white screen may signal a module conflict. iBuild.PH shows how disabling Captcha, Image Captcha, and Spam Master, clearing caches, and optionally truncating the flood table resolved the issue. Their steps work for Drupal 9 and are likely applicable for Drupal 10 and 11 too. ...more