Docs

Last updated 21st August 2015

These docs relate to the current version of the Dlayer app, they aren't complete, Dlayer is very much an alpha project and so are its docs.

Overview

Dlayer is a web development tool aimed primarily at users that don't have any web design or web development experience.

Dlayer has two core goals, the first is to simplify web development and web design and the second is to provide the user will full control over every element and attribute that can be used to create a web page and web site, these are two goals that initially appear to be very much at odds with each other.

  • Simplify web development; A user should be able to build a web page and web site without writing a single line of HTML, CSS, JavaScript or code.
  • Provide full control; A user will have full control over every element and attribute that can be used to create a web page or web site without necessarily knowing what the attributes are.

The designers

Dlayer is split up into a number of modules, from this point on they will be referred to as designers.

There are currently eight designers in Dlayer, each one has been tailored to handle one aspect of the web development process in the best possible way. It would be relatively simple to develop a single designer that handled multiple aspects of the web development process but early on I decided that I wanted the user to able to concentrate on just one task with as few distractions as possible.

The designers all have a very similar layout, this is to try and ensure that the app feels familiar whichever designer the user is in, it will also hopefully reduce the learning curve.

The tools and tool side bar sit to the right of the design area, tools and their options will only displayed when they are relevant to the current context, it will be very rare to see buttons for tools that the user can't use. Tools will have a minimum of two option panels, a help tab explaining the tool and at least one option set.

With the exception of the Website manager and Data manager the design area will show as close to possible a visually accurate representation of the user's design as possible.

Template designer

A template defines the basic structure of a content page, all content pages are built upon a template.

Templates are typically simply although there is nothing limiting the creation of complex templates, think of them as a way of blocking out content areas, the obvious examples being where the header, footer and main content areas are on a content page.

When a new web site is created the Template designer will be stocked with a number of default templates which the user is free to modify in any way they want, copy or even delete, they are just there to help the user get started.

Widgets and forms can be added directly to templates, they don't necessarily need to be added to content pages, although a user can add widgets and forms they can't edit them within the Template designer, that needs to be done within the relevant designer, at any point the user will be able to jump to the relevant designer, make a change and then jump back, the state of the designer will remain intact.

There are no artificial limits to the number of templates you can design for a web site, the number of content pages based upon a single template or how many items can be added to them. Forms and widgets can be added to templates but typically most of the content and flourish that makes up a content page will be added in the Content manager.

Content manager

Websites are essentially a collection of content pages consisting of content items. Content is a very generic term, a content item in Dlayer could be a single image, a text block, form, poll or a widget in the form of an image gallery, blog or even a simple twitter feed.

Content pages

A content page is simply that, a page which contains some content.

In Dlayer there is a simple hierarchy to a content page, at first it may appear complicated but essentially there are only three levels that a user will interact with directly, content areas, content rows and content items.

A content page is created from a template, a template in its simplest form blocks out the different areas of a page, typical examples being an area for the site header, another for the footer and a main area where the main page content goes. Please refer to the Template designer documentation for full details on templates.

There are no artificial limits to the number or content pages a user can create or the number of content items that can be assigned to either a page or content row, a user has full control over everything.

Note: The tools in the Content manger are not at per my final design, they are a currently just a stepping stone. As it stands today when adding or editing content all data is managed in the side panel, as development continues the tools will be updated to allow more data to be managed directly within the design view.

Content areas

A content area is an invisible container, content areas are the sections marked out on your template in the Template designer, you can't alter them in the Content manager, only change their display.

A content area should be used to separate areas of your content pages, for example, you might have a content area for the header and navigation items, one for the footer items and one for the main content that makes up your content page.

Content rows

A content row is an invisible container that spans the entire width of a content area, it is used primarily to control the layout and size of the content items it contains.

Dlayer uses a HTML, CSS, and JS framework called Bootstrap, content rows in Dlayer are called rows in Bootstrap. Bootstrap is a very clever system that splits each row into a number of columns, these can then be used for sizing and positioning, Dlayer builds upon this.

There are twelve columns to a content row, when a content item is created a sensible size is initially set by Dlayer, Dlayer looks at the type of item being created and how many other items there are in the row, refer to the documentation for each tool to see how this is calculated.

Although content rows are invisible to the public that does not have to be the case, please refer to the content row tool documentation for more information.

