Best Practices WYSIWYG (with inline image handling) @jenlampton | - - PowerPoint PPT Presentation

best practices wysiwyg
SMART_READER_LITE
LIVE PREVIEW

Best Practices WYSIWYG (with inline image handling) @jenlampton | - - PowerPoint PPT Presentation

22 August 2012 Best Practices WYSIWYG (with inline image handling) @jenlampton | http://www.jenlampton.com Wednesday, August 22, 2012 I AM @jenlampton I have been using Drupal since D4.7 I build Drupal sites for other people I consider


slide-1
SLIDE 1

(with inline image handling) @jenlampton | http://www.jenlampton.com

22 August 2012

Best Practices WYSIWYG

Wednesday, August 22, 2012

slide-2
SLIDE 2

I AM

@jenlampton I have been using Drupal since D4.7 I build Drupal sites for other people I consider myself a developer

Wednesday, August 22, 2012

slide-3
SLIDE 3

I AM

@jenlampton I have been using Drupal since D4.7 I build Drupal sites for other people I consider myself a developer

I HATE WYSIWYG EDITORS

Wednesday, August 22, 2012

slide-4
SLIDE 4

THERE’S A LOT TO COVER

  • Drupal’s Text Formats

(Filtered HTML, Full HTML, etc)

  • Drupal’s Filters - PHP

(line break, link, etc)

  • WYSIWYG editors - JS

(TinyMCE, CKEditor, etc)

  • A whole lot of configurations

Wednesday, August 22, 2012

slide-5
SLIDE 5

CONTRIB MODULES

  • WYSIWYG API (http://drupal.org/project/wysiwyg)
  • Better Formats (http://drupal.org/project/better_formats)
  • IMCE (http://drupal.org/project/imce)
  • IMCE Wysiwyg API Bridge (http://drupal.org/project/imce_wysiwyg)
  • Insert (http://drupal.org/project/insert)
  • Caption Filter (http://drupal.org/project/caption_filter)

Wednesday, August 22, 2012

slide-6
SLIDE 6

IF THERE’S TIME

  • Image Resize Filter (http://drupal.org/project/image_resize_filter)
  • Filefield Sources (http://drupal.org/project/filefield_sources)
  • WYSIWYG filter (http://drupal.org/project/wysiwyg_filter)
  • WYSIWYG fields (http://drupal.org/project/wysiwyg_fields)
  • EPSA Crop (http://drupal.org/project/epsacrop)
  • Other awesome WYSIWYG modules
  • Media (http://drupal.org/project/media)*
  • ALOHA (http://drupal.org/project/aloha)**

NOT COVERED

Wednesday, August 22, 2012

slide-7
SLIDE 7

DEMO (MY CODE)

  • Drupal 7

(the same principles apply to Drupal 6, but probably not to Drupal 8)*

  • Admin Menu module

(http://drupal.org/project/admin_menu)

  • Custom sub-theme of Bartik

(adds a style sheet: https://github.com/jenlampton/wysiwyg_theme)

Wednesday, August 22, 2012

slide-8
SLIDE 8

DEMO (MY CONFIG)

  • A new role called ‘editor’
  • A new user called ‘editor’ in the editor role
  • Permissions set accordingly for editors

Users Content

  • Added an ‘inline images’ field to the Page type

(field set to ‘hidden’ under display settings)

  • New content type ‘Icon‘

(inline images field aded, upload destination set to images/icons)

Wednesday, August 22, 2012

slide-9
SLIDE 9

LET’S GO!

Wednesday, August 22, 2012

slide-10
SLIDE 10

@jenlampton | http://www.jenlampton.com

BEST PRACTICES WYSIWYG

http://bit.ly/RbedXc

Wednesday, August 22, 2012

slide-11
SLIDE 11

photo credits:

DrupalCon Munich Slide Deck: http://munich2012.drupal.org/speakers/speaker-resources Angry face: http://www.last.fm/group/I+hate+shared+scrobblings+and+profles+of+artists

Wednesday, August 22, 2012