Drupal has several ways to handle images and media.
An image field references an image file. Media is more complex and can be reused across content.
Image
Image file field, or CKEditor embed button. Both of these use image files, not media.
The image media type has an image field.
Configure image styles to automatically resize images for what you need: Configuration > Media > Image styles.
File
Files can be attached to content and stored in a directory on the server.
View uploaded files: Content > Files.
File records are stored in the file_managed table.
File System Settings
Configuration > Media > File system
Most settings are configured in settings.php and are read only here.
Image Field
The Article content type has an image field by default. You can display this above or below the body in Manage Display.
Images uploaded to an image field can be found in Content > Files.
Editor Plugin
You can add images within your content with the CKEditor plugin.
Change image editor button settings here.
Captions
The editor lets you add a caption to both images and media.
Enable "Caption images" in text format settings.
Caption text is saved in the data-caption attribute.
<drupal-media
data-entity-type="media"
data-entity-uuid="945aab96-2222-487a-9861-169747820360"
data-view-mode="screenshot"
data-caption="Iron man"
> </drupal-media>When rendered, the media is wrapped with the filter_caption theme hook.
This uses display: table on the figure, and display: table-caption on the caption, in order to position the caption and constrain width.
See more info in the filter-caption.css file comments.
View on Drupal.org #2935625Issue for duplicate figcaption wrapper Status: Active.
Image Styles
We usually need to optimize images for use on the web to reduce the file size and fit the screen. Image styles define dimensions and how displayed images are created from the source.
Go to Configuration > Media > Image styles.
Responsive Images
Core module for rendering responsive images, using image styles at defined breakpoints.
Media
Media is a fieldable entity, which means you can have media types with specific fields you need.
Media can be embedded, add the Media Library button to CKEditor.
Media Library
The Media Library is at Content > Media > Media library.
Standalone Media URL
Enable a route to view media at /media/ID.
There is no way to make this visible only to admins, if you need to do that, set up a view instead.
Remote Video
This media type uses oembed to convert YouTube and Vimeo urls to embedded videos.
Use oEmbed Providers module to add additional providers.
This change record has details on how oembed works in Drupal.
Issues with embedded View on Drupal.org #3060968aspect ratio Status: Needs work and View on Drupal.org #3061134responsiveness Status: Needs work.
Upload
- View File Resumable Upload on Drupal.orgFile Resumable Upload
- View File uploader on Drupal.orgFile uploader
- View File uploader by Uppy on Drupal.orgFile uploader by Uppy
Bulk Import
- View Media Bulk Upload on Drupal.orgMedia Bulk Upload
- View Simple Media Bulk Upload on Drupal.orgSimple Media Bulk Upload
- View Media Library Bulk Upload on Drupal.orgMedia Library Bulk Upload
Cropping
- View Media Contextual Crop API on Drupal.orgMedia Contextual Crop API
- View Image Widget Crop on Drupal.orgImage Widget Crop
Replace Files
- View File Upload Options on Drupal.orgFile Upload Options
- View Media Entity File Replace on Drupal.orgMedia Entity File Replace
- View File Replace (D8+) on Drupal.orgFile Replace (D8+)
- View File Field Replace on Drupal.orgFile Field Replace
Delete Files
Orphaned Files
View Orphaned Files on Drupal.orgOrphaned Files
View Orphans Media on Drupal.orgOrphans Media