Content items

Content items are the fragments that make up a content page, there are two base types of content items within Dlayer, simple and dynamic.

All content items, regardless of their type, are attached by reference so there is never any duplication of content within the app.

Simple

Simple content items are the content items that can be created using the tools within the Content manager, there are many types, some examples being a heading, image, carousel, or text block.

The ability to customise simple content items varies greatly depending on the content item, for a full overview of each of the content item types please refer to the documentation for the relevant content tool.

Dynamic

A dynamic content item is an object created in one of the content designers in Dlayer, the Form builder, Widget designer or Question manager.

Tools

This following sections contains an overview for each of the tools in the Content manager and documentation on moving around and using the tools in the Content manager.

There are three types of tools, structure tools, creation tools and import tools.

In addition to containing all the tools that help with the structure of a content page the structure section also contains tools to help a user navigate around the designer.

The vast majority of data used to build content items is attached by reference, this allows the same piece of data to be shared between multiple content items without any duplication. In addition this also allows a user to update multiple content items in a single action, refer to documentation for each tool for additional details.

Live previews

Live previews of changes show in the design view for most of the tools in the Content manager when they are in edit mode.

If the tool supports live previews the design view will be updated as changes are made to the tool forms, in addition, a message will appear at the top of the form to inform the user that there are unsaved changes.

Item selection

To use any of the tools in the Content manager a user needs to select an item to work with, this could be a content area, content row or content item.

Content area

A content area can be selected when no tools or other selections are active, to select a content area the user simple hovers their mouse over an area, it will highlight indicating that it can be selected. Once a content area is selected access to content rows is granted.

Content row

To select a content row the user first needs to select the content area that the content row belongs to. Once the content area has been selected the content rows will highlight when the user moves the mouse over them. To select a content row the user simply needs to click the mouse. Once a content row is selected access to content items is granted.

When a content row is selected the designer will allow the user to select any other sibling content row, a sibling content row is a row within the same content area.

Content item

To select a content item the user first needs to select the content row that the content item belongs to. Once the content row has been selected the content items will highlight when the user moves the mouse over them. To select a content item the user simply needs to click the mouse.

When a content item is selected the designer will allow the user to select any other sibling content item, a sibling content item is an item within the same content row.

Moving and ordering

Content rows and content items can both be moved to a new parent which effectively moves them on the content page or have their ordering altered in relation to their siblings.

Content rows

To move a content row between content areas a user needs to use the move row tool, when a content row is selected the move tool will be available for selection.

To change the ordering of a content row within a content area a user can use the visual controls. When a content row is selectable and a user hovers over it they will depending on context see a display later and display sooner button. To alter the ordering of the content row in relation to its siblings the user simply needs to click the relevant button.

Content items

To move a content item between content rows a user needs to use the move item tool, when a content item is selected the move tool will be available for selection.

To change the ordering of a content item within a content row a user can use the visual controls. When a content item is selectable and a user hovers over it they will depending on context see a display later and display sooner button. To alter the ordering of the content item in relation to its siblings the user simply needs to click the relevant button.

Structure tools

The structure tools control the structure of a content page and also allow content rows and content items to be moved around the content page.

Add content row

The add content row tool allows a user to add a new content row to the selected content area. To add a content row the user simply needs to click the add row button.

The new content row will be added after the other content rows in the area and will immediately be selected by Dlayer, the user can then add content items or manage the content row itself.

Content row

The content row tool is automated selected by Dlayer when a user selects a content row.

The content row tool only exists to allow access to the content row sub tools.

Move row

The move row tool allows a user to move a content row from one content area to another, the tool is only visible when a content row has been selected.

The tool has a select menu containing the names of the content areas that make up the page, as the user selects an option from the list the relevant content area will highlight, to move the row the user simply needs to click the move button.

The content row will be moved to the new content area and positioned after any other content rows.

Move item

The move item tool allows a user to move a content item from one content row to another, the tool is only visible when a content item has been selected.

The tool has a select menu containing the names of all the content rows that make up the page, as the user selects an option from the list the relevant content row will highlight, to move the item the user simply needs to click the move button.

The content item will be moved to the new content row and positioned after any other content rows.

Select parent

The select parent tool allows a user to move up the hierarchy when they have a content item selected.

