1

ADOBE CQ ENHANCEMENTS FOR RESPONSIVE DESIGN AND EDITORIAL CONTROL

2

INTRODUCTION

• Christopher Leggett

• Senior Developer

• Velir

• 6 Years Web Development Experience

3

VELIR

4

CQ ENHANCEMENTS

Focus For Enhancements

• Support Responsive Design

• Ease Content Entry

• Aim To Solve Common Needs

• Contribute To The CQ Communityhttps://github.com/Velir/AEM-Toolbox

5

CQ ENHANCEMENTS

Enhanced Image Servlet• New Resizing Options

New Widgets• Structured Multi List• YouTube Search

Rich Text Editor Plugins• New RTE Plugins• How To Build Your Own

6

CQ ENHANCEMENTSEnhanced Image Servlet

Existing Image Servlet

7

CQ ENHANCEMENTSEnhanced Image Servlet

Existing Image Servlet Features

8

CQ ENHANCEMENTSEnhanced Image Servlet

Resizing Considerations

9

CQ ENHANCEMENTSEnhanced Image Servlet

Hard Width/Height Resizing

10

CQ ENHANCEMENTSEnhanced Image Servlet

Max Width/Height and Min Width/Height Resizing

11

CQ ENHANCEMENTSEnhanced Image Servlet

How To Use It

12

CQ ENHANCEMENTSEnhanced Image Servlet

Skip Image Resizing With “.no” Selector• Image Gallery

13

CQ ENHANCEMENTSEnhanced Image Servlet

14

CQ ENHANCEMENTSEnhanced Image Servlet

Demo

15

CQ ENHANCEMENTSStructured Multi List Widget

CQ Widgets

16

CQ ENHANCEMENTSStructured Multi List Widget

What’s Missing

17

CQ ENHANCEMENTSStructured Multi List Widget

Carousel Component

18

CQ ENHANCEMENTSStructured Multi List Widget

Cast Of Heroes

19

CQ ENHANCEMENTSStructured Multi List Widget

Our Solution

20

CQ ENHANCEMENTSStructured Multi List Widget

Vault XML Definition

21

CQ ENHANCEMENTSStructured Multi List Widget

Demo

22

CQ ENHANCEMENTS

YouTube Search Widget

23

CQ ENHANCEMENTSYouTube Search Widget

Demo

24

CQ ENHANCEMENTSRich Text Editor Plugins

Rich Text Editor

25

CQ ENHANCEMENTSRich Text Editor Plugins

Provided Plugins

• Basic Formatting (Bold, Italic, Underline)• Justify (Left, Right, Center)• Hyperlinks• Lists• Format (Wrapping Tag)• Styling (CSS Class)• Tables• Source Editing• Special Characters

26

CQ ENHANCEMENTSRich Text Editor Plugins

Additional Plugins

• Blockquote Plugin

• Formatting Plugin

27

CQ ENHANCEMENTSRich Text Editor Plugins

Demo

28

CQ ENHANCEMENTSRich Text Editor Plugins

What’s needed to build a plugin• Plugin object (Extends CQ.form.rte.plugins.Plugin)• UI objects (Extends CQ.form.rte.ui.TbElement)• Command objects (Extends CQ.form.rte.commands.Command)

29

CQ ENHANCEMENTSRich Text Editor Plugins

Three Execution Paths

• UI Initialization

• Command Execution

• UI Updates

30

CQ ENHANCEMENTSRich Text Editor Plugins

UI Initialization

31

CQ ENHANCEMENTSRich Text Editor Plugins

Command Execution

32

CQ ENHANCEMENTSRich Text Editor Plugins

UI Updates

33

CQ ENHANCEMENTS

Christopher LeggettSenior DeveloperVelirchristopher.leggett@velir.com

Open Source• https://github.com/Velir/AEM-Toolbox

.com