10 votes

Positional Content

Positional content is a property editor that stores the positional relationships between image and content. We have created a high-fidelity content authoring tool for previewing and creating content positionally.

v1.x.x.x for Umbraco 7.53 upwards
v2.x.x.x for Umbraco 8.1.0 upwards

Plugin functionality includes


-         Size, crop and position image crops from a master image

-         Preview image crops

-         Fine tune controls of the crop by percentage, positionally and dimensionally

-         Define image content as document types using nested content

-         Define image settings as document types using nested content


-         Define breakpoint boundaries and crop sizes per instance

-         Choose different image crops per breakpoint

-         Override master image at each breakpoint


-         Define content items as document types using nested content

-         Define setting for this content as document types using nested content

-         Add, position and size these content fragments visually over the master image with full visual parity


-         Fine tune control of each content item by percentage, positionally and dimensionally and per breakpoint

-         Override each content item by breakpoint

-         Control the direction of responsive change per item and breakpoint

-         Choose between responsive or absolute content item behaviour

-         Hide items per breakpoint   

Go to http://www.positionalcontent.com/ to see all these features in action

On the front-end as part of the plugin install we add a couple of extra files

-         An HTML partial file (positionalcontent.cshtml) – accepts the positional content model from the content node and renders out all the html required to render a positional content element

-         A dynamic CSS partial file (positionalcontentcss.cshtml) – creates all the breakpoint specific media queries so the content adapts to the breakpoints that have been setup.

During the install we also add an extra directory to Partials. This works in the same way as Umbraco grid. It contains all the partials to render out the positional items and uses the document type alias for each partial name (the front-end positional content partial above uses the same markup so there’s no waste).

When setting up your Nested Content document types that are used as content items in the editor, it’s important to create files in the Partials/Positional Content directory, as these will used to render the preview.

To help developers get used to Positional Content we have created a Starter Kit that will creates the document types, nested content data types and positional content data types necessary to get a simple one breakpoint and responsive instances working. The starter kit doesn’t create any content, that’s up to you and as it creates a home node it might be best to use this on a fresh instance of Umbraco.

Further information about this plugin, how it works and how it was developed can be found at https://medium.com/hifi-agency/introducing-positional-content-2df27f310bdd

Release Notes

v1.0.1 Update Release

  • Fixed a locale based bug in the positional item css style generator
  • Positional Item partial change, when used as a preview for the back office is now passed two new properties. IsPreview and BreakpointName. Using this you can change the preview for each breakpoint, e.g changing font sizes for different devices. Download the latest starter pack to see an example.

v1.0.8 Update Release

  • Re-fixed a locale based bug in the positional item css style generator
  • CSS fix to stop click actions whilst editing positional elements
  • CSS fix for umbraco v7.12 where the tools icons are too big

v1.0.9 Update Release

  • Fixed issue duplicating content when overriding settings (thanks Nik)
v1.0.10 Update Release
  • Fixed an issue in 7.15 where image selection didn't work
v1.0.11 Update Release
v2.0.0 v8 beta release
  • Updated to v8
  • Released as open source




Source code

 Download package
version 2.0.0

NuGet install instructions for Umbraco 7.5.0-8.18.14

Install-Package HiFi.PositionalContent

Package owner

Phil Whittaker

Phil Whittaker

Phil has 267 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions:

Package Information

  • Package owner: Phil Whittaker
  • Contributors: Nik
  • Created: 05/09/2018
  • Current version 2.0.0
  • .NET version 4.5.1,4.5.2,4.7.2
  • License MIT
  • Downloads on Our: 1.7K
  • Downloads on NuGet: 22.7K
  • Total downloads : 24.4K