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.
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
V1.0.1 Update Release