The tool has three options, the user can select the content row the item belongs to, the content area or return to the edit mode for the selected content item.

Create tools

The create tools are used to create content items, there is a tool for each of the simple content types supported by Dlayer.

Heading

The heading tool allows a user to add a new heading content item to the selected content row. To add a heading item the user needs to define the heading, an optional sub heading, select the heading type and also define a name by which they can identify the text later.

The text which a user assigns when creating a heading item gets stored independently to the data which defines the position, styling and layout of the heading item, the text content is never duplicated in the app. When the text is stored in the database it is saved against the name that was assigned when the heading item was created.

A heading item will automatically be sized to span the entire width of the content row it has been assigned to.

At any point after insertion the user will be able to alter the size and position of the heading item to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the heading item. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

In edit mode the form will include an instances field if the text content assigned to the heading item is being used in more than one active heading item. The instances field controls whether or not any text changes affect all the linked heading items or just the current heading item. If the user chooses no when updating a heading item Dlayer will automatically store the new text in the database and increment the name.

The styling options for the six heading types are defined in the Content manager settings. Although a user will be able to override the styling options on a case by case basis it makes sense for the user to make their changes in the headings section to maintain consistency in the typography across their web site.

Sub tools

The heading tool has two sub tools, the size and position tool and the styling tool.

The size and position tool allows a user to define both the width of the content item and its offset. The width and offset values need to be a value between one and 12 and the sum of the two values cannot be larger the twelve, refer to the content row section to read up on why widths needs to be expressed in twelfths.

The styling tool allows a user to define the background colour for the heading item and the heading item container. The user can select colours by clicking the colour fields, this will activate the colour picker allowing them to select a colour from any of the site's colour palettes, by choosing a colour from a list of the last 5 used across the site or by manually entering a hex value, an assigned value can be cleared using the clear button.

Text

The text tool allows a user to add a new text content item to the selected content row. To add a text item the user needs to define the text and also define a name by which they can identify the text later.

The text which a user assigns when creating a text item gets stored independently to the data which defines the position, styling and layout of the text item, the text content is never duplicated in the app. When the text is stored in the database it is saved against the name that was assigned when the text item was created.

The initial size of a newly inserted text item depends upon whether or not the user has added any other content items to the selected content row. The sizing logic in Dlayer will attempt to calculate a sensible size for the text item based on the size of all the content items which currently appear before it in the content row. The goal of the sizing logic is to set a size for the text item so that it fills any remaining space in the content row. Behind the scenes there is a minimum and suggested maximum size, for a text item the values are three and 12. If the sizing logic calculates a size below the minimum it will set the size to the suggested maximum and drop the new text item down below its siblings. If the text item is the only item in the content row the suggested maximum width is automatically applied.

At any point after insertion the user will be able to alter the size and position of the text item to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the text item. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

In edit mode the form will include an instances field if the text content assigned to the text item is being used in more than one active text item. The instances field controls whether or not any text changes affect all the linked text items or just the current text item. If the user chooses no when updating a text item Dlayer will automatically store the new text in the database and increment the name.

Sub tools

The text tool has two sub tools, the size and position tool and the styling tool.

The size and position tool allows a user to define both the width of the content item and its offset. The width and offset values need to be a value between one and 12 and the sum of the two values cannot be larger than 12, please refer to the content row section to read up on why widths needs to be expressed in twelfths.

The styling tool allows a user to define the background colour for the text item and the text item container. The user can select colours by clicking the colour fields, this will activate the colour picker allowing them to select a colour from any of the site's colour palettes, by choosing a colour from a list of the last 5 used across the site or by manually entering a hex value, an assigned value can be cleared using the clear button.

Form

The form tool allows a user to add a form to the selected content row. To add a form the user simply needs to select the form that they would like to insert from all the forms defined in the Form builder.

The initial size of a newly inserted form depends upon whether or not the user has added any other content items to the selected content row. The sizing logic in Dlayer will attempt to calculate a sensible size for the form based on the size of all the content items which currently appear before it in the content row. The goal of the sizing logic is to set a size for the form so that it fills any remaining space in the content row. Behind the scenes there is a minimum and suggested maximum size, for a form the values are three and 12. If the sizing logic calculates a size below the minimum it will set the size to the suggested maximum and drop the form down below its siblings. If the form is the only item in the content row the suggested maximum width is automatically applied.

