Projects https://our.umbraco.org Sat, 04 Jul 2015 06:53:47 +00:00 umbraco Latests packages from the forum on our.umbraco.org en V7 Editors Manual - Bookshelf Edition https://our.umbraco.org/projects/backoffice-extensions/v7-editors-manual-bookshelf-edition/ https://our.umbraco.org/projects/backoffice-extensions/v7-editors-manual-bookshelf-edition/ This is an editable Markdown version of the documentation done by Matt Wootton and CAB Studios. (https://our.umbraco.org/projects/website-utilities/umbraco-7-editors-manual/)

The markdown was created in and is intended for use with Kevin Giszewski's Bookshelf Package. (https://our.umbraco.org/projects/backoffice-extensions/bookshelf/)

This is also available to download directly through the Bookshelf Package from github. (https://github.com/okhenry/V7-Editors-Manual/archive/master.zip)

This documentation is current through 7.1 and needs some updating to address new features such as the Grid editor.

]]>
Owen Henry Mon, 22 Jun 2015 19:17:21 +00:00
uHateoas - Umbraco Hypermedia As The Engine Of Application State https://our.umbraco.org/projects/developer-tools/uhateoas-umbraco-hypermedia-as-the-engine-of-application-state/ https://our.umbraco.org/projects/developer-tools/uhateoas-umbraco-hypermedia-as-the-engine-of-application-state/ Umbraco REST Hypermedia API.

We all love using Umbraco to build our websites, web & mobile apps, but not all of us have C# skills. Umbraco & uHateoas provide us with an intuitive web based UI to define, capture and maintain entities, relationships and rules for our content in an intuitive non technical interface, now coupled with a queryable, updatable Hypermedia REST API.

Project Site : http://uhateoas.wg2k.com
GitHub : https://github.com/uhateoas/uhateoas

When it comes to taking our content and using it on websites, mobile hybrid apps or anywhere you can dream of, it assumes a certain level of understanding of the ASP.NET stack, Webforms, MVC, Razor, Web API etc. 

This is not a problem for any ASP.NET developer, but what about someone that is great at HTML, CSS and Javascript and doesn't know or care about ASP.NET? 

At the moment you would need a ASP.NET developer to expose selected functionality and data via a custom written Web API, that would expose certain parts of the data stored in Umbraco. 

This could then be consumed by the front-end developer via the custom REST based API that the ASP.NET developer produced. 

With UHATEOAS, this is not necessary.

Simply install the UHATEOAS package and your Umbraco content is now automatically discoverable, navigable, query-able, page-able and editable via a standard Hypermedia API that is driven by the Document Types, DataTypes, Structure, Rules and User / Member Access Control that you define through the Umbraco Back-Office. 

Installation

Simply install the uHateoas package from the Project's section on Our Umbraco 

That's it, you are ready to rock! You are now able to query your Umbraco website using any REST client i.e. Advanced REST Client, Postman, Paw, Insomnia and of course via JavaScript using any of the JavaScript library's out there like jQuery, AngularJS, Polymer, Knockout, React etc. 

Content-Type Request Headers

We wanted the uHateoas API to be intuitive and easy to use ideally without any prior experience and with minimal or no documentation. That sounds typical of a lazy developer speaking, but Hypermedia As The Engine Of Application State really does deliver in this regard. Think of a website with lots of pages, with lots of relevant information, but with no hyper-links and no forms for accepting feedback. The web would never have taken off! 

So why make API's black boxes that need documentation just in order to use them? Why not simply surf to the web-site and specify the Content-Type Header that you would like to get the web-site's data returned to you in! By default if you don't specify a Content-Type Header, as you would expect you will simply get back HTML. If however you specify a different Content-Type Header instead of the default text/html, wouldn't it be great to get back the raw data of that resource in the format that you want it? 

This means that any page on your Umbraco web-site can now be served up in whatever format you support, via the URL that you would normally use on the web-site, simply by changing the Content-Type Header in the request. 

General Usage

As mentioned if you specify a Content-Type such as text/umbraco+json or text/json or text/xml, then all you need is to supply the starting point in your web-site, i.e. the starting URL. If you want access to all the content, start at the root of your web-site, if not, specify a more specific URL. Unlike most API's, you don't need to know or be told to use a specific API endpoint, you simply use the one you already know from surfing your web-site! 

