Elgg’s ECML plugin adds support for an extensible keyword system that allows users to quickly add elements and embed media in their content. The plugin was in development by Curverider up until last summer. ECML is similar to WordPress's shortcodes.
I have recently restarted development on this plugin with the goal of completing an initial release to the community for version 1.8. I have the core of the plugin up and running and embedding web content. I am currently building the UI for web content embedding. I would love to get community involvement - comments, feedback, and/or development help.
Background
ECML plugin and the Embed plugin are closely related in that Embed serves as a sort of front end for ECML. Having a system in place that allows a user to easily generate and insert ECML is beneficial, especially with 3rd party web services, where URLs and embed codes vary greatly.
ECML includes a few built-in keywords to get you started. They are mainly for embedding content from 3rd party sites, but also include two utility views to help non- programmers quickly display content.
Plugins can add their own ECML keywords. Each keyword must be bound to a valid view. Almost all functionality in custom keywords could be implemented using the 'view' keyword, but custom keywords provide a simple way for non-techy users to include ready-made views without fuss of knowing what they're doing.
User Interface Prototypes
Currently, only web services ECML keywords are supported. (The following screen shots from a working prototype in development)
Embed content - New Web Content tab.
Web content is selected from the available web content keywords. Here YouTube, DailyMotion, Google Maps, Slideshare and Vimeo are enabled. Note that I have already entered a url in this image.
Embed content - Web Content item instructions.
Instructions for finding the correct url to enter are given for each web content keyword.
Embed content - Web Content Options.
After entering a keyword, an ajax call is made to the server to check the validity of the url (note the green check). An option pane allows selection of embed options. Here the user can select embed size, alignment and text wrap options.
Embed content = Web Content Preview
After selecting options, the user is allowed to preview the embedded content. If acceptable, clicking the "Embed" button inserts the ecml code into the text area. If desired, the user may select different embed options.
The ECML plugin includes an administration settings panel that can be used to granularly allow ECML keywords in certain contexts and views.
ECML adminstration settings.
The ECML settings panel allows the site administrator to specify what keywords are allowed to be embedded in each context. Plugins register their ECML capable views in their init routine (you may have noticed the following code in 1.8 plugins (this one from the 1.8.1 blog plugin):
elgg_register_plugin_hook_handler('get_views', 'ecml', 'blog_ecml_views_hook');
I have a while to go before the UI shown above is ready for test driving. And please note - this interface is a continuation of the work started by Curverider. My strategy is re-assemble, complete, fix and test their work. This UI gives the user what they need to embed, however it may not scale well and may need to be re-imagined.
Comments? Want to get involved? The project is up on gitHub:bchapin/ecml. I will push current work later this week. I encourage you to download and give it a look... or fork it and apply your own UI thoughts. BUT PLEASE - DO NOT INSTALL THIS ON A PRODUCTION SITE. IT IS NOT READY FOR PRODUCTION USE.
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by RaĆ¼l Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
- Brian Chapin@bchapin
Brian Chapin - 0 likes
You must log in to post replies.Had a request for larger images. They are here:
http://www.testtutor.com/images/embed_webcontent_tab_large.png
http://www.testtutor.com/images/embed_webcontent_instructions_large.png
http://www.testtutor.com/images/embed_webcontent_options_large.png
http://www.testtutor.com/images/embed_webcontent_preview_large.png
http://www.testtutor.com/images/ecml_admin_settings_large.png