Khoros Atlas Logo

Chrome Extensions for Lithium Studio

Khoros Staff SuzieH
Khoros Staff

The Lithium Developer Network brings out the best of Lithium community and collaboration. I spend time in the Developers Discussion forum and Developers Knowledge Base on a daily basis, and the camaraderie and support I see shared among Lithium employees, partners, veterans, and newbies always makes smile. One of my favorite parts of the Developer Network is our members’ innovation and desire to share code samples and customizations.

 

Keeping with this spirit of collaboration and giving back to the community, we here at Lithium  want to highlight a couple of Chrome extensions created by folks you’ve likely interacted with on the Lithium Community.

Lithium Bulk Uploader

 

This extension is brought to you by Hinterlands, a long-time Lithium partner. You might have seen Chris Blown - @cblown - present at LiNC. Or perhaps their Technical Lead Peter Lu - @peterlu - provided a solution to your forum post.

 

Hinterlands developed the Lithium Bulk Uploader, an extension the enables drag and drop assets into the Asset Library in Studio > Community Style > Asset Library > Other Assets.



bulkImageUploadHinterlands.png

 

To view the original Asset Library and macros for referencing an image in custom code, simply click the Show Legacy Version link at the bottom of the window.

 

The extension also provides a nice enhancement for the delete asset workflow. Simply click the Delete button (X) on an image to remove an asset from the Asset Library. You’ll see a confirmation dialog to verify your actions.

 

It’s a slick little tool for enhanced file upload and management with nice visualization of your custom assets.

Lithium Studio Editor Enhancement

 

Lithium’s own @NicoB, @ChiaraS, @DeepakK, and @RafaelC from the Lithium Services team built the Lithium Studio Editor Enhancement extension during one of Lithium’s internal hack-a-thons. Check out the formatting and functionality it adds to text areas in Studio and the API Browser.


lithiumStudioEditorEnhancement.png

 

After you install this extension, text areas in Studio (except for XML View for quilts and layouts)  include:

  1. Line numbering
  2. Auto completion of the most common FreeMarker tags (press CTRL+Space)
  3. Tag match highlighting for HTML and JSON in the API Browser
  4. Syntax highlighting
  5. Code folding with JSON
  6. Resizable text areas. Place the cursor on the right bottom corner of a text area to resize.

This extension makes component and endpoint creation and editing in Studio so much better.  I love the autosuggest and tag complete feature. And the ability to resize the text area? Priceless.

 

Inspiring stuff, yes? We think so too.

 

Go ahead and give a shout-out of thanks to these amazing Lithium Developer Network contributors. This is what Community is all about. 

10 Comments
Commentator SV
Commentator

Shout out to Hinterlands and Lithium Services team for all the great work and effort! Thanks guys, you're awesome!

Lithium Alumni (Retired) Lithium Alumni (Retired)
Lithium Alumni (Retired)

A new update of the Lithium Studio Editor Enhancer (2.0) has been pushed adding support for SASS files and fixing the wrapper which now gets all its section enhanced.

Please let me know if you notice any issue or if you have any feedback.

Honored Contributor
Honored Contributor

In case you were looking for download links as well:

Lithium Bulk Uploader: https://chrome.google.com/webstore/detail/lithium-bulk-uploader/hipklmblmccmfkjpkokghdpfcnkblcib

Lithium Studio Editor Enhancement: https://chrome.google.com/webstore/detail/lithium-studio-editor-enh/noiffnkgeldhkegbdldaeghijnoghapj

 

Great extensions! How could I miss the Editor enhancements for soooo long (doh)

Valued Contributor
Valued Contributor

The Studio Editor enhancement is awesome -- it's what I've been missing!  Thanks so much for developing and making this available.

Trusted Contributor
Trusted Contributor

Thanks @SuzieH This is great to know.  I just wish I had read this earlier.  But no time like the present.

 

Look @cindycapo and @edaccessible

Trusted Contributor
Trusted Contributor

 Excellent @SuzieH. Thank you for sharing this post @stevekrohn

Honored Contributor
Honored Contributor

@NicoB Would you mind updating the Studio Enhancements to support the new CSS community style editor in 16.3? Currently they are plain old HTML input fields again.

Trusted Contributor
Trusted Contributor

Always a pleasure @edaccessible and thanks again to @NicoB

Trusted Contributor
Trusted Contributor

@SuzieH, This is a great feature. Thanks to Lithium for providing this.

 

We observed that Ctrl+F (Find) functionality is not working as expected as previous. It is only searching visible area not inside the code. Without plugin, we can able to search inside code even though only few lines of code is visible in component content text box (without scrolling). 

With Plugin Behavior:

WithPlugin.PNG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Without Plugin Behavior:

WithoutPlugin.PNG

 

 

 

 

 

 

 

 

 

 

 

 

 

vmula
New Commentator

 Thank you for sharing... this is awesome post