Querying Umbraco

This is where the API really shines. It can be used to query, segment, filter and page your content in a SQL/LINQ like way using simple name-value pair switches. These name/value pairs should be recognised by the average Umbraco developer, as they are concepts that you use every day when building sites using Razor. Now you can just use them directly via the URL as a set of URL based parameters! 

Editing Umbraco

The POST, PUT, PATCH and DELETE verbs allow you to do Create Update and Delete operations using IContent via the Content Service when logged in as an Umbraco Back-Office User.


The API exposes Actions based on the permissions of the logged-in Umbraco User. Please Note : PUT, PATCH and DELETE verb support has only been enabled in version 1.3.2.


The actions Create, Update and Delete are exposed as a collection of actions based on the User's admin rights and the DocumentTypes that are allowed under the current node. With the Umbraco Hypermedia API, you are able to create complex Single Page Applications without writing a single line of server-side code. It turns any Umbraco v7+ website into a REST based data repository with a very capable, query-able Hypermedia API!


We are working on a build where you will be able to map Umbraco Member roles to Umbraco Users as well as mapping anonymous visitors to an anonymous Umbraco User to facilitate creation of nodes for use cases like ContactUs, Comment etc where we would like to enable visitors that are not logged in to be able to use the POST and PATCH verbs in a controlled manner. 

]]>
Brendan Rokebrand Mon, 22 Jun 2015 15:30:32 +00:00
Pugpig for Umbraco v7 https://our.umbraco.org/projects/starter-kits/pugpig-for-umbraco-v7/ https://our.umbraco.org/projects/starter-kits/pugpig-for-umbraco-v7/ Starterkit package with which you can create pug pig publications. 

Install instructions

Install the package.  Move the newly create publications node to the root of your website.  Edit the content so that empty / missing images in edition and page nodes have images (NB creating a package does not allow addition of images from media section to the package hence missing images).  Publish publication and child pages.  In the properties tab of publication, editions and pages you will see pugpig urls. When using pugpig client reader you can set the ODPS url to publication url.

Made by The Cogworks.

]]>
The Cogworks Tue, 16 Jun 2015 09:37:46 +00:00
GNU Pratchett https://our.umbraco.org/projects/website-utilities/gnu-pratchett/ https://our.umbraco.org/projects/website-utilities/gnu-pratchett/ This is a simple package that inserts the X-Clacks-Overhead HTTP header to your site, containing the name of the author Terry Pratchett. This is to keep his name alive, and is based on something from his novel, Going Postal.

You can find out more about this here: http://www.gnuterrypratchett.com/

]]>
Tim Mon, 15 Jun 2015 15:47:02 +00:00
The Dashboard https://our.umbraco.org/projects/backoffice-extensions/the-dashboard/ https://our.umbraco.org/projects/backoffice-extensions/the-dashboard/ This is a magic dashboard for Umbraco 7, it's accualy "The dashboard". It will show editors a summery of the latest activites on the website combined with each editors recent files and other useful information.

]]>
Markus Johansson Sun, 14 Jun 2015 09:51:35 +00:00
uCop https://our.umbraco.org/projects/backoffice-extensions/ucop/ https://our.umbraco.org/projects/backoffice-extensions/ucop/ uCop is an Umbraco CMS plugin that helps with website maintenance. The initial version shows breakdown of document types defined in a site together with some other static data, helping the editors and developers see the dependencies at a glance. The aim is to extend uCop to allow dynamic analaysis of the site based on predefined rules, aiding the development and maintenance further. This can be used to evaluate the healt of a site, or to enforce conventions and best practises.

]]>
Ondrej Pialek Mon, 08 Jun 2015 17:18:31 +00:00
Speedy Image https://our.umbraco.org/projects/website-utilities/speedy-image/ https://our.umbraco.org/projects/website-utilities/speedy-image/ Camera to Web. Open Source, Resize, Watermark, Optimize, Cache, Automatic.

1. Install SpeedyImage 2.XX Package

2. Edit your template, where bodyText is your Rich Text Editor.

@Html.Raw(SpeedyImage.Mvc.Go(CurrentPage.bodyText, 0, 0, 600, 800, true, 88, "/media/1003/watermark.png"))

3. Enjoy!


DOCUMENTATION

 

