Upload
claudiu-cristea
View
1.577
Download
2
Embed Size (px)
DESCRIPTION
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.
Citation preview
The Image System in the New World Order
Claudiu Cristea
@claudiu_cristea
drupal consultant, trainer, developeropensource enthousiast, core contributor
webikon.com
drupal.org.ro
• The Image and the Image Factory
• Image Styles
• Image Style Effects
• Image Toolkits
• Image Toolkit Operations
Overview
Developers
The Image andthe Image Factory
$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 \Drupal\Core\Image\Image
Image class type
D7
D8
Image Styles
Image StylesD7 vs. D8
table: image_styles
table: image_effects
D7
code: hook_image_default_styles() D7
Configuration entitycore/modules/image/config/image.style.large.yml
D8
DE
FI
NI
TI
ON
D8
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);
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);
Flushing the image cache
D7
D8
$style = image_style_load('thumbnail');image_style_flush($style);
$style = entity_load('image_style', 'thumbnail');$style->flush();
Image Style Effects
Image Style EffectsD7 vs. D8
D7code: hook_image_effect_info()
D8Effects are plugins
D E F I N I T I O N
How to add yourimage style effect?
Create your own@ImageEffect
plugin
In your module directory, drop it underlib/Drupal/mymodule/Plugin/ImageEffect/
Image Toolkits
ImageMagick
PluggableDrupal allows toolkits plug-in
GDToolkit
Image ToolkitsD7 vs. D8
Defininghook_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, ), );}
Plugins\Drupal\system\Plugin\ImageToolkit\GDToolkit
D8
DE
FI
NI
TI
ON
Image Toolkit Operations
Image Toolkit OperationsD7 vs. D8
DisclaimerThe 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);}
$factory = \Drupal::service('image.factory');$image = $factory->get('public://image.jpg');$args = array('width' => 120, 'height' => 200);if ($image->apply('resize', $args)) { $image->save();}
Plugins\Drupal\system\Plugin\ImageToolkit\Operation\gd\Resize.php
D8
DE
FI
NI
TI
ON
How to add yourimage toolkit operation?
Create your own@ImageToolkitOperation
plugin
In your module directory, drop it underlib/Drupal/mymodule/Plugin/ImageToolkit/Operation/{toolkit}/
Resources
• Change records: https://drupal.org/list-changes
• Image meta issue: https://drupal.org/node/2105863
Thank you.Questions?