The image system in the New World Order

Post on 23-Aug-2014

1.578 views 2 download

Tags:

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.

Transcript of The image system in the New World Order

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?