Table of Contents ~ Mvc ~ Manual ~ Cache ~ Umbraco Resizing

MVC

SpeedyImage.Mvc.Go(object html, int height, int width, int maxheight, int maxwidth, bool constrain, int quality, string watermark)

 

@Html.Raw(SpeedyImage.Mvc.Go(CurrentPage.Copy, 0, 0, 600, 800, true, 88, "/media/1003/watermark.png"))

MANUAL

/SpeedyImage.ashx?imagepath=%2fmedia%2f1009%2fimg_20150311_214650.jpg&

height=0&width=0&maxheight=600&maxwidth=800&constrain=True&

quality=88&watermark=%2fmedia%2f1003%2fwatermark.png

CACHE

 

To activate caching, paste the following in your Web.config AppSettings

<add key="SpeedyImage.CacheInterval" value="15" />

 

UMBRACO RESIZING

 

Umbraco will add “style” to your <img> tags.  Disable resizing to use responsive images.

Developer > Datatypes > Richtext editor > Maximum size for inserted images = 0

 

]]>
Jeff Schollaart Mon, 08 Jun 2015 15:31:18 +00:00
Pure Grid Layout https://our.umbraco.org/projects/website-utilities/pure-grid-layout/ https://our.umbraco.org/projects/website-utilities/pure-grid-layout/ This package contains 2 grid layout data types and partial views for the Pure CSS framework.

The GitHub repository contains an example project that demonstrates how to use it:

https://github.com/stvnhrlnd/PureUmbraco

]]>
Steven Harland Thu, 04 Jun 2015 22:51:49 +00:00
Documento https://our.umbraco.org/projects/backoffice-extensions/documento/ https://our.umbraco.org/projects/backoffice-extensions/documento/ Every website concludes with the tedious task of producing documentation for content editors. Documento makes this a little bit easier. 

Assuming you have been providing descriptions for Document types and Properties along the way, Documento installs a dashboard tab to the Umbraco back-office, listing the document types and properties, alongside their descriptions and data types. 

To avoid listing helper document types or properties, only those with Descriptions will be displayed.

 

 

 

 

 

]]>
Theo Thu, 04 Jun 2015 13:20:39 +00:00
LINQ To Examine https://our.umbraco.org/projects/developer-tools/linq-to-examine/ https://our.umbraco.org/projects/developer-tools/linq-to-examine/ What is Umbraco.Examine.Linq?

This project allows you to query the Lucene indexes using LINQ based on your own classes. This project comes with a basic Result class which allows you to use this straight out of the box.

Code example

Lets start with some code examples. Say, I want to get all words that contains "umbraco" and it has to be a text page. This is how the code would look:

@using Umbraco.Examine.Linq
@using Umbraco.Examine.Linq.Extensions

var index = new Index<Result>();
IEnumberable<Result> results = index.Where(c => c.Name.Contains("umbraco") && c.NodeTypeAlias == "textpage").ToList();

Or alternatively,

@using Umbraco.Examine.Linq
@using Umbraco.Examine.Linq.Extensions

var index = new Index<Result>();
IEnumberable<Result> results = (from r in index
                where r.Name.Contains("umbraco") && r.NodeTypeAlias == "textpage"
                select r).ToList();

Above, we are creating a new index, setting the type we wish to query. See Index constructor section for more information on how you can change the target of your search. By default, the "ExternalSearcher" is used. Anyway, then we perform the search using Where, and ToList() at the end that executes the query.

Installation

Install via Nuget using the command below. Then add the config manually in step 2.

Step 1:

PM> Install-Package LINQToExamine

Step 2 (I will automate this as part of step 1 asap):

Instert in > Configuration > Compilation > Assemblies

<add assembly="System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

<add assembly="System.Linq.Expressions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

Index Constructor - changing the default

