The image system in the New World Order

6,198 views

Published on

Slides of my presentation delivered to Szeged Drupal DevDays 2014: http://szeged2014.drupaldays.org/program/sessions/image-system-new-world-order

Moving the image system to Drupal 8 was a huge undertaking. Most of image components were converted to classes and plugins. Now the whole system is more flexible, extensible and modern.

Attend this session to find out how it works in Drupal 8 and how it's structured in the new OO environment. After having a quick overview of the new API you'll learn how to:

- provide image styles by code,
- add new image style effects,
- add or alter image operations,
...or even add new image toolkits instead of builtin GD2.

The image system in the New World Order

  1. 1. The Image System in the New World Order
  2. 2. Claudiu Cristea @claudiu_cristea drupal consultant, trainer, developer opensource enthousiast, core contributor webikon.com drupal.org.ro
  3. 3. • The Image and the Image Factory • Image Styles • Image Style Effects • Image Toolkits • Image Toolkit Operations Overview
  4. 4. Developers
  5. 5. The Image and the Image Factory
  6. 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. 7. Image Styles
  8. 8. Image Styles D7 vs. D8
  9. 9. table: image_styles table: image_effects D7
  10. 10. code: hook_image_default_styles() D7
  11. 11. Configuration entity core/modules/image/config/image.style.large.yml D8
  12. 12. DEFINITION D8
  13. 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. 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. 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. 16. Image Style Effects
  17. 17. Image Style Effects D7 vs. D8
  18. 18. D7code: hook_image_effect_info()
  19. 19. D8Effects are plugins D E F I N I T I O N
  20. 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. 21. Image Toolkits ImageMagick
  22. 22. Pluggable Drupal allows toolkits plug-in GDToolkit
  23. 23. Image Toolkits D7 vs. D8
  24. 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. 25. Plugins DrupalsystemPluginImageToolkitGDToolkit D8 DEFINITION
  26. 26. Image Toolkit Operations
  27. 27. Image Toolkit Operations D7 vs. D8
  28. 28. Disclaimer The feature is still in the issue queue! https://drupal.org/node/2073759
  29. 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. 30. Plugins DrupalsystemPluginImageToolkitOperationgdResize.php D8 DEFINITION
  31. 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. 32. Resources • Change records: https://drupal.org/list-changes • Image meta issue: https://drupal.org/node/2105863
  33. 33. Thank you. Questions?

×