Guide

Media and Responsive Images for Drupal 8, 9, and 10

What will you learn

  • Overview of media management in Drupal
  • Understanding media types, media entities, and media fields
  • Adding a media field to a content type
  • Using view modes with media entities
  • Creating and configuring new media types in code
  • Introduction to breakpoints and media queries
  • Creating a breakpoint YAML file
  • Overview of the Responsive Image module
  • Detailed walkthrough of the responsive image style configuration form
  • Creating responsive image styles

Overview

Drupal's Media module is used for managing and reusing multimedia assets such as images, videos, and documents across a site, providing a centralized and flexible system for handling media content.

Drupal's Media API and custom source plugins provide a framework for defining and integrating new types of media sources, allowing for the extension and customization of how various media assets are managed and utilized within Drupal.

Drupal's Breakpoint API defines responsive design breakpoints to ensure a consistent and optimized layout across different devices, enhancing the site's usability and accessibility.

Drupal's Responsive Image module provide a mechanism for delivering responsive image styles: appropriately sized images based on device screen size, optimizing performance and user experience by reducing unnecessary data loading.

Learning resources

Manage media

This course covers the basics of media management, including the creation, configuration, and display of media entities. You will learn how to add media fields to content types, use the Media Library for browsing and selecting media, and manage media entities through adding, editing, and deleting operations. Additionally, the course will delve into customizing media fields, controlling access to media entities, and using view modes to display media in various contexts.

Code custom media sources

This course covers the fundamentals of media sources (Image, YouTube, PDF, etc.), how to create and configure new media types, and how to use oEmbed providers to embed external media content. Additionally, you will learn how to create custom media source plugins to integrate third-party media providers with Drupal.

Expose breakpoints to Drupal

This course covers the fundamentals of breakpoints and media queries, the structure and purpose of breakpoint YAML files, and practical steps to create and implement these files in Drupal themes or modules. By the end of the course, learners will be able to expose their site's breakpoints to other Drupal modules and themes, enabling responsive design features such as responsive image styles.

Responsive Image Styles

This course covers the basics of responsive images, the configuration of responsive image styles, and practical use cases for different viewport sizes and display densities. By the end of the course, learners will be able to implement responsive images that adapt to various screen sizes and resolutions, enhancing the performance and visual appeal of their Drupal sites.

“Drupalize.Me has trained thousands of Drupalistas. Their video lessons help to address our constant need for more Drupal talent. Drupal needs training like this to support its growth.”
Dries Buytaert
Drupal Founder and Project Lead
Photo of Dries Buytaert
“They’re easy to understand. They’re thorough. They’re funny. They’re always entertaining, and it makes it easy to learn parts of Drupal and how you can integrate it into your workflow and learn more and have a good time doing it.”
Roger Carr
Drupalize.Me Member
Photo of Roger Carr
“The mission of the Drupal Association is to foster and support the Drupal software project, the community, and its growth. Drupal education, like that provided by Drupalize.Me, is important to this mission.”
Megan Sanicki
Former Exec. Director, Drupal Assoc.
Photo of Megan Sanicki

FAQs

Am I required to sign a contract?
No. You can purchase a membership and/or cancel any time. Drupalize.Me is a pay-as-you-go service.

Can I preview tutorials before joining?
Yes! Just navigate to our tutorial library. Our free tutorials are labeled with a green "FREE" tag.

Can I watch videos on my mobile device?
Yes! Drupalize.Me is a responsive site and can be accessed in the browser on any mobile device. More FAQs