ConstructorDescription
Index(string searcherName") Set which Umbraco Searcher to use (see UmbracoSettings.config)
Index(ISearcher searcher) Allows you to set up and target your own Lucene index. The query is passed to you to execute. All you need to do is implement the ISearcher interface.

How to use your own custom classes?

using Umbraco.Examine.Linq.Attributes

[NodeTypeAlias("BlogPost")] //completely optional!!!
public class BlogPost
{
    [Field("nodeName")]
    public string Name { get; set; }
    [Field("content")]
    public string Content { get; set; }
    [Field("summary")]
    public string Summary { get; set; }
    [Field("blogDate")]
    public DateTime BlogDate { get; set; }
    [Field("createDate")]
    public DateTime CreateDate { get; set; }

    public Examine.SearchResult Result { get; set; } //will automatically set the result from Examine
}

There are two attributes being applied. The NodeTypeAlias attribute will automatically add the filter to the search, so you will only see results of that type. The Field attribute declares that name of the field in the index, if nothing is specified, it will default to the property name. The data will be mapped directly from the Examine SearchResult into your custom class. If you specify a property with the type Examine.SearchResult, it will automatically assign the result to your class, if you wanted access to scores etc.

So, say you wanted to find all BlogPosts' where the summary contains the terms "fishing" or "cod". The query will look like this:

@using Umbraco.Examine.Linq
@using Umbraco.Examine.Linq.Extensions

var index = new Index<BlogPost>();
IEnumerable<BlogPost> results = index.Where(c => c.Name.ContainsAny("fishing", "cod")).ToList();

Expression logic

string logic:

Extension method / operatorDescriptionExample
== (operator) Whether the field contains the value r => r.Name == "foo"
!= (operator) Whether the field does not contains the value r => r.Name != "foo"
Contains(term) Whether the field contains the value r => r.Name.Contains("foo")
Contains(term, fuzzy) Whether the field contains the value with Fuzzy enabled r => r.Name.Contains("foo", 0.8)
ContainsAny(term) Whether the field contains any of the values r => r.Name.ContainsAny("foo", "bar", "etc")
ContainsAll(term) Whether the field contains all of the values r => r.Name.ContainsAll("foo", "bar", "etc")

All these support NOT (!)

bool logic:

Extension method / operatorDescriptionExample
== (operator) Whether the field is true or false r => r.UmbracoNaviHide == false
!= (operator) Whether the field is not true or false r => r.UmbracoNaviHide != false

int and double logic:

operatorDescriptionExample
== (operator) Whether the field is equal r => r.Rating == 4
!= (operator) Whether the field is not equal r => r.Rating != 4
< (operator) Whether the field is less than r => r.Rating < 4
<= (operator) Whether the field is less than or equal to r => r.Rating <= 4
> (operator) Whether the field is greater than r => r.Rating > 4
>= (operator) Whether the field is greater than or equal to r => r.Rating >= 4

DateTime logic:

operatorDescriptionExample
== (operator) Whether the field is equal r => r.CreatedDate == date
!= (operator) Whether the field is not equal r => r.CreatedDate != date
< (operator) Whether the field is less than r => r.CreatedDate < date
<= (operator) Whether the field is less than or equal to r => r.CreatedDate <= date
> (operator) Whether the field is greater than r => r.CreatedDate > date
>= (operator) Whether the field is greater than or equal to r => r.CreatedDate >= date

More logic extension methods on the way, to help with ranges.

Boosting

Boosting allows you to boosts results that meet a specific condition. For example, you may want to boost the score for results where the content contains the word "Umbraco". Alternatively, you may want to boost results where the content contains the word "Umbraco" or summary contains "Events". Lets look at implementing both:

First Query: Get results where the name contains the term, and boost where content contains the word "Umbraco"

string term = GetTerm(); //get the search term - your implementation
var index = new Index<BlogPost>();
IEnumerable<BlogPost> results = index.Where(c => c.Name.Contains(term) 
                                              && c.Content.Contains("Umbraco").Boost(10)
                                            ).ToList();

Second Query: Get results where the name contains the term, and boost where the content contains the word "Umbraco" or the summary contains "Event":

string term = GetTerm(); //get the search term - your implementation
var index = new Index<BlogPost>();
IEnumerable<BlogPost> results = index.Where(c => c.Name.Contains(term) 
                                  && (c.Content.Contains("Umbraco") || c.Summary.Contains("event")).Boost(10)
                                ).ToList();

Wildcard Searches

Wildcard searches are easy to do. Just specify the * in the text you are querying.

For example:

@using Umbraco.Examine.Linq
@using Umbraco.Examine.Linq.Extensions

var index = new Index<Result>();
IEnumberable<Result> results = index.Where(c => c.Name.Contains("umbr*") && c.NodeTypeAlias == "textpage").ToList();

New in 1.0.4

  • Ability to query on DateTimes, ints and doubles.
]]>
Craig Noble Mon, 01 Jun 2015 02:16:42 +00:00
Mr N Picker https://our.umbraco.org/projects/backoffice-extensions/mr-n-picker/ https://our.umbraco.org/projects/backoffice-extensions/mr-n-picker/ Mr N Picker is a Multi-Root Node Picker for Umbraco 7, built as a part of Project Yoxo.

