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.
