Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Image System in
the New World Order
Claudiu Cristea
@claudiu_cristea
drupal consultant, trainer, developer
opensource enthousiast, core contributor
webikon.co...
• The Image and the Image Factory
• Image Styles
• Image Style Effects
• Image Toolkits
• Image Toolkit Operations
Overview
Developers
The Image and
the Image Factory
$image = image_load('public://image.jpg');
image_save($image);
$image is stdClass
$factory = Drupal::service('image.factor...
Image Styles
Image Styles
D7 vs. D8
table: image_styles
table: image_effects
D7
code: hook_image_default_styles() D7
Configuration entity
core/modules/image/config/image.style.large.yml
D8
DEFINITION
D8
Derivative URI or URL
D7
D8
$original = 'public://image.jpg';
$uri = image_style_path('thumbnail', $original);
$url = imag...
Create a derivative
D7
D8
$original = 'public://image.jpg';
$dest = image_style_path('thumbnail', $original);
image_style_...
Flushing the image cache
D7
D8
$style = image_style_load('thumbnail');
image_style_flush($style);
$style = entity_load('im...
Image Style Effects
Image Style Effects
D7 vs. D8
D7code: hook_image_effect_info()
D8Effects are plugins
D E F I N I T I O N
How to add your
image style effect?
Create your own
@ImageEffect
plugin
In your module directory, drop it under
lib/Drupal...
Image Toolkits
ImageMagick
Pluggable
Drupal allows toolkits plug-in
GDToolkit
Image Toolkits
D7 vs. D8
Defining
hook_image_toolkits()
D7
function system_image_toolkits() {
$available = function_exists('image_gd_check_settings'...
Plugins
DrupalsystemPluginImageToolkitGDToolkit
D8
DEFINITION
Image Toolkit Operations
Image Toolkit Operations
D7 vs. D8
Disclaimer
The feature is still in the issue queue!
https://drupal.org/node/2073759
Resize an image
D7
D8
$image = image_load('public://image.jpg');
if (image_resize($image, 120, 200)) {
image_save($image);...
Plugins
DrupalsystemPluginImageToolkitOperationgdResize.php
D8
DEFINITION
How to add your
image toolkit operation?
Create your own
@ImageToolkitOperation
plugin
In your module directory, drop it u...
Resources
• Change records: https://drupal.org/list-changes
• Image meta issue: https://drupal.org/node/2105863
Thank you.
Questions?
Upcoming SlideShare
Loading in …5
×

The image system in the New World Order

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?

×