This document provides an overview of the image system in Drupal 8 compared to Drupal 7. It discusses the key changes to image loading and saving, image styles, image effects, image toolkits, and image toolkit operations between the two versions. The main points are that images are now objects loaded via a factory, image styles are configuration entities, effects and operations are plugins, and functionality is now defined through plugins rather than hooks.

1. The Image System in
the New World Order

2. Claudiu Cristea
@claudiu_cristea
drupal consultant, trainer, developer
opensource enthousiast, core contributor
webikon.com
drupal.org.ro

3. • The Image and the Image Factory
• Image Styles
• Image Style Effects
• Image Toolkits
• Image Toolkit Operations
Overview

4. Developers

5. The Image and
the Image Factory

6. $image = image_load('public://image.jpg');
image_save($image);
$image is stdClass
$factory = Drupal::service('image.factory');
$image = $factory->get('public://image.jpg');
$image->save();
$image is DrupalCoreImageImage
Image class type
D7
D8

7. Image Styles

8. Image Styles
D7 vs. D8

9. table: image_styles
table: image_effects
D7

10. code: hook_image_default_styles() D7

11. Configuration entity
core/modules/image/config/image.style.large.yml
D8

12. DEFINITION
D8

13. Derivative URI or URL
D7
D8
$original = 'public://image.jpg';
$uri = image_style_path('thumbnail', $original);
$url = image_style_url('thumbnail', $original);
$original = 'public://image.jpg';
// Load the image style configuration entity.
$style = entity_load('image_style', 'thumbnail');
$uri = $style->buildUri($original);
$url = $style->buildUrl($original);

14. Create a derivative
D7
D8
$original = 'public://image.jpg';
$dest = image_style_path('thumbnail', $original);
image_style_create_derivative('thumbnail', $original, $dest);
$original = 'public://image.jpg';
// Load the image style configuration entity.
$style = entity_load('image_style', 'thumbnail');
$dest = $style->buildUri($original);
$style->createDerivative($original, $dest);

15. Flushing the image cache
D7
D8
$style = image_style_load('thumbnail');
image_style_flush($style);
$style = entity_load('image_style', 'thumbnail');
$style->flush();

16. Image Style Effects

17. Image Style Effects
D7 vs. D8

18. D7code: hook_image_effect_info()

19. D8Effects are plugins
D E F I N I T I O N

20. How to add your
image style effect?
Create your own
@ImageEffect
plugin
In your module directory, drop it under
lib/Drupal/mymodule/Plugin/ImageEffect/

21. Image Toolkits
ImageMagick

22. Pluggable
Drupal allows toolkits plug-in
GDToolkit

23. Image Toolkits
D7 vs. D8

24. Defining
hook_image_toolkits()
D7
function system_image_toolkits() {
$available = function_exists('image_gd_check_settings') &&
image_gd_check_settings();
return array(
'gd' => array(
'title' => t('GD2 image manipulation toolkit'),
'available' => $available,
),
);
}

25. Plugins
DrupalsystemPluginImageToolkitGDToolkit
D8
DEFINITION

26. Image Toolkit Operations

27. Image Toolkit Operations
D7 vs. D8

28. Disclaimer
The feature is still in the issue queue!
https://drupal.org/node/2073759

29. Resize an image
D7
D8
$image = image_load('public://image.jpg');
if (image_resize($image, 120, 200)) {
image_save($image);
}
$factory = Drupal::service('image.factory');
$image = $factory->get('public://image.jpg');
$args = array('width' => 120, 'height' => 200);
if ($image->apply('resize', $args)) {
$image->save();
}

30. Plugins
DrupalsystemPluginImageToolkitOperationgdResize.php
D8
DEFINITION

31. How to add your
image toolkit operation?
Create your own
@ImageToolkitOperation
plugin
In your module directory, drop it under
lib/Drupal/mymodule/Plugin/ImageToolkit/Operation/{toolkit}/

32. Resources
• Change records: https://drupal.org/list-changes
• Image meta issue: https://drupal.org/node/2105863

33. Thank you.
Questions?