At any point after insertion the user will be able to alter the size and position of the form to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the form. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

In edit mode an edit sub tool appears, this allows the user to edit the form by jumping to the Form builder. The user will be taken directly to the Form builder with the form selected, at any point they can return to the Content manager to see their changes, the state of the Content manager is maintained throughout.

Sub tools

The form tool has three sub tools, the edit tool, the size and position tool and the styling tool.

Forms need to be edited in the Form builder, the edit tool allows a user to jump directly to the Form builder designer view with the form selected. After making their changes in the Form builder the user can click a button to return back to the Content manager, the state of the designer will have been maintained. The form content item will immediately show all the changed that were made in the Form builder.

The size and position tool allows a user to define both the width of the content item and its offset. The width and offset values need to be a value between one and 12 and the sum of the two values cannot be larger than 12, please refer to the content row section to read up on why widths needs to be expressed in twelfths.

The styling tool allows a user to define the background colour for the text item and the text item container. The user can select colours by clicking the colour fields, this will activate the colour picker allowing them to select a colour from any of the sites colour palettes, by choosing a colour from a list of the last 5 used across the site or by manually entering a hex value, an assigned value can be cleared using the clear button.

Jumbotron

The jumbotron tool allows a user to add a new jumbotron content item to the selected content row. A jumbotron is ideal for either acting as the main heading for a page or to highlight important piece of content. To add a jumbotron item the user needs to define the title, the sub title text, the label for an optional button and also define a name by which they can identify the text later.

The text which a user assigns when creating a jumbotron item gets stored independently to the data which defines the position, styling and layout of the jumbotron item, the text content is never duplicated in the app. When the text is stored in the database it is saved against the name that was assigned when the jumbotron item was created.

A jumbotron item will automatically be sized to span the entire width of the content row it has been assigned to.

At any point after insertion the user will be able to alter the size and position of the jumbotron item to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the jumbotron item. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

In edit mode the form will include an instances field if the text content assigned to the jumbotron item is being used in more than one active jumbotron item. The instances field controls whether or not any text changes affect all the linked jumbotron items or just the current jumbotron item. If the user chooses no when updating a jumbotron item Dlayer will automatically store the new text in the database and increment the name.

Sub tools

The jumbotron tool has two sub tools, the size and position tool and the styling tool.

The size and position tool allows a user to define both the width of the content item and its offset. The width and offset values need to be a value between one and 12 and the sum of the two values cannot be larger than 12, please refer to the content row section to read up on why widths needs to be expressed in twelfths.

The styling tool allows a user to define the background colour for the jumbotron item. The user can select a colour by clicking the colour field, this will activate the colour picker allowing them to select a colour from any of the site’s colour palettes, by choosing a colour from a list of the last 5 used across the site or by manually entering a hex value, an assigned value can be cleared using the clear button.

Image

The image tool allows a user to add an image to the selected content row. To add an image a user needs to select the image that they would like to add, set the expand setting and optionally define a caption which appears below the image. To select an image the user invokes the image picker, the image picker helps the user filter down the images in their Image library by category and sub category. Once filtered the user is asked to select an image and finally if applicable a version of that image.

The initial size of a newly inserted image depends upon whether or not the user has added any other content items to the selected content row. The sizing logic in Dlayer will attempt to calculate a sensible size for the image based on the size of all the content items which currently appear before it in the content row. The goal of the sizing logic is to set a size for the image so that it fills any remaining space in the content row. Behind the scenes there is a minimum and suggested maximum size, for an image the values are one and six. If the sizing logic calculates a size below the minimum it will set the size to the suggested maximum and drop the form down below its siblings. If the form is the only item in the content row the suggested maximum width is automatically applied.

At any point after insertion the user will be able to alter the size and position of the image to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the image. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

A user can only test the expand setting when they view a preview of their content page, the expand controls cannot be added in the design window because they interfere with the Dlayer selection controls.

Sub tools

The image tool has two sub tools, the size and position tool and the styling tool.

The size and position tool allows a user to define both the width of the content item and its offset. The width and offset values need to be a value between one and 12 and the sum of the two values cannot be larger than 12, please refer to the content row section to read up on why widths needs to be expressed in twelfths.

