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.
Issue for duplicate figcaption wrapper.
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 aspect ratio and responsiveness.
Upload
- https://www.drupal.org/project/file_resup
- https://www.drupal.org/project/file_uploader
- https://www.drupal.org/project/file_uploader_uppy
Bulk Import
- https://www.drupal.org/project/media_bulk_upload
- https://www.drupal.org/project/simple_media_bulk_upload
- https://www.drupal.org/project/media_library_bulk_upload
Cropping
- https://www.drupal.org/project/media_contextual_crop
- https://www.drupal.org/project/image_widget_crop
Replace Files
- https://www.drupal.org/project/file_upload_options
- https://www.drupal.org/project/media_entity_file_replace
- https://www.drupal.org/project/file_replace
- https://www.drupal.org/project/file_field_replace
Delete Files
Orphaned Files
https://www.drupal.org/project/orphaned_files
https://www.drupal.org/project/orphans_media