Why would I want multiple root nodes in a MNTP?

This package allows a developer to create a clean tree structure based on multiple root nodes, without having to select a shared parent node or include items that aren't relevant to the content editor.

Getting Started

This package was built against Umbraco 7.2.1, but is supported across all current versions of Umbraco 7.

Installation

Mr N Picker is available from Our Umbraco, NuGet, or as a manual install directly from GitHub.

Our Umbraco repository

You can find a downloadable package, along with a discussion forum for this package on the Our Umbraco site.

NuGet package repository

To instal from NuGet, run the following command in your instance of Visual Studio.

PM> Install-Package MrNPicker 

Manual installation

Just download and add the package to your App_Plugins folder. When you open your instance of Umbraco you will be able to create a new data type based on Mr N Picker.

Using Mr N Picker

Using Mr N Picker is simple. Set up a new data type and select the Mayfly.MrNPicker type from within Umbraco's Developer section. After your selection, you will be presented with the following options for your data type, which are as follows:

  • Root nodes: A MNTP that allows you to select one or more roots for your multi-root node picker.
  • XPath: A collection of XPath expressions to select a number of roots
  • Allow items of type: A comma-delimited list of document type aliases to filter the resulting node tree
  • Minimum number of items: The minimum number of items the editor can add to a multi-root node picker. This can be left empty if no minimum constraints are required
  • Maximum number of items: The maximum number of items the editor can add to a multi-root node picker. This can be left empty if no maximum constraints are required
  • Merge roots: Merges the roots in the rendered tree if a selected root is the child of another selected root. This avoids duplication in the tree.

Once this data type is set up, you will be able to add the data type as a property to a document type. When an instance of that document type is created/accessed, the editor will see the resulting multi-root node picker with their rendered tree.

Contribution guidelines

To raise a new bug, create an issue on the GitHub repository. To fix a bug or add new features, fork the repository and send a pull request with your changes. Feel free to add ideas to the repository's issues list if you would to discuss anything related to the package.

Who do I talk to?

This project is maintained by Mayfly Media. If you have any questions about this project please contact us through the Mr N Picker forum on Our Umbraco, or by raising an issue on GitHub.

Many thanks

Additional thanks to Janusz Stabik and Declan Burns for providing the necessary time and resources for the Mayfly team to work on this project.

License

Copyright © 2015 Mayfly Media Ltd, and other contributors

Licensed under the MIT License.

]]>
Mayfly Media Wed, 20 May 2015 11:59:05 +00:00
Stately https://our.umbraco.org/projects/backoffice-extensions/stately/ https://our.umbraco.org/projects/backoffice-extensions/stately/ Add page-state icons to content nodes in the backoffice.

v2.0 - Adds full support for icon packages (Belle / FontAwesome / Google Material) and improves CSS - icon positioning previously went a bit skewy on nested nodes, should be ok now.

Still seeing an intermittent issue where the show/hide children arrow is not rendered - to replicate, change a property on a node (with children) to trigger a Stately icon change. Refresh the browser. Occasionally the show/hide children arrows are not rendered. Switching to another backoffice section then back to the content pane corrects it.

Looks like the tree-rendering Javascript service is returning false for the hasChildren property on the nodes. Not sure how Stately would be causing that, but will continue to investigate.

***

Long-time fans of Umbraco will be familiar with the Page State Icons package (bitbucket.org/umbristol/page-state-icons) - Stately is a v7 implementation of the same functionality.

Stately adds a new dashboard to the settings section of your Umbraco installation.

From the dashboard, you can configure rules for displaying page-state icons - set a property alias, true/false and choose an icon. 

The settings are stored in a config file that comes preloaded with best-practice Umbraco properties, being umbracoNaviHide, umbracoRedirect and umbracoUrlAlias.

Stately will match on either the presence of a property value (ie bodyText[true] will add an icon to any node where the bodyText property contains any value) or the presence of a true/false value (ie umbracoNaviHide[false] will add an icon to any node where umbracoNaviHide is set to false).

