Adding How-to Videos and Guidelines for content editors in Umbraco

While doing some work for a Charity in Australia, the client made a request to have some how-to videos displayed within the CMS.
The client had some advanced editors who were willing to record the videos and write down the guidelines.
Now they needed a way it could be displayed on the Umbraco back-office and updated by those advanced editors in the future.

This is the solution I came up with.

  • Create a Google Slides presentation with the guidelines and how-to videos. This Google Slides presentation can be later edited by anyone who has access to it.
    (PS: I tried Google Docs, but it didn't support video embedding)
  • Use File » Publish to the web » Embed option and copy the Embed code from there.

For a tab on the dashboard of the content section

  1. Create a new "Editor Help" tab within the Content Area using the instructions from here: https://our.umbraco.org/documentation/extending/dashboards/
  2. Here's my code sample for adding into ~/config/Dashboard.config:
  3. Create a view with the Embed code in it.
    Code sample:

For a tab on given document types:

  1. Install the "Inline Html Help Label" (ProWorksInlineHtmlHelpLabel) package from here: https://our.umbraco.org/projects/backoffice-extensions/inline-html-help-label
  2. Add another tab to the document type and name it as "Editor Help"
  3. Add a property named Help with an "HTML Inline Help Label" editors
  4. In the HTML to display, add some HTML with the Embed code in it:
    See my code snippet below:

That's all there is for the setup from a developer's perspective. Now an editor who has access to the Google Slides presentation could update it anytime and it will appear within the CMS back-office with no further intervention from the developer.

See a walkthrough video of how it was all put together.



This concept could be used with other CMS back-offices as well. Give it a try and leave me a comment.

Windows - Git Bash - Quick Setup with Notepad++ as editor

My personal notes for when I need to help others to set up Git Bash on their machines with Notepad++ as the text editor.

1. Generate new SSH Key
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

2.Start ssh-agent
# start the ssh-agent in the background
eval "$(ssh-agent -s)"
Agent pid 59566

3. Add key to ssh-agent
$ ssh-add ~/.ssh/id_rsa

4. Edit ~/.bashrc:
eval `ssh-agent`
ssh-add

5. Set Notepad++ as your text editor
$ git config --global core.editor \
"'C:/Program Files (x86)/Notepad++/notepad++.exe' -multiInst -notabbar -nosession -noPlugin"

6. Add the key to either GitHub or BitBucket
$ clip < ~/.ssh/id_rsa.pub



Sources:
https://help.github.com/categories/ssh/
https://confluence.atlassian.com/bitbucket/set-up-ssh-for-git-728138079.html
http://stackoverflow.com/questions/5727555/remember-password-git-bash-under-windows

Kentico Cloud View Model - Locally cached & Strongly Typed?

The Kentico Cloud Deliver API uses a CDN internally so that your content is available anywhere in the world in a few milliseconds. Even with that awesome speed, wouldn't it be great to locally cache your content?

Also, what if you prefer working with strongly typed view models?

This is where the EmmTi.KenticoCloudConsumer.EnhancedDeliver NuGet package (still in beta) comes to the rescue.



Nuget Package

This project is available as a nuget package at https://www.nuget.org/packages/EmmTi.KenticoCloudConsumer.EnhancedDeliver/

To install EmmTi.KenticoCloudConsumer.EnhancedDeliver, run the following command in the Package Manager Console


Quick Setup Guide

Initial Setup

1. Follow the steps in the Kentico Dancing Goat Example to setup a sample site.
2. Add the following config setting in appsettings of web.config. Tweak the cache time as you see fit.


Creating the View Model

1. Create a new ViewModel and inherit from BaseContentItemViewModel
2. Add a ItemCodeName constant with the code name for the Kentico Content Type
3. Create public properties for other Content Elements
4. Override MapContentForType method and map each field - See example



The Controller

In your Controller return the new ViewModel using the DeliveryFactory



The View

Use the strongly typed model in your View



See a full sample site

Clone an enhanced version of the Dancing Goat Sample site for a working example
https://github.com/emmanueltissera/Deliver-Dancing-Goat-Enhanced

It's just got the Homepage View converted to a strongly typed, locally cached version. I will be updating the rest of the views and code as and when I get some time.

Source Code

The source code for EmmTi.KenticoCloudConsumer.EnhancedDeliver is available on github for you to fork and work on.
https://github.com/emmanueltissera/EmmTi.KenticoCloudConsumer.EnhancedDeliver

Contributions, pull requests and comments are welcome.