The styling tool allows a user to define the background colour for the image content container. The user can select a colour by clicking the colour field, this will activate the colour picker allowing them to select a colour from any of the site’s colour palettes, by choosing a colour from a list of the last 5 used across the site or by manually entering a hex value, an assigned value can be cleared using the clear button.

Import tools

The import tools allow a user to create content items using data that already exists within Dlayer. They are only used to add content items, once a content item has been created using the import tools it will from that point on act as a standard content item.

Text

The import text tool allows a user to add a new text content item using text content from a previously created text item, both current and deleted. When a user selects the text content to use from the select menu the text field will be populated with the saved data.

The user is free to modify the imported text, if changed, upon insertion Dlayer will save the new text content to the database and increment the name used to identify the text.

The initial size of a newly inserted text item depends upon whether or not the user has added any other content items to the selected content row. The sizing logic in Dlayer will attempt to calculate a sensible size for the text item based on the size of all the content items which currently appear before it in the content row. The goal of the sizing logic is to set a size for the text item so that it fills any remaining space in the content row. Behind the scenes there is a minimum and suggested maximum size, for a text item the values are three and 12. If the sizing logic calculates a size below the minimum it will set the size to the suggested maximum and drop the new text item down below its siblings. If the text item is the only item in the content row the suggested maximum width is automatically applied.

At any point after insertion the user will be able to alter the size and position of the text item to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the text item. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

Once created the content item will behave as a standard text content item.

Heading

The import heading tool allows a user to add a new heading content item using text content from a previously created heading item, both current and deleted. When a user selects the text content to use from the select menu the heading and sub heading fields will be populated with the saved data.

The user is free to modify the imported text, if changed, upon insertion Dlayer will save the new text content to the database and increment the name used to identify the text.

A heading item will automatically be sized to span the entire width of the content row it has been assigned to.

At any point after insertion the user will be able to alter the size and position of the heading item to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the heading item. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

Once created the content item will behave as a standard heading content item.

Jumbotron

The import jumbotron tool allows a user to add a new jumbotron content item using text content from a previously created jumbotron item, both current and deleted. When a user selects the text content to use from the select menu the title and sub title fields will be populated with the saved data.

The user is free to modify the imported text, if changed, upon insertion Dlayer will save the new text content to the database and increment the name used to identify the text.

A jumbotron item will automatically be sized to span the entire width of the content row it has been assigned to.

At any point after insertion the user will be able to alter the size and position of the jumbotron item to any value between one and 12, they will also be able to set the offsetting value. The offsetting value is the amount of free space that appears to the left of the jumbotron item. The sum of the size and offsetting must be a value between one and 12, if the size is set to six the offsetting value will be limited to values between zero and six. The size and position sub tool is available in edit mode along with all the other sub tools.

Once created the content item will behave as a standard jumbotron content item.

Form builder

A form allows a user to capture information from their web site users, when used within a widget it can also be used to control flow.

Forms can be added to templates, widgets and directly to content pages as content items, forms consist of any number of fields.

The status of a form can be switched between hidden and live, if a form is marked as hidden it will not appear as a selectable item in any of the form pickers. If a previously live and linked form is switched to hidden previous assignments will remain live, the hidden status will only apply to the latest version of the form not a version which may have been linked to a content page, widget or template earlier. These previous assignments will be easily visible within the Form builder and manageable on an individual basis.

Regardless of how the structure of a form is modified over its life all submitted data is maintained in the original format, no data is ever lost because of a structure change.

There are no artificial limits on the number of forms that can be created for a website, the number of fields on a form or the number of times an individual forms can be linked to a content page, widget or template.

Widget designer

Widgets are reusable content items or collections of reusable content items, some examples of widgets could be the header and menu for a web site, a twitter feed widget, an image gallery, a small call to action or even an entire blog system.

Within Dlayer I consider anything that either can’t be created by a single tool in the Content manager or anything that is going to appear in more than one place to be a widget.

The Widget designer is easily the most complicated designer within Dlayer, it is in effect the Template designer, Content manager and Form builder all rolled into one designer.

A widget can be very complicated or as simple a simple heading which the user intends to appear in multiple places. The Widget designer includes nearly all the tools defined in the Content manager and Template designer along with some that are custom to just the Widget designer.