Stately will only match once per node - it iterates the config values and applies the first match. Given that, the order of the properties in the dashboard can be used to prioritise particular icons.

Umbraco's default page-state indicators take precedence over Stately - the has-unpublished-version class will always be displayed ahead of any Stately defined icons.

 

]]>
Nathan Woulfe Fri, 15 May 2015 01:20:59 +00:00
GridMaps https://our.umbraco.org/projects/website-utilities/gridmaps/ https://our.umbraco.org/projects/website-utilities/gridmaps/ GridMaps for Umbraco

GridMaps is a simple grid editor for google maps to help you visualize google maps in the grid.

 

Installation:

Install the package and add the google maps script to your master layout

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
]]>
David Brendel Thu, 14 May 2015 18:58:38 +00:00
uSEO PRO https://our.umbraco.org/projects/developer-tools/useo-pro/ https://our.umbraco.org/projects/developer-tools/useo-pro/ uSEO PRO With Focus Keyword

The project is a property editor that will store information for SEO purposes. Such as Page Title, Meta Description, Keywords and Robot data.

This information is then displayed to an editor in a way that is akin to Google search page.

Also included is an optional tool for the editor to use a FOCUS KEYWORD for the page - The editor will be presented with a list of auto completed suggestions related to the focus keyword.

The page is also evaluated to give feedback to the editor to indicate whether the focus keyword is found in relevant attributes, such as the URL, Title, Description and Content.

 

How To Install & Use

1. Install the package as you would any other simple package. 

2. Add a new Data Type of type uSEO PRO.

3. Add as a property to any document type you wish to use it on. The code example below is based on a property with alias seoFields.

 

How To Use In The Frontend

1. In you Master Page in between the <head> tags, make a reference to a partial view @{ Html.RenderPartial("_uSeoPro"); }

2. Create a new partial view _uSeoPro.cshtml and copy the code below.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{

    var seo = CurrentPage._seoFields;

    if(!IsNullOrEmpty(seo))

    {

        if(seo.noseo == null || seo.noseo == false)

        {

            var title = IsNullOrEmpty(seo.title) ? CurrentPage.Name : seo.title;

            <title>@title | Static Title End</title> 

            if(IsNullOrEmpty(seo.keywords) == false){

                <meta name="keywords" content="@seo.keywords" />

            }

            if (IsNullOrEmpty(seo.description) == false){

                <meta name="description" content="@seo.description" />

            }

            if(IsNullOrEmpty(seo.robots) == false) {

                <meta name="robots" content="@seo.robots" />

            }

        }       

    }

}

 

@functions {

    private bool IsNullOrEmpty(object property)

    {

        return property == null || String.IsNullOrEmpty(property.ToString());

    }

}

]]>
Luke Mon, 11 May 2015 20:45:02 +00:00
Sticky Profiler https://our.umbraco.org/projects/developer-tools/sticky-profiler/ https://our.umbraco.org/projects/developer-tools/sticky-profiler/ This package makes the mini profiler display itself automatically on all pages without having to add umbDebug=true to the current page URL.

To disable the profiler for a specific page, add umbDebug=false to the page URL.

You can disable the package by changing the app setting "Umbracian.StickyProfiler" to "false".

Kind reminder: Always remember to disable the profiler entirely in your production environment by setting the "debug" attribute of <compilation> (under <system.web>) to "false".

]]>
Kenn Jacobsen Mon, 04 May 2015 07:38:47 +00:00
Personalisation Groups https://our.umbraco.org/projects/website-utilities/personalisation-groups/ https://our.umbraco.org/projects/website-utilities/personalisation-groups/ Introduction

Personalisation Groups is an Umbraco package intended to allow personalisation of content to different groups of site visitors.  It comes with some document types, data types and custom property editors to allow you to define groups based on given criteria and an extension method on IPublishedContent to allow you to show or hide content according to these criteria in your templates.

It comes with a number of criteria, namely:

  • Authentication status
  • Cookie key presence/absence and value matching
  • Country (via IP matching)
  • Day of week
  • Referral
  • Session key presence/absence and value matching
  • Time of day
  • Umbraco member group
  • Umbraco member profile field
  • Umbraco member type

And is extensible so you can write your own.

Important caveat: please note this package is marked as beta as it's very early days.  It's not been used in any production setting yet and is released currently purely for getting some feedback and perhaps help for developing it.

That said, I think it's reasonably solid so feel free to take a look and use as you see fit - but please be warned it's not coming yet with much background of testing or live usage.

For more detailed information on use, extending the package, troubleshooting info or to review and/or contribute to the source code, see the documentation and source code repository at Github: https://github.com/AndyButland/UmbracoPersonalisationGroups

Using the package

Installation

Firstly install the package in the usual way.  

Once installed you'll find a few additional components:

  • Personalisation Groups Folder is a document type purely used to organise your personalisation groups.  By default you can create it at root and within it create further instances of itself.
  • Personalisation Group is a document type where the group itself is created.  You can place these inside the folders.  It comes with a single property called Group definition of a data type also provided with this package.
  • Personalisation group definition the data type provided to allow the definition of personalisation group, based on a new property editor provided in the dll installed with the package.
  • Personalisation group picker is an data type instance of the multi-node tree picker property editor, for the selection of groups for given piece of content

Example usage

  • Within the Content section, create a root node of type Personalisation Groups Folder, called Personalisation Groups
  • Switch to Developer and find the Personalisation group picker data type.  Set the root node to be the node you just created.
  • Back to Content, as a child of the node you just created, create a node of type Personalisation Group called, for example, Weekday morning visitors
  • Set the Match option to All
  • Add a new criteria of type Day of week and tick the boxes for Monday to Friday.
  • Add a second criteria of type Time of day and add a range of 0000 to 1200
  • Save and publish
  • Now go to Settings and find the document type for a piece of content you want to personalise.  For example with the Fanoe Starter Kit you could select the Blog Post document type
  • Add a new field of type Personsalisation group picker with an alias of personalisationGroups
    If you don't like this alias you can use a different one, but you will also need to add the following appSetting key to your config file: <add key="personalisationGroups.groupPickerAlias" value="myCustomAlias"/> 
  • Back to Content again, find or create a page of this document type and pick the "Weekday morning visitors" personalisation group
  • Finally you need to amend your template to make use of the personalisation group via new extension method that will be available on instances of IPublishedContent, named ShowToVisitor(), as described below.

Templating

Personalising repeated content

A typical example would be to personalise a list of repeated content to only show items that are appropriate for the current site visitor.  Here's how you might do that:

  @foreach (var post in Model.Content.Children.Where(x => x.ShowToVisitor()))
{
   <h2>@post.Name</h2>
        }

With a little more work you can also personalise an individual page.  One way to do this would be to create sub-nodes of a page of a new type called e.g. Page Variation.  This document type should contain all the fields common to the parent page that you might want to personalise - e.g. title, body text, image - and an instance of the Personalisation group picker.

You could then implement some logic on the parent page template to pull back the first of the sub-nodes that match the current site visitor.  If one is found, you can display the content from that sub-node rather than what's defined for the page.  And if not, display the default content for the page.  Something like:

@{
var personalisedContent = Model.Content.Children.Where(x => x.ShowToVisitor()).FirstOrDefault();
string title, bodyText;
if (personalisedContent != null) 
{
title = personalisedContent.Name;
bodyText = personalisedContent.GetPropertyValue<string>("bodyText");
}
else 
{
title = Model.Content.Name;
bodyText = Model.Content.GetPropertyValue<string>("bodyText");
}
}

<h1>@title</h1>
<p>@bodyText</p>

Notes on particular criteria

Country

The country criteria uses the free GeoLite2 IP to country database which you can download from: http://dev.maxmind.com/geoip/geoip2/geolite2/ and made available by Maxmind.com.  It'll look for it in /App_Data/GeoLite2-Country.mmdb or at the path specified in the following appSetting:

    <add key="personalisationGroups.geoLocationCountryDatabasePath" value="/my/custom/relative/path"/>

Extending the package

Personalisation groups comes with a number of built-in criteria but may not have everything you want to use.  However it can be extended relatively easily.

One way to do this would be to use one of the "low-level" built-in criteria, such as the ones that look for a cookie or session value.  If your application code can set a given cookie or session key value when a particular action occurs you want to personalise on, you can just do that and use them.