A widget can be assigned to a template, content page, form or even another widget, there are no limits to the number of times a widget can be assigned to an item, be it a content page or a widget.

There are two sections to the Widget designer, the designer and the library, the designer allows the user to create or modify a widget, the library allows the user to manage their entire library of widgets, the user can organise their widgets, categorise them, copy them to create brand new widgets or delete them.

Whenever a user needs to select a widget they will be presented with the widget picker.

The widget picker works by first asking the user to filter down their select by category and sub category if defined. Once filtered to this level the user will be presented with a list of their widgets in either text or image form, the list format depends on whether or not a preview image has been created for the defined widgets.

Dlayer will include a number of predefined widgets which the user is free to modify in any way they would like, copy or delete.

Web site manager

The Web site manager is where the user defines the relationships between all the content pages that make up their site, they are essentially creating the structure of their web site.

When a new content page is created, either via the Web site manager or Content manager it will initially be placed into an unassigned pages bucket, from there there user will need to assign its parent and also its relationship with its siblings.

There are no real restrictions with regards to how a user creates the structure of their website, the only real rule being that there must be one content page that acts as the home page.

Changes to content pages will need to be made within the Content manager, the only changes that can be made within the Web site manager are changes to the base details for the page and its position within the site structure. To change a content page the user can simply jump to the Content manager, make their changes and then return to the Web site manager, the state will be maintained.

Data manager

Content coming soon!

Question manager

Content coming soon!

Image/Media library

The Image library is where all media management will be done, the Image library is a site wide feature which is exposed to the rest of the app via the image picker.

Image assets can be categorised using any number of custom categories and sub categories, the only enforced rule is that by default an Uncategorised category exists and each newly created category will automatically have a ‘misc’ sub category.

The Image library will include all the standard adjustment and manipulation tools, for example cropping, resizing and basic filters.

Image picker

Whenever a user needs to select an image they will be presented with the image picker.

The image picker works by first asking the user to filter down their selection by category and then sub category. At the sub category level the user is presented with a thumbnail list which shows the most recent version for each image along with the name, size and version number. After an image has been selected the user will be asked to select the specific version that they would like to use.

The thumbnail lists will default to sorting in name ascending order but can be easily switched to sort via name, size or uploaded date in ascending or descending order.

Library

The Image library can be configured to display either 24 small thumbnails per page or 12 larger thumbnails per page, fours rows of either size or three. The display size can be configured within the Image library directly or within the main settings section.

The library can be filtered by any combination of the user’s categories and sub categories, an all sub category is automatically added to each category to allow the user to see all the images within a base category. In addition to filtering the user will also be able to sort their library by name, size and uploaded date in either ascending or descending order. Image library filtering and ordering settings can be saved as user defined views to assist with image management, for example a user could create a view to quickly show the recently uploaded images in their backgrounds category and landscapes sub category.

When an image is selected within the Image library the designer will switch to the full detail view. The detail view shows a fuller size version of the most recent version of the selected image, all the base details, the full version history and the usage details for the currently selected image version.

In the full detail view the side bar will be updated to show all the tools that the user can use to manipulate the selected image.

The version history panel shows all the versions for the selected image, both past and present, it also shows the tool that was used to create the currently selected version, the size details and the date it was created. Other versions can be selected simply by clicking on the version the user wants to view.

The usage panel shows all the places the selected image has and is currently being used, where relevant it will include a link to allow the user to jump directly to the item that uses the image, this could be a content item within the Content manager, a template in the Template designer or a panel in the Widget designer.

Versioning

A new version of an image is created each time an image is either modified or referenced, a new version is never created when only the base details are being modified, the base details are the name, description, category and sub category, they exist across image versions.

Not all image versions are created equal, modifications via tools nearly always create a new hard version, when an image is only referenced the designer will create a shallow version, shallow versions are not selectable directly by the user within the Image library or image picker, shallow versions are simply a version of the image that the app can link to, when necessary a shallow version will be converted into a hard version, this will be done behind the scenes.

A shallow version retains a link to the original image and version that the user selected when it was created, this is how the Image library is able to show the usage details for a specific image, these links can also be used to add intelligence to the app, for example to ask the user when they modify an image if they would like to propagate the changes across all the current assignments.