Or you can create your own criteria.  This involves writing some server-side code that implements a given interface as well as some custom angular views and controllers.  There's more detail on this here: https://github.com/AndyButland/UmbracoPersonalisationGroups#how-to-extend-it

And several examples in the source code you can use for reference: https://github.com/AndyButland/UmbracoPersonalisationGroups/tree/master/Zone.UmbracoPersonalisationGroups/Criteria

 

]]>
Andy Butland Sat, 02 May 2015 22:18:08 +00:00
Think of the children! https://our.umbraco.org/projects/backoffice-extensions/think-of-the-children/ https://our.umbraco.org/projects/backoffice-extensions/think-of-the-children/ Think of the children! adds a context menu option to toggle the display of unpublished content nodes.

There's not really a whole lot to describe, it just does what it says on the box.

Package includes a class inheriting from ApplicationEventHandler which hooks into the TreeControllerBase.MenuRendering event to smush a new menu item into the context menu.

That new menu item has a Javascript action, which does the magic - toggles a class to show/hide unpublished nodes.

The current state is pumped into localstorage to maintain the selection when the backoffice reloads.

Version 1.1.0

Corrects a bug to ensure listening for the menuState.changed event only when the content section tree is active

 

]]>
Nathan Woulfe Thu, 30 Apr 2015 03:03:03 +00:00
LePainter https://our.umbraco.org/projects/backoffice-extensions/lepainter/ https://our.umbraco.org/projects/backoffice-extensions/lepainter/ LePainter allows us to see a graphical preview of the Umbraco Grid’s settings/styling configuration within the backend itself.

For instance, the end user sets a background image for the row and has a live preview of it within the backend Grid itself:

1.PNG

This way, we have direct information on the setting/styling configurations without opening the settings/stylings panel or checking the front end.

LePainter works the same way as the setting/styling configurations in the front end:

  • Setting configurations add attribute values within the current row/cell tags.

  • Styling configurations add style attributes within the current row/cell tags.

How to install

LePainter is a property editor, so you just need to create a new DataType of type LePainter and add it to the Document Types which use the Grid.

This property doesn’t store any data and doesn’t interact with the editor, you can just add it within the generic property tab to avoid confusion.

LePainter has only one prevalue Stylesheet Path that allows injecting a new CSS file into Umbraco which can be used for backend Grid styling.

nuget: http://www.nuget.org/packages/Lecoati.LePainter/

Important: LePainter interact directly on the native backend grid markup, so be specially careful on not breaking the initial html structure.

]]>
Antoine Wed, 29 Apr 2015 15:45:01 +00:00
Robotnik https://our.umbraco.org/projects/developer-tools/robotnik/ https://our.umbraco.org/projects/developer-tools/robotnik/ Overview

Robotnik allows you to serve up a different robots.txt file for each domain. That's useful if you don't want search engines crawling some of your sites (e.g., your staging site), or if you want to point to different sitemaps from within your robots.txt.

Installation

Simply download the ZIP file and install it using "Install local package" under the "Packages" node in the "Developer" section of your Umbraco installation.

Configuration

You just need to add some app settings to let Robotnik know which files to serve up for which domains. Refer to the repository for more details: https://github.com/rhythmagency/robotnik

]]>
Nicholas Westby Wed, 29 Apr 2015 05:18:53 +00:00
Diplo Link Checker https://our.umbraco.org/projects/backoffice-extensions/diplo-link-checker/ https://our.umbraco.org/projects/backoffice-extensions/diplo-link-checker/ Diplo Link Checker is a dashboard add-on for Umbraco 7 that allows an editor to easily check their site for broken or problematic links.

Features

  • Able to check an entire site, or just a section or even a single page
  • Completely asychnronous so can check multiple links simultaneously and provide real-time feedback
  • Caches link status so only checks each unique link once (within a short period)
  • Works for all types of links - external, internal, HTML, files, images and even CSS and JavaScript files
  • Provides feedback on errors with help dialogue
  • Quick edit facilty allows you to easily edit the page that contains the broken link directly within Umbraco
  • Advanced options allow you to set the timeout period, toggle between viewing all checked links and only links that have problems
Note: This is only for Umbraco 7.1 and above. This is an initial release and so please provide feedback to help improve it. For large sites it is recommended you only check a section at a time to avoid long-running threads.

]]>
Dan Diplo Tue, 28 Apr 2015 23:28:41 +00:00