diff --git a/13/umbraco-cms/extending/backoffice-tours.md b/13/umbraco-cms/extending/backoffice-tours.md index 3fb034ed68d..af46993c942 100644 --- a/13/umbraco-cms/extending/backoffice-tours.md +++ b/13/umbraco-cms/extending/backoffice-tours.md @@ -62,7 +62,7 @@ Below is an explanation of each of the properties on the tour configuration obje This is the name that is displayed in the help drawer for the tour. - ![Tour name highlighted](../../../10/umbraco-cms/extending/images/tourname-v8.png) + ![Tour name highlighted](images/tourname-v8.png) * **alias** The unique alias of your tour. This is used to track the progress a user has made while taking a tour. The progress information is stored in the `TourData` column of the `UmbracoUsers` table in the database. @@ -70,7 +70,7 @@ Below is an explanation of each of the properties on the tour configuration obje The group property is used to group related tours in the help drawer under a common subject (for example Getting started). - ![Tour group highlighted](../../../10/umbraco-cms/extending/images/tourgroup-v8.png) + ![Tour group highlighted](images/tourgroup-v8.png) * **groupOrder** This is used to control the order of the groups in the help drawer. This must be an integer value. @@ -78,7 +78,7 @@ Below is an explanation of each of the properties on the tour configuration obje A boolean value that indicates if the "Don't show this tour again" should be shown on the tour steps. If the user clicks this link the tour will no longer be shown in the help drawer. - ![Tour allow disable link highlighted](../../../10/umbraco-cms/extending/images/tourallowdisable-v8.png) + ![Tour allow disable link highlighted](images/tourallowdisable-v8.png) * **culture** You have the option to set a culture, such as nl-NL. This tour will exclusively be displayed to users who have set this culture in their profile. @@ -88,7 +88,7 @@ Below is an explanation of each of the properties on the tour configuration obje The `contentType` property can also be used to limit the tours to content types that are using a specific composition. This will show the tour on all nodes that are using a specific composition. - ![Content Type specific tours](<../../../10/umbraco-cms/extending/images/contentTypespecific (1) (1) (1) (1) (1).png>) + ![Content Type specific tours](images/contentTypespecific.png) In the image above, two tours are available on the _Welcome_ node: @@ -133,12 +133,12 @@ Below is an explanation of each of the properties on the tour step object. This the title shown on the tour step. - ![Tour step highlighted](../../../10/umbraco-cms/extending/images/steptitle-v8.png) + ![Tour step highlighted](images/steptitle-v8.png) * **content** This text will be shown on the tour step, it can contain HTML markup. - ![Tour content highlighted](../../../10/umbraco-cms/extending/images/stepcontent-v8.png) + ![Tour content highlighted](images/stepcontent-v8.png) * **type** The type of step. Currently, only one type is supported : "intro". This will center the step and show a "Start tour" button. @@ -156,7 +156,7 @@ Below is an explanation of each of the properties on the tour step object. Use the developer tools from your browser to find the id, class and data-attribute. {% endhint %} -
+
* **elementPreventClick** @@ -182,7 +182,7 @@ Below is an explanation of each of the properties on the tour step object. The image below shows the entire tree highlighted, but requires the user to click on a specific tree element. - ![Step eventElement highlighted](../../../10/umbraco-cms/extending/images/step-event-element-v8.png) + ![Step eventElement highlighted](images/step-event-element-v8.png) * **skipStepIfVisible** A CSS selector for an element that, if it is visible, will skip this tour step. diff --git a/13/umbraco-cms/extending/content-apps.md b/13/umbraco-cms/extending/content-apps.md index fd7d9d46f5f..67d1e6fbefb 100644 --- a/13/umbraco-cms/extending/content-apps.md +++ b/13/umbraco-cms/extending/content-apps.md @@ -10,7 +10,7 @@ Content Apps are **companions** to the editing experience when working with cont With Content Apps, editors can switch from editing 'Content' to accessing contextual information related to the item they are editing. -![Content Apps in backoffice](../../../10/umbraco-cms/extending/images/content-app-1.png) +![Content Apps in backoffice](images/content-app-1.png) ### Default Content Apps @@ -144,7 +144,7 @@ And in the `.html` file: After the above edits are done, restart your application. Go to any content node and you should now see an app called Word Counter. Clicking on the icon should say "Amount of words for each property" and confirm the details of the current item and user. You can now adapt your Content App to retrieve external data using the standard Umbraco and AngularJS approach. -![Content App in action: Word Counter](../../../10/umbraco-cms/extending/images/content-app-2.png) +![Content App in action: Word Counter](images/content-app-2.png) ### Limiting according to type @@ -278,7 +278,7 @@ There are times when you want to draw the attention of editors to your content b When you set a badge, a circle with a chosen background and a number in it will be added to the content app icon. -![Content App badge](../../../10/umbraco-cms/extending/images/content-app-badge.png) +![Content App badge](images/content-app-badge.png) You can enable a badge by using this code in the angular controller of your content app. diff --git a/13/umbraco-cms/extending/database.md b/13/umbraco-cms/extending/database.md index 855415a7aea..108c82a225f 100644 --- a/13/umbraco-cms/extending/database.md +++ b/13/umbraco-cms/extending/database.md @@ -8,7 +8,7 @@ It is possible to add custom database tables to your site to store additional da The end result looks like this: -![Database result of a migration](<../../../10/umbraco-cms/extending/images/db-table (1) (1) (1).png>) +![Database result of a migration](images/db-table.png) ## Using a Composer and Component diff --git a/13/umbraco-cms/extending/macro-parameter-editors.md b/13/umbraco-cms/extending/macro-parameter-editors.md index fec1967d30c..d7396d4a5ba 100644 --- a/13/umbraco-cms/extending/macro-parameter-editors.md +++ b/13/umbraco-cms/extending/macro-parameter-editors.md @@ -133,7 +133,7 @@ angular.module("umbraco").controller("Our.Umbraco.ImagePositionController", func The final custom parameter should look like this: -![Image Position Radio Button Options](../../../10/umbraco-cms/extending/images/image-position-v8.png) +![Image Position Radio Button Options](images/image-position-v8.png) #### Using defaultConfig diff --git a/13/umbraco-cms/extending/package-manifest.md b/13/umbraco-cms/extending/package-manifest.md index 591b048a328..8be8a7b0364 100644 --- a/13/umbraco-cms/extending/package-manifest.md +++ b/13/umbraco-cms/extending/package-manifest.md @@ -322,7 +322,7 @@ To associate the hosted JSON schema file to all package.manifest files you will * File -> Preferences -> Settings. The **Settings** window opens. * In the **User** tab, go to **Extensions** -> **JSON** -> **Schemas**. -
+
* Select **Edit in settings.json** from the **Schemas** section. * Add the following snippet in the `settings.json` file: diff --git a/13/umbraco-cms/extending/packages/creating-a-package.md b/13/umbraco-cms/extending/packages/creating-a-package.md index 403e1f253a5..95863fa3721 100644 --- a/13/umbraco-cms/extending/packages/creating-a-package.md +++ b/13/umbraco-cms/extending/packages/creating-a-package.md @@ -14,7 +14,7 @@ To create a package, you first need to create a package schema through the Umbra 2. Select `Created` in the top-right corner of the screen. 3. Select the `Create package` button. - ![Buttons to select for creating a package schema in the backoffice](../../../../10/umbraco-cms/extending/packages/images/creating-package-menu-v9.png) + ![Buttons to select for creating a package schema in the backoffice](images/creating-package-menu-v9.png) 4. On the `Create package` page, there are fields that you can use to construct the contents of your package that are based on items from the backoffice. 5. Enter the package name at the top - we will call our dashboard the same as in the mentioned [Tutorial](../../tutorials/creating-a-custom-dashboard/): `Custom Welcome Dashboard`. @@ -45,7 +45,7 @@ After filling out all the information, we can select **Create** to create the pa If your package doesn't include backoffice specific items, the result from downloading it will be just a `package.xml` file. Otherwise, if you select media files you will download a ZIP package that looks like this: -![Content of a ZIP package](../../../../10/umbraco-cms/extending/packages/images/zip-package-v9.png) +![Content of a ZIP package](images/zip-package-v9.png) Additionally to the `package.xml`, there is a folder containing the media items for your package. The rest of the information is recorded in the XML schema document. @@ -96,23 +96,23 @@ For a guide on how to install the project templates, follow the 2 steps listed i The outcome is the files generated below: -![Content of an empty package](<../../../../10/umbraco-cms/extending/packages/images/empty-package-from-template (1).png>) +![Content of an empty package](images/empty-package-from-template.png) -Apart from the project file, you can find an empty `package.manifest` inside the **App\_Plugins** folder, which we will replace with the one created from the [Creating a Custom Dashboard Tutorial](../../tutorials/creating-a-custom-dashboard/). But more importantly, it also contains a `build/CustomWelcomeDashboard.targets` file. +Apart from the project file, the **App_Plugins** folder includes an empty `package.manifest`, which is replaced with the one created in the [Creating a Custom Dashboard Tutorial](../../tutorials/creating-a-custom-dashboard/). More importantly, it also contains a `build/CustomWelcomeDashboard.targets` file. This file contains an `msbuild` target that is executed when a project has a dependency on this package. It copies the `App_Plugins` folder into the project on build. This is required for having Umbraco packages in a NuGet package format. {% hint style="info" %} -If you are planning to overwrite the contents of the **App\_Plugins** folder, make sure that the subfolder containing your package contents has the same name as the one you specified after the `--name` flag and that the `package.manifest` has the correct path references to your files. +If you are planning to overwrite the contents of the **App_Plugins** folder, make sure that the subfolder containing your package contents has the same name as the one you specified after the `--name` flag and that the `package.manifest` has the correct path references to your files. {% endhint %} You can also add your custom C# files in the root of the package folder which will be part of the DLL of the package, but for our example, this won't be necessary. ### Transfer files -As mentioned previously, let's navigate to the **App\_Plugins** folder and replace its contents with the custom files we created for our new dashboard. +As mentioned previously, let's navigate to the **App_Plugins** folder and replace its contents with the custom files we created for our new dashboard. -![App\_Plugins with dashboard files](../../../../10/umbraco-cms/extending/packages/images/app-pligins-contents.png) +![App\_Plugins with dashboard files](images/app-pligins-contents.png) ### Specify package properties @@ -120,7 +120,7 @@ In this section, we will demonstrate how you can add metadata about the package Now that Umbraco 9 is built on ASP.NET Core, you can add values directly to the package `csproj` file and it will pick them up. If you don't want to manually edit the `csproj` file, you can right-click your project, go to _Properties_ and then to _Package_. There you can insert your specific information: -![Package properties](<../../../../10/umbraco-cms/extending/packages/images/package-properties (1).png>) +![Package properties](images/package-properties.png) Here is an example of some basic properties that you can specify in your project file: @@ -217,7 +217,7 @@ public class PackageMigrationPlan : AutomaticPackageMigrationPlan } ``` -![Automatic package migration](../../../../10/umbraco-cms/extending/packages/images/embeded-resource.png) +![Automatic package migration](images/embeded-resource.png) {% hint style="info" %} Whenever the embedded package.xml file changes, the automatic package migration plan is executed again. This is due to the fact that the migration state is based on the file hash. Existing schema or content will not be overwritten in this process. @@ -291,13 +291,13 @@ public class CustomPackageMigration : PackageMigrationBase Here we also added the ZIP file as an embedded resource to the package project. -![ZIP as an embedded resource](<../../../../10/umbraco-cms/extending/packages/images/embeded-resource-props (1).png>) +![ZIP as an embedded resource](images/embeded-resource-props.png) -![Automatic package migration](<../../../../10/umbraco-cms/extending/packages/images/embeded-zip-resource (1).png>) +![Automatic package migration](images/embeded-zip-resource.png) Whichever migration plan you choose to create, you will be able to see that your package has been installed after the migration is completed. -![Installed package](../../../../10/umbraco-cms/extending/packages/images/installed-package.png) +![Installed package](images/installed-package.png) When using a custom package migration plan, the current state is ignored by default. This causes it to execute all migrations again whenever this isn't the same as the final state of the plan (e.g. if you added a new migration). This is due to the `IgnoreCurrentState` being set to `true` in the `PackageMigrationPlan` base class. You can override this property and set it to `false` again to make it behave like regular migration plans and only run the migrations that have not yet been executed on the current environment. @@ -318,6 +318,6 @@ By default, all these package migrations are executed unattended during startup } ``` -![Attended package install](../../../../10/umbraco-cms/extending/packages/images/package-install-attended.png) +![Attended package install](images/package-install-attended.png) The configuration of package migrations can be different for each environment and makes it possible to have the migration executed unattended on the development environment, but leave them out or manually execute them on other environments. This is useful when you use a tool like Umbraco Deploy or USync as these will migrate the content. diff --git a/13/umbraco-cms/extending/packages/example-package-repository.md b/13/umbraco-cms/extending/packages/example-package-repository.md index 20057032fc6..3ed07d826d4 100644 --- a/13/umbraco-cms/extending/packages/example-package-repository.md +++ b/13/umbraco-cms/extending/packages/example-package-repository.md @@ -68,13 +68,13 @@ Even if using another tool it may be worth reviewing how we have setup our pipel The build consists of two stages: building the solution and running unit tests. Only if both succeed is the build as a whole considered successful. -![Azure DevOps build pipeline](../../../../10/umbraco-cms/extending/packages/images/azuredevops-build.png) +![Azure DevOps build pipeline](images/azuredevops-build.png) ### Releasing the Package We release the package manually in Azure DevOps, with a two stage process. Firstly we release to a "pre-releases" feed, and then after manual approval, to NuGet. -![Azure DevOps release pipeline](../../../../10/umbraco-cms/extending/packages/images/azuredevops-release.png) +![Azure DevOps release pipeline](images/azuredevops-release.png) diff --git a/13/umbraco-cms/extending/packages/images/azuredevops-build.png b/13/umbraco-cms/extending/packages/images/azuredevops-build.png new file mode 100644 index 00000000000..763fbe991d3 Binary files /dev/null and b/13/umbraco-cms/extending/packages/images/azuredevops-build.png differ diff --git a/13/umbraco-cms/extending/packages/images/azuredevops-release.png b/13/umbraco-cms/extending/packages/images/azuredevops-release.png new file mode 100644 index 00000000000..426d86e170c Binary files /dev/null and b/13/umbraco-cms/extending/packages/images/azuredevops-release.png differ diff --git a/13/umbraco-cms/extending/packages/installing-and-uninstalling-packages.md b/13/umbraco-cms/extending/packages/installing-and-uninstalling-packages.md index e132651cd2e..9777ab83646 100644 --- a/13/umbraco-cms/extending/packages/installing-and-uninstalling-packages.md +++ b/13/umbraco-cms/extending/packages/installing-and-uninstalling-packages.md @@ -38,7 +38,7 @@ The Package Manager has an integrated search function that allows you to find an Once the package has been installed, it will show up under the **Packages** section in the backoffice, under **Installed** tab. -![Backoffice - installed packages](../../../../10/umbraco-cms/extending/packages/images/backoffice-installed-packages.png) +![Backoffice - installed packages](images/backoffice-installed-packages.png) ## Uninstalling packages @@ -74,7 +74,7 @@ With packages like the StarterKit, the process does not end there. While the pac There is no universal way to tell what content comes from a package, and what content is custom-made. In the Content section, delete individual nodes accordingly. If the goal is to fully remove the package and clean the site, all the content can be removed (and the recycle bin emptied). -Backoffice - removing content +Backoffice - removing content @@ -104,7 +104,7 @@ Document Types can be removed from the **Settings** section. If fully removing t As opposed to Document Types, there are some Data Types that are available out of the box when Umbraco is installed. It is not recommended to remove them. The safe approach is to delete any item that starts with a Document Type prefix and includes multiple dashes. That is the default naming convention for new configurations of Data Types (Example: "Blog - How many posts should be shown - Slider") -Backoffice - removing data types +Backoffice - removing data types @@ -114,7 +114,7 @@ As opposed to Document Types, there are some Data Types that are available out o No Templates are available out of the box in a new installation. If cleaning up after a package, it would be okay to delete all that are present -Backoffice - removing templates +Backoffice - removing templates @@ -124,7 +124,7 @@ No Templates are available out of the box in a new installation. If cleaning up Out of the box, there are a few views available in the `blocklist` and `grid` folders. Everything else can theoretically be removed. -Backoffice - removing partial views +Backoffice - removing partial views @@ -154,7 +154,7 @@ In this example, we will be using the SEOChecker package. This package allows de An example use case of the SEOChecker property on a Document Type, as presented in the Content section: -![SEOChecker in content](../../../../10/umbraco-cms/extending/packages/images/seochecker-content-section.png) +![SEOChecker in content](images/seochecker-content-section.png) To uninstall the SEOChecker from a website, the first step is to remove the package via a `dotnet` command or use the NuGet Package Manager. @@ -172,7 +172,7 @@ After that, cleaning the solution is recommended. While uninstalling the package would remove most of the custom code, the `App_Plugins` folder has to be cleaned manually. -SEOChecker files in App Plugins +SEOChecker files in App Plugins Removing _seochecker_ folder from `App_Plugins` will clean up the leftover backoffice section and dashboards. @@ -184,6 +184,6 @@ If content on the website relies on having a custom Property Editor or a data so In the case of the SEOChecker, the custom property added from the package would look like this after all the package files have been removed: -![The SEOChecker in Content after removing the package](../../../../10/umbraco-cms/extending/packages/images/seochecker-after-removal.png) +![The SEOChecker in Content after removing the package](images/seochecker-after-removal.png) Depending on the packages and the implementation, rendering of content from custom editors, or any frontend functionality dependent on external code, might not work correctly. It is always recommended to inspect the frontend of the site after removing any packages. diff --git a/13/umbraco-cms/extending/property-editors/tracking.md b/13/umbraco-cms/extending/property-editors/tracking.md index ddb7c967611..f32a2b1c0e2 100644 --- a/13/umbraco-cms/extending/property-editors/tracking.md +++ b/13/umbraco-cms/extending/property-editors/tracking.md @@ -19,14 +19,14 @@ When a content node is saved it will save the entity references as relations. 1. Go to the **Media** section. 2. Select a media item and click the **Info** tab. - ![Viewing media references](../../../../10/umbraco-cms/extending/property-editors/images/media-references-v9.png) + ![Viewing media references](images/media-references-v9.png) ### For Content Nodes 1. Go to the **Settings** section. 2. Under the **Relation Types** folder, select **Related Document** relations and click **Relations**. - ![Viewing document references](../../../../10/umbraco-cms/extending/property-editors/images/document-references-v9.png) + ![Viewing document references](images/document-references-v9.png) ### For Data Types @@ -35,7 +35,7 @@ When a content node is saved it will save the entity references as relations. 3. Select the **Data Type** you wish to view the references 4. Navigate to the **Info** tab. - ![Viewing Data Type references](../../../../10/umbraco-cms/extending/property-editors/images/data-types-references-v10.png) + ![Viewing Data Type references](images/data-types-references-v10.png) ## Example diff --git a/13/umbraco-cms/extending/section-trees/searchable-trees.md b/13/umbraco-cms/extending/section-trees/searchable-trees.md index 20d42b5528e..08788484106 100644 --- a/13/umbraco-cms/extending/section-trees/searchable-trees.md +++ b/13/umbraco-cms/extending/section-trees/searchable-trees.md @@ -2,7 +2,7 @@ When you type a search term into the Umbraco backoffice search field, you'll see search results from all the Section Trees that your user account has permission to access: -![Content Section Dashboards](<../../../../10/umbraco-cms/extending/section-trees/images/backoffice-search-v8 (1).png>) +![Content Section Dashboards](images/backoffice-search-v8.png) The results are grouped by 'Section Tree' like Content, Media, Document Types. Each 'Tree' has its own associated search mechanism that receives the search term and looks for matches in the tree that is responsible for searching. @@ -121,7 +121,7 @@ public class FavouriteThingsSearchableTree : ISearchableTree That's all we need, after an application pool recycle, if we now search in the backoffice we'll see matches from our custom 'Favourite Things' tree: -![Content Section Dashboards](<../../../../10/umbraco-cms/extending/section-trees/images/favouritethings-search-v8 (1).png>) +![Content Section Dashboards](images/favouritethings-search-v8.png) Umbraco automatically finds any implementation of `ISearchableTree` in your site and automatically configures it to be used for the custom section mentioned in the TreeAlias property. Be careful not to accidentally have two `ISearchableTree` implementations trying to search the 'same' TreeAlias, it's _one_ `ISearchableTree` per TreeAlias. diff --git a/13/umbraco-cms/extending/section-trees/sections.md b/13/umbraco-cms/extending/section-trees/sections.md index 96e3ed042ee..3da424d4b30 100644 --- a/13/umbraco-cms/extending/section-trees/sections.md +++ b/13/umbraco-cms/extending/section-trees/sections.md @@ -98,11 +98,11 @@ The final order of the sections is down to the order of which the composers are You will also need to allow your current Umbraco User group access to this new Custom Section via the backoffice! (you will need to logout and back in again to see the change) -![Add Section for User](../../../../10/umbraco-cms/extending/section-trees/images/add-custom-section-v8.png) +![Add Section for User](images/add-custom-section-v8.png) ### Adding a Language Translation (get rid of the square brackets) -![Custom Section appears displaying Alias](<../../../../10/umbraco-cms/extending/section-trees/images/custom-section-alias-v8 (1).png>) +![Custom Section appears displaying Alias](images/custom-section-alias-v8.png) When your new custom section appears, you'll notice only the section 'Alias' is displayed inside square brackets. This is because Umbraco caters for Multiple Languages in the backoffice, and is looking for a translation file for the current backoffice culture, containing a translation key for your custom section alias. diff --git a/13/umbraco-cms/extending/section-trees/trees/README.md b/13/umbraco-cms/extending/section-trees/trees/README.md index fedae9e1c54..736468087d6 100644 --- a/13/umbraco-cms/extending/section-trees/trees/README.md +++ b/13/umbraco-cms/extending/section-trees/trees/README.md @@ -170,7 +170,7 @@ public class FavouriteThingsTreeController : TreeController } ``` -![Favourite Things Custom Tree](../../../../../10/umbraco-cms/extending/section-trees/trees/images/favourite-things-custom-tree-v8.png) +![Favourite Things Custom Tree](images/favourite-things-custom-tree-v8.png) ### Responding to Tree Actions @@ -223,7 +223,7 @@ Our Tree Action View would then be wired to the loaded controller using the `ng- ``` -![Delete Raindrops on Roses](<../../../../../10/umbraco-cms/extending/section-trees/trees/images/delete-raindrops-on-roses-v8 (1).png>) +![Delete Raindrops on Roses](images/delete-raindrops-on-roses-v8.png) Take a look at the [umbEditor directives in the backoffice API Documentation](https://apidocs.umbraco.com/v12/ui/#/api/umbraco.directives.directive:umbEditorHeader), for lots of common interaction directives. Those directives can be used to deliver a consistent backoffice editing experience for items in your custom tree. @@ -270,7 +270,7 @@ protected override ActionResult CreateRootNode(FormCollection queryStr The RoutePath should be in the format of: **section/treeAlias/method**. As our example controller uses the `PluginController` attribute, clicking the root node would now request `/App_Plugins/favouriteThing/backoffice/favouritistThingsAlias/overview.html`. If you are not using the `PluginController` attribute, then the request would be to `/umbraco/views/favouritistThingsAlias/overview.html`. -![Favourite Thing Custom Single Node Tree](../../../../../10/umbraco-cms/extending/section-trees/trees/images/favourite-thing-custom-single-node-tree.png) +![Favourite Thing Custom Single Node Tree](images/favourite-thing-custom-single-node-tree.png) #### Full Width App - IsSingleNodeTree diff --git a/13/umbraco-cms/extending/ui-library.md b/13/umbraco-cms/extending/ui-library.md index e402542749d..81caff86701 100644 --- a/13/umbraco-cms/extending/ui-library.md +++ b/13/umbraco-cms/extending/ui-library.md @@ -24,7 +24,7 @@ You can also change the stylesheet of custom properties to see how the component ## Installing the UI Library Components -You can download the UI Library package from [GitHub](https://github.com/umbraco/Umbraco.UI/tree/v1/contrib/packages). +You can download the UI Library package from [GitHub](https://github.com/umbraco/Umbraco.UI). If you are installing a component via npm, there are two ways to import it: @@ -48,7 +48,7 @@ The [Storybook](https://uui.umbraco.com/) is the starting point for working with 1. Canvas - The Canvas tab allows to use the interactive controls. -
+
2. Docs - Here, you can find code examples for all the stories and use them in your markup. You can look it up by tag name or head to the project repository, where, in the packages folder, you will find all the component packages with all the necessary scripts and examples in the readme files. -
+
diff --git a/13/umbraco-cms/fundamentals/backoffice/README.md b/13/umbraco-cms/fundamentals/backoffice/README.md index 1bca06a90ad..9a0ae052ae4 100644 --- a/13/umbraco-cms/fundamentals/backoffice/README.md +++ b/13/umbraco-cms/fundamentals/backoffice/README.md @@ -22,7 +22,7 @@ A section in Umbraco is where you do specific tasks related to that section. For _The **Section menu** is the horizontal menu located on the top of the backoffice._ -
+
[Read more about the section menu](sections.md). @@ -30,9 +30,9 @@ _The **Section menu** is the horizontal menu located on the top of the backoffic A tree is a hierarchical list of items related (and usually restricted) to a specific concept, like for example content or media. -You can expand trees by clicking the down arrow ![](../../../../10/umbraco-cms/fundamentals/backoffice/images/expand-node.png) to the left of the node or by double-clicking the node. +You can expand trees by clicking the down arrow ![](images/expand-node.png) to the left of the node or by double-clicking the node. -
+
[Read more about the Tree](../../extending/section-trees/) @@ -46,7 +46,7 @@ A dashboard is the main view you are presented with when entering a section with _Default dashboard in the content section_ -
+
[Read more about Dashboards](../../extending/dashboards.md) diff --git a/13/umbraco-cms/fundamentals/backoffice/content-templates.md b/13/umbraco-cms/fundamentals/backoffice/content-templates.md index a67257f8fc5..47e3583074f 100644 --- a/13/umbraco-cms/fundamentals/backoffice/content-templates.md +++ b/13/umbraco-cms/fundamentals/backoffice/content-templates.md @@ -20,23 +20,23 @@ Before following this method you should have some [content](../data/defining-con Select a **Content node** from the **Content** menu: -![Content Menu](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-01-Content-Menu.png) +![Content Menu](images/v8-01-Content-Menu.png) Right-click the Content node and select the **Create Content Template** option. Alternatively, select the **Actions** dropdown of the content node and select the **Create Content Template** option: -![Actions Button](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-02-Actions-Menu.png) +![Actions Button](images/v8-02-Actions-Menu.png) Give your content template a **Name**: -![Content Template Name Field](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-03-Name-Content-Template.png) +![Content Template Name Field](images/v8-03-Name-Content-Template.png) Click the **Create** button and if the creation was successful, you will see a success notification: -![Create Button](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-04-Save-Content-Template.png) +![Create Button](images/v8-04-Save-Content-Template.png) The new content template will be created in **Content Templates** node of the **Settings** tree: -![New Content Template](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-05-Find-Content-Template.png) +![New Content Template](images/v8-05-Find-Content-Template.png) {% hint style="info" %} Refresh your browser, if you do not see the new content template in the **Content Templates** folder. @@ -46,15 +46,15 @@ Refresh your browser, if you do not see the new content template in the **Conten Click on the **Settings** menu: -![Settings Menu](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-07-Settings-Menu.png) +![Settings Menu](images/v8-07-Settings-Menu.png) Right-click on the **Content Templates** tree and select the **Create** menu item: -![Create Content Template](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-08-Create-Content-Template.png) +![Create Content Template](images/v8-08-Create-Content-Template.png) Select the Document Type you want to create a content template for: -![Select Content Type](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-09-Select-Content-Type.png) +![Select Content Type](images/v8-09-Select-Content-Type.png) {% hint style="warning" %} You can create content templates only from **Document Types** or **Document Types with Templates** @@ -62,27 +62,27 @@ You can create content templates only from **Document Types** or **Document Type Give your content template a **Name** and click the **Save** button: -![Content Template Name Field](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-10-Save-Template.png) +![Content Template Name Field](images/v8-10-Save-Template.png) The new content template will be created in **Content Templates** folder of the **Settings** tree: -![New Content Template](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-11-Find-Template.png) +![New Content Template](images/v8-11-Find-Template.png) ## Edit To edit an existing content template, select a content template from the **Content Templates** folder of the **Settings** tree. When you have finished editing click the **Save** button: -![Edit Content Template](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-06-Edit-Content-Template.png) +![Edit Content Template](images/v8-06-Edit-Content-Template.png) ## Use Once you have created a content template, you can use the template to create new content nodes. To use a content template, right-click the **Content** tree and select **Create**: -![Create From Template](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-12-Create-From-Template.png) +![Create From Template](images/v8-12-Create-From-Template.png) When you click on a Document Type that has a content template you will see two options: * Create a new node based on a content template * Create a blank one -![Select Template](../../../../10/umbraco-cms/fundamentals/backoffice/images/v8-13-Select-Template.png) +![Select Template](images/v8-13-Select-Template.png) diff --git a/13/umbraco-cms/fundamentals/backoffice/infinite-editing.md b/13/umbraco-cms/fundamentals/backoffice/infinite-editing.md index 11b9ef0dc50..1bbc76b3572 100644 --- a/13/umbraco-cms/fundamentals/backoffice/infinite-editing.md +++ b/13/umbraco-cms/fundamentals/backoffice/infinite-editing.md @@ -10,7 +10,7 @@ This feature enables you to work with your content without losing the context of Document Types are in different sections than content but infinite editing enables you to make changes to them directly from the content you are editing. -![Infinite Editing](../../../../10/umbraco-cms/fundamentals/backoffice/images/Infinite-editing.gif) +![Infinite Editing](images/Infinite-editing.gif) In the example showcased above, prevalues are being added to a Data Type, without losing the context of the content that's being worked on. The example also shows how you can edit images, without being sent to the 'Media' section. diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/README.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/README.md index f8533b31166..3c9ff633544 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/README.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/README.md @@ -10,7 +10,7 @@ A Property Editor is the editor that a Data Type references. A Data Type is defi When creating a Data Type, specify the property editor for the Data Type to use by selecting from the "Property editor" list (as shown below). -![Data Type Definition](../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/images/Media-picker-dataType-v9.png) +![Data Type Definition](images/Media-picker-dataType-v9.png) ## [Built-in Property Editors in Umbraco](built-in-umbraco-property-editors/) diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index 56c7206e983..de52cf031a8 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -10,7 +10,7 @@ The **Block Grid** property editor enables editors to layout their content in th When testing out the property editor, you can use a set of predefined Blocks. The option will only be possible when there are no other Data Types using the Block Grid property editor. -
+
* Create a new **Data Type**. * Select the **Block Grid** as the **Property editor**. @@ -31,7 +31,7 @@ To set up the Block Grid property editor, follow these steps: You will see the configuration options for a Block Grid property editor as shown below: -![Block Grid - Data Type Configuration](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_Configuration.png) +![Block Grid - Data Type Configuration](../../built-in-property-editors/block-editor/images/BlockGridEditor_Configuration.png) The Data Type editor allows you to configure the following properties: @@ -49,7 +49,7 @@ Block Types are based on [**Element Types**](../../../../data/defining-content/# Once you have added an Element Type as a Block Type on your Block Grid Data Type you have the option to configure it. -![Block Grid - Data Type Block Configuration](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_DataType\_Blocks.png) +![Block Grid - Data Type Block Configuration](../../built-in-property-editors/block-editor/images/BlockGridEditor_DataType_Blocks.png) [Examples and more details about configuring the Label property](label-property-configuration.md) @@ -126,11 +126,11 @@ To scale an Area, click and drag the scale-button in the bottom-right corner of * **Grid Columns for Areas** - Overwrites the amount of columns used for the Area grid. * **Areas** - Determines whether the Block can be created inside Areas of other Blocks. -![Block Grid - Areas](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_Areas.png) +![Block Grid - Areas](../../built-in-property-editors/block-editor/images/BlockGridEditor_Areas.png) ### Area configuration -![Block Grid - Area Configuration](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_AreasConfiguration.png) +![Block Grid - Area Configuration](../../built-in-property-editors/block-editor/images/BlockGridEditor_AreasConfiguration.png) * **Alias** - The alias is used to identify this Area. It is being printed by `GetBlockGridHTML()` and used as name for the Area slot in Custom Views. The alias is also available for CSS Selectors to target the HTML-Element representing an Area. * **Create Button Label** - Overwrites the Create Button Label of the Area. @@ -157,25 +157,25 @@ Notice that any styling of a Block is scoped. This means that the default backof When viewing a **Block Grid** property editor in the **Content** section for the first time, you will be presented with the option to **Add content**. -![Block Grid - Add Content](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_AddContent.png) +![Block Grid - Add Content](../../built-in-property-editors/block-editor/images/BlockGridEditor_AddContent.png) Clicking the **Add content** button opens up the **Block Catalogue**. -![Block Grid - Setup](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_BlockPicker.png) +![Block Grid - Setup](../../built-in-property-editors/block-editor/images/BlockGridEditor_BlockPicker.png) The Block Catalogue looks different depending on the amount of available Blocks and their catalogue appearance. -![Block Grid - example setup](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_BlockPicker\_exsetup.png) +![Block Grid - example setup](../../built-in-property-editors/block-editor/images/BlockGridEditor_BlockPicker_exsetup.png) Click the Block Type you wish to create and a new Block will appear in the layout. More Blocks can be added to the layout by clicking the Add content button. Alternatively, use the Add content button that appears on hover to add new Blocks between, besides, or above the existing Blocks. -![Block Grid - Add Content Inline](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_AddContentInline.png) +![Block Grid - Add Content Inline](../../built-in-property-editors/block-editor/images/BlockGridEditor_AddContentInline.png) To delete a Block, click the trash icon which appears on the mouse hover. -![Block Grid - Delete Content](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_DeleteContent.png) +![Block Grid - Delete Content](../../built-in-property-editors/block-editor/images/BlockGridEditor_DeleteContent.png) ## Sorting Blocks @@ -183,7 +183,7 @@ Blocks can be rearranged using the click and drag feature. Move them up or down Moving a Block from one Area to another is done in the same way. If a Block is not allowed in the given position, the area will display a red color and not allow the new position. -![Block Grid - Sorting Blocks](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/Sorting\_BlockGrid\_Blocks.gif) +![Block Grid - Sorting Blocks](../../built-in-property-editors/block-editor/images/Sorting_BlockGrid_Blocks.gif) ## Scaling Blocks @@ -191,7 +191,7 @@ If a Block has multiple size options it can be scaled via the UI. This appears i The Block is resized using a click-and-drag feature. Moving the mouse will change the size to the size options closest to the mouse pointer. -

Scale blocks in the grid by dragging from the bottom-right corner.

+

Scale blocks in the grid by dragging from the bottom-right corner.

## Rendering Block Grid Content diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md index e8279c8cffa..99641a24d3d 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md @@ -18,7 +18,7 @@ To set up your Block List Editor property, create a new _Data Type_ and select * Then you will see the configuration options for a Block List as shown below. -![Block List - Data Type Definition](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_DataType.jpg) +![Block List - Data Type Definition](../../built-in-property-editors/block-editor/images/BlockListEditor_DataType.jpg) The Data Type editor allows you to configure the following properties: @@ -35,7 +35,7 @@ Block Types are **Element Types** which need to be created before you can start Once you have added an element type as a Block Type on your Block List Data Type you will have the option to configure it further. -![Block List - Data Type Block Configuration](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_DataType\_Blocks.png) +![Block List - Data Type Block Configuration](../../built-in-property-editors/block-editor/images/BlockListEditor_DataType_Blocks.png) Each Block has a set of properties that are optional to configure. They are described below. @@ -75,15 +75,15 @@ These properties are relevant when you work with custom views. When viewing a **Block List** editor in the Content section for the first time, you will be presented with the option to Add content. -![Block List - Add Content](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_AddContent.png) +![Block List - Add Content](../../built-in-property-editors/block-editor/images/BlockListEditor_AddContent.png) Clicking the Add content button brings up the Block Catalogue. -![Block List - Setup](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_BlockPicker\_simplesetup.jpg) +![Block List - Setup](../../built-in-property-editors/block-editor/images/BlockListEditor_BlockPicker_simplesetup.jpg) The Block Catalogue looks different depending on the amount of available Blocks and their catalogue appearance. -![Block List - example setup from Umbraco.com](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_BlockPicker.jpg) +![Block List - example setup from Umbraco.com](../../built-in-property-editors/block-editor/images/BlockListEditor_BlockPicker.jpg) Click the Block Type you wish to create and a new Block will appear in the list. @@ -91,15 +91,15 @@ Depending on whether your Block List Editor is setup to use default or inline ed In default mode you will enter the editing overlay of that Block: -![Block List - Overlay editing](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_EditingOverlay.jpg) +![Block List - Overlay editing](../../built-in-property-editors/block-editor/images/BlockListEditor_EditingOverlay.jpg) In inline editing mode the new Blocks will expand to show its inline editor: -![Block List - Inline editing](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_InlineEditing.jpg) +![Block List - Inline editing](../../built-in-property-editors/block-editor/images/BlockListEditor_InlineEditing.jpg) More Blocks can be added to the list by clicking the Add content button or using the inline Add content button that appears on hover between or above existing Blocks. -![Block List - Add Content](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockListEditor\_AddContentInline.jpg) +![Block List - Add Content](../../built-in-property-editors/block-editor/images/BlockListEditor_AddContentInline.jpg) To reorder the Blocks, click and drag a Block up or down to place in the desired order. diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/checkbox-list.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/checkbox-list.md index babf5c7c4c6..d6524d6fb35 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/checkbox-list.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/checkbox-list.md @@ -12,7 +12,7 @@ Unlike other property editors, the Prevalue IDs are not directly accessible in R ## Data Type Definition Example -![True/Checkbox List Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/checkbox-list-setup-v8.png) +![True/Checkbox List Definition](../built-in-property-editors/images/checkbox-list-setup-v8.png) {% hint style="info" %} You can use dictionary items to translate the values of a Checkbox List property editor in a multilingual setup. For more details, see the [Creating a Multilingual Site](../../../../tutorials/multilanguage-setup.md#translating-multi-value-property-editors) article. @@ -20,7 +20,7 @@ You can use dictionary items to translate the values of a Checkbox List property ## Content Example -![Checkbox List Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/checkbox-list-content.png) +![Checkbox List Example](../built-in-property-editors/images/checkbox-list-content.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/color-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/color-picker.md index 49ffee1eb20..60ffc85f134 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/color-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/color-picker.md @@ -12,11 +12,11 @@ It's possible to add a label to use with the color. ## Data Type Definition Example -![Color Picker Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Color-Picker-DataType-v10.png) +![Color Picker Data Type Definition](../built-in-property-editors/images/Color-Picker-DataType-v10.png) ## Content Example -![Color Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Color-Picker-Content-v8.png) +![Color Picker Content](../built-in-property-editors/images/Color-Picker-Content-v8.png) ## Example with Modelsbuilder diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/content-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/content-picker.md index 626f9ca048c..6dfe04ded0f 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/content-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/content-picker.md @@ -8,11 +8,11 @@ The content picker opens a panel to pick a specific page from the content struct ## Data Type Definition Example -![Content Picker Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Content-Picker2-DataType-v10.png) +![Content Picker Data Type Definition](../built-in-property-editors/images/Content-Picker2-DataType-v10.png) ## Content Example -![Content Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Content-Picker-Content-v10.png) +![Content Picker Content](../built-in-property-editors/images/Content-Picker-Content-v10.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date-time.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date-time.md index 30808ce4862..d3f3c07320b 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date-time.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date-time.md @@ -8,7 +8,7 @@ Displays a calendar UI for selecting dates which are saved as a DateTime value. ## Data Type Definition Example -![Data Type Definition Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/date-time-v8.png) +![Data Type Definition Example](../built-in-property-editors/images/date-time-v8.png) There are two settings available for manipulating the DateTime property. @@ -18,7 +18,7 @@ The second setting is "Offset time". When enabling this setting the displayed ti ## Content Example -![Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/date-picker-v8.png) +![Content Example](../built-in-property-editors/images/date-picker-v8.png) ## MVC View Example - displays a datetime diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date.md index 21b95bc5c15..28130e6cefb 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date.md @@ -6,13 +6,13 @@ Displays a calendar UI for selecting dates which are saved as a DateTime value. ## Data Type Definition Example -![Data Type Definition Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/DateTime-DataType.png) +![Data Type Definition Example](../built-in-property-editors/images/DateTime-DataType.png) The only setting that is available for manipulating the Date property is to set a format. By default the format of the date in the Umbraco backoffice will be `YYYY-MM-DD`, but you can change this to something else. See [MomentJS.com](https://momentjs.com/) for the supported formats. ## Content Example -![Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Date-Time-Content.png) +![Content Example](../built-in-property-editors/images/Date-Time-Content.png) ## MVC View Example - displays a datetime diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/decimal.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/decimal.md index a393e76248e..7786c581e39 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/decimal.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/decimal.md @@ -6,7 +6,7 @@ ## Data Type Definition Example -![Data Type Definition Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/definition-example.png) +![Data Type Definition Example](../built-in-property-editors/images/definition-example.png) In the example above the possible values for the input field would be \[8, 8.5, 9, 9.5, 10] @@ -16,7 +16,7 @@ If the value of **Step Size** is not set then all decimal values between 8 and 1 ## Content Example -![Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/content-example.png) +![Content Example](../built-in-property-editors/images/content-example.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md index 4d79a42af96..489cb536a1d 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md @@ -22,17 +22,17 @@ You can use dictionary items to translate the values of a Dropdown property edit ## Data Type Definition Example -![Dropdown Data Type Definition](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/dropdown/images/Dropdown-DataType-v10.png) +![Dropdown Data Type Definition](../../built-in-property-editors/dropdown/images/Dropdown-DataType-v10.png) ## Content Example ### Single Value -![Single dropdown content example](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/dropdown/images/DropdownSingle-Content.png) +![Single dropdown content example](../../built-in-property-editors/dropdown/images/DropdownSingle-Content.png) ### Multiple Values -![Multiple dropdown content example](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/dropdown/images/DropdownMultiple-Content.png) +![Multiple dropdown content example](../../built-in-property-editors/dropdown/images/DropdownMultiple-Content.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/email-address.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/email-address.md index 7beaf17f5d9..9a7bd36f615 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/email-address.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/email-address.md @@ -14,11 +14,11 @@ Displays an email address. The Email Address Property Editor does not come with any further configuration. The property can be configured once it has been added to a Document Type. -![Mandatory Checkbox Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/emailaddress-datatype-v10.png) +![Mandatory Checkbox Example](../built-in-property-editors/images/emailaddress-datatype-v10.png) ## Content Example -![Single email address content example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/EmailAddress-Content-v10.png) +![Single email address content example](../built-in-property-editors/images/EmailAddress-Content-v10.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/eye-dropper-color-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/eye-dropper-color-picker.md index c0fa88a2d1e..f5a4ea2afd6 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/eye-dropper-color-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/eye-dropper-color-picker.md @@ -8,11 +8,11 @@ The Eye Dropper Color picker allows you to choose a color from the full color sp ## Data Type Definition Example -![Eye Dropper Color Picker Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Eye-Dropper-Color-Picker-DataType-v8.png) +![Eye Dropper Color Picker Data Type Definition](../built-in-property-editors/images/Eye-Dropper-Color-Picker-DataType-v8.png) ## Content Example -![Eye Dropper Color Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Eye-Dropper-Color-Picker-Content-v8.png) +![Eye Dropper Color Picker Content](../built-in-property-editors/images/Eye-Dropper-Color-Picker-Content-v8.png) ## Example with Modelsbuilder diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/file-upload.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/file-upload.md index cdf64fbd205..dff9d19c028 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/file-upload.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/file-upload.md @@ -16,11 +16,13 @@ Find the full documentation for the property in the [Media Picker](media-picker- ## Data Type Definition Example -![Data Type Definition Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/definition-example-v10.png) +![Data Type Definition Example](../built-in-property-editors/images/definition-example-v10.png) ## Content Example -![Content Example Empty](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/content-example-empty.png) ![Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/File-Upload-content-example.png) +![Content Example Empty](../built-in-property-editors/images/content-example-empty.png) + +![Content Example](../built-in-property-editors/images/File-Upload-content-example.png) In code, the property is a string, which references the location of the file. diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/add-value-programmatically.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/add-value-programmatically.md index e5593016743..5e9a2457c68 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/add-value-programmatically.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/add-value-programmatically.md @@ -4,7 +4,7 @@ For this example, the default grid configuration has been used. -![Grid configuration](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/grid-layout/Images/Grid-configuration.jpg) +![Grid configuration](../../built-in-property-editors/grid-layout/Images/Grid-configuration.jpg) ## Set value diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/configuring-the-grid-layout-datatype.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/configuring-the-grid-layout-datatype.md index b6a24ac3c55..059e744ec40 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/configuring-the-grid-layout-datatype.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/configuring-the-grid-layout-datatype.md @@ -9,11 +9,11 @@ A layout is the general grid "container", it contains one or more sections which 1. A single column layout which to the content editor will act like a full page canvas to insert elements on 2. A multiple column layout with a main content body, and one or more sidebar columns to insert lists or other sidebar widgets on. -
+
You can however configure as many layouts and layout sections as you wish, each section in the layout must be given a width in columns, so editors gets an accurate preview of their layout. -
+
## Row configurations @@ -21,10 +21,10 @@ A row in the grid editor contains one or more cells, which divide the row into a It is possible to setup configurable attributes(class, rel, href) and inline styling on rows. -
+
You can add as many cells as you like. If they overflow the total width of the row, they will be arranged after each other horizontally as you'd expect in a grid system. -
+
Each cell can by default contain any type of editor such as textstring editors, imagespicker, embedded media or Umbraco macros. To override this behavior, uncheck the **allow all editors** option and you can specify which editors will be available for the row. diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/grid-editors.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/grid-editors.md index 224b95f48d4..847d04aba10 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/grid-editors.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/grid-editors.md @@ -179,7 +179,7 @@ The `config.markup` is the string rendered server side in your template. `#value In this sample `config.size` will resize the image according to `height` and `width`. The above example will result in a rendered image that is 200x200 pixels no matter the size of the uploaded image. If the ratio of the size differs from the uploaded image it is possible to set a focal point that determines how the image should be cropped. -
+
**Sample macro config** diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/settings-and-styles.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/settings-and-styles.md index b9796b85ce6..a771e66bbb4 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/settings-and-styles.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/settings-and-styles.md @@ -2,7 +2,7 @@ A grid layout can also expose custom settings - such as data-attributes or styling options - on each cell or row. This allows editors to use a friendly UI to add configuration values to grid elements. When custom settings and styles are applied, they will by default be included in the grid html as either html attributes or inline styles. -
+
These settings and styles must be configured by developers when setting up the grid layout data type. diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/what-are-grid-layouts.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/what-are-grid-layouts.md index 4a9c8290d38..4d526a5442c 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/what-are-grid-layouts.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/grid-layout/what-are-grid-layouts.md @@ -8,10 +8,10 @@ Grid layouts consists of two main areas that need to be configured, _grid layout The _layout area_ is where the overall page layout is defined. _Layout areas_ are divided in to _layout sections_ e.g. a sidebar section and content section. The size of the _layout sections_ is defined in columns. For a full-width content area use max number of columns (12 for Bootstrap 3). Each _layout section_ contains one or more _rows_. -
+
### Grid Rows Grid _rows_ is where the actual content goes. Each row is divided into _cells_ that contain the property editors. The size of the cells is defined in columns. Unlike the _layouts sections_ it is possible to add more _cells_ than the max number of columns - they will stack as they should in a grid system. -
+
diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/image-cropper.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/image-cropper.md index 6ca37d87849..eb9951007aa 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/image-cropper.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/image-cropper.md @@ -18,7 +18,7 @@ You can add, edit & delete crop presets the cropper UI can use. ## Data Type Definition Example -![Image Cropper Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/imageCropper-v9.png) +![Image Cropper Data Type Definition](../built-in-property-editors/images/imageCropper-v9.png) ## Content Example @@ -36,7 +36,7 @@ The Image Cropper comes with 3 modes: The editor exposes a drop area for files. Select it to upload an image. -![Image Cropper Upload](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/imageCropper-upload-v8.png) +![Image Cropper Upload](../built-in-property-editors/images/imageCropper-upload-v8.png) ### Set focal point @@ -44,13 +44,13 @@ By default, the Image Cropper allows the editor to set a focal point on the uplo All the preset crops are shown to give the editor a preview of what the image will look like on the frontend. -![Image Cropper Focal point](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/imageCropper-focalpoint-v8.png) +![Image Cropper Focal point](../built-in-property-editors/images/imageCropper-focalpoint-v8.png) ### Crop and resize The editor can fit the crop to the image to ensure that the image is presented as intended. -![Image Cropper Crop](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/imageCropper-crop-v8.png) +![Image Cropper Crop](../built-in-property-editors/images/imageCropper-crop-v8.png) ## Powered by ImageSharp.Web diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/label.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/label.md index a5cf504c719..17d1d48c635 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/label.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/label.md @@ -8,7 +8,7 @@ Label is a non-editable control and can only be used to display a pre-set value. ## Data Type Definition Example -![Label Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Label-Setup-v8.png) +![Label Data Type Definition](../built-in-property-editors/images/Label-Setup-v8.png) ### Value type @@ -18,7 +18,7 @@ There is also a Value Type: Long string if you need to set a long string value f ## Content Example -![Label Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Label-Content-v8.png) +![Label Content Example](../built-in-property-editors/images/Label-Content-v8.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/listview.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/listview.md index eb8f5f228ef..bfa782c013b 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/listview.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/listview.md @@ -6,17 +6,19 @@ **List View** display a list of categories when it is enabled on a Document Type that has children. -![List view example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/listview.png) +![List view example](../built-in-property-editors/images/listview.png) ## Enable list view If enabled, editors will be able to see multiple children from a list on a content node that has children. When not enabled, no list will be shown and all children will be shown in the Content Tree. -![Enable List view example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/enable-listview.png) +![Enable List view example](../built-in-property-editors/images/enable-listview.png) ## Settings -![List view settings example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/list-view-settings1-v10.png) ![List view settings example 2](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/list-view-settings2-v10.png) +![List view settings example](../built-in-property-editors/images/list-view-settings1-v10.png) + +![List view settings example 2](../built-in-property-editors/images/list-view-settings2-v10.png) ### Page Size @@ -40,7 +42,9 @@ You can select order of the content nodes displayed, "Acsending" or "Descending" It is possible to add more columns to the list, via adding the properties through the dropdown. These properties are based on the Data Types which are used by the Document Type. It will show up in the dropdown by its alias and not the name on the property. -![List view property example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/listview-property.png) ![List view property example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/listview-property-dropdown.png) +![List view property example](../built-in-property-editors/images/listview-property.png) + +![List view property example](../built-in-property-editors/images/listview-property-dropdown.png) Once you have selected a column that you want to display, the next thing you want to do is define what its name should be and what kind of value it should display. You can also move the headers around, re-ordering how the headers should look. This is done by the move icon on the left side of the alias. @@ -70,7 +74,7 @@ Select what kind of action is available on the list view. Changes the icon in the backoffice of the listview. By default it will look like the image below. -![List icon example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/list-icon.png) +![List icon example](../built-in-property-editors/images/list-icon.png) ### Content app name @@ -84,26 +88,26 @@ Enable this to show the content app by default instead of the list view ### Generic field value -This example uses a generic field on a child item and displays it in the list. ![List view content example email](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/listview-content-example-email-settings.png) +This example uses a generic field on a child item and displays it in the list. ![List view content example email](../built-in-property-editors/images/listview-content-example-email-settings.png) The `{{ value }}` will take the value of the Email property and display it in the list, as shown on the image below. -![List view content example email](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/listview-content-example-email.png) +![List view content example email](../built-in-property-editors/images/listview-content-example-email.png) ### Member name First, a Member Picker property needs to be present on the content item. In this example, the `child item` has gotten a Member Picker Data Type with the alias of `isAuthor`. -![List view member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/member-picker.png) +![List view member picker](../built-in-property-editors/images/member-picker.png) Now that the child item has a member and the value that should be displayed is the name of the picked value, the next step is to reconfigure the template value in the listview setting. -![List view member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/member-picker-settings.png) +![List view member picker](../built-in-property-editors/images/member-picker-settings.png) -This will take the value picked up by the member picker. ![List view member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/picked-member.png) +This will take the value picked up by the member picker. ![List view member picker](../built-in-property-editors/images/picked-member.png) -And display it in the listview. Shown in the example below: ![List view member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/list-member-picked.png) +And display it in the listview. Shown in the example below: ![List view member picker](../built-in-property-editors/images/list-member-picked.png) ### Other examples -![List view other examples](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/others.png) ![List view other examples](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/others-result.png) +![List view other examples](../built-in-property-editors/images/others.png) ![List view other examples](../built-in-property-editors/images/others-result.png) diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md index 1900fc564d4..e205efda9d1 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md @@ -8,7 +8,7 @@ This built-in editor allow the user to use the markdown formatting options, from ## Data Type Definition Example -![Definition Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Markdown-Editor-definition-example-v10.png) +![Definition Example](../built-in-property-editors/images/Markdown-Editor-definition-example-v10.png) There are three settings available for manipulating the **Markdown editor** property. @@ -18,7 +18,7 @@ There are three settings available for manipulating the **Markdown editor** prop ## Content Example -![Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Markdown-Editor-content-example.png) +![Content Example](../built-in-property-editors/images/Markdown-Editor-content-example.png) ### Explanation of buttons from left to right diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3.md index 1c6d30819df..b9257b020d2 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3.md @@ -11,7 +11,7 @@ This property editors returns one of the following: ## Data Type Definition Example -![Media Picker Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/MediaPicker-DataType-v10.png) +![Media Picker Data Type Definition](../built-in-property-editors/images/MediaPicker-DataType-v10.png) ### Accepted types @@ -57,7 +57,7 @@ Global crops are configured on the Image Cropper property of the Image Media Typ ## Content Example -![Media Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Media-Picker3-Content.jpg) +![Media Picker Content](../built-in-property-editors/images/Media-Picker3-Content.jpg) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker.md index f6b33bc2b5d..b6345799e7a 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker.md @@ -14,7 +14,7 @@ This property editors returns a single item if the "Pick multiple items" Data Ty ## Data Type Definition Example -![Media Picker Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Media-Picker-DataType-v10.png) +![Media Picker Data Type Definition](../built-in-property-editors/images/Media-Picker-DataType-v10.png) ### Ignore user start nodes @@ -24,7 +24,7 @@ When this setting is enabled, a user who doesn't normally have access to the med ## Content Example -![Media Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Media-Picker-Content-v8.png) +![Media Picker Content](../built-in-property-editors/images/Media-Picker-Content-v8.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-group-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-group-picker.md index 8bf8da56332..8ea46e67385 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-group-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-group-picker.md @@ -8,11 +8,11 @@ The Member Group Picker opens a panel to pick one or more member groups from the ## Data Type Definition Example -![Member Group Picker Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Member-Picker-DataType.png) +![Member Group Picker Type Definition](../built-in-property-editors/images/Member-Picker-DataType.png) ## Content Example -![Member Grouep Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Member-Group-Picker-Content.png) +![Member Grouep Picker Content](../built-in-property-editors/images/Member-Group-Picker-Content.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-picker.md index 574bf12afe4..73b36f9cf24 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/member-picker.md @@ -8,11 +8,11 @@ The member picker opens a panel to pick a specific member from the member sectio ## Data Type Definition Example -![Media Picker Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Member-Picker-DataType-v8.png) +![Media Picker Data Type Definition](../built-in-property-editors/images/Member-Picker-DataType-v8.png) ## Content Example -![Member Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Member-Picker-Content-v8.png) +![Member Picker Content](../built-in-property-editors/images/Member-Picker-Content-v8.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multi-url-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multi-url-picker.md index 74f110a6239..e38c6b531ce 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multi-url-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multi-url-picker.md @@ -8,11 +8,11 @@ Multi Url Picker allows an editor to pick and sort multiple urls. This property ## Data Type Definition Example -![Related Links Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Multy-Url-Picker-DataType-v10.png) +![Related Links Data Type Definition](../built-in-property-editors/images/Multy-Url-Picker-DataType-v10.png) ## Content Example -![Media Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Multy-Url-Picker-Content-v8.png) +![Media Picker Content](../built-in-property-editors/images/Multy-Url-Picker-Content-v8.png) ## MVC View Example - value converters enabled diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multiple-textbox.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multiple-textbox.md index c3adce112dd..acd77c3be37 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multiple-textbox.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/multiple-textbox.md @@ -8,11 +8,11 @@ The Repeatable textstrings property editor enables a content editor to make a li ## Data Type Definition Example -![Repeatable textstrings Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Repeatable-Textstrings-DataType-v10.png) +![Repeatable textstrings Data Type Definition](../built-in-property-editors/images/Repeatable-Textstrings-DataType-v10.png) ## Content Example -![Repeatable textstrings Content](<../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Multiple-Textbox-Repeatable-Textstrings-Content (1) (1).png>) +![Repeatable textstrings Content](../built-in-property-editors/images/Multiple-Textbox-Repeatable-Textstrings-Content.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/numeric.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/numeric.md index 6ad73a16475..784c6533e48 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/numeric.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/numeric.md @@ -8,7 +8,7 @@ Numeric is an HTML input control for entering numbers. Since it's a standard HTM ## Data Type Definition Example -![Numeric Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/numeric-datatype-v10.png) +![Numeric Data Type Definition](../built-in-property-editors/images/numeric-datatype-v10.png) ### Minimum @@ -26,7 +26,7 @@ This allows you to set up a maximum value. If you will always need a maximum val ## Content Example -![Numeric Content Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/numeric-content.png) +![Numeric Content Definition](../built-in-property-editors/images/numeric-content.png) ## MVC View Examples diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/radiobutton-list.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/radiobutton-list.md index 3ec2ae1e8f5..ad921e1f0f6 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/radiobutton-list.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/radiobutton-list.md @@ -8,7 +8,7 @@ Pretty much like the name indicates this Data type enables editors to choose fro ## Data Type Definition Example -![Radiobutton List Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/RadioButton-List-DataType-v10.png) +![Radiobutton List Data Type Definition](../built-in-property-editors/images/RadioButton-List-DataType-v10.png) {% hint style="info" %} You can use dictionary items to translate the values of a Radiobutton List property editor in a multilingual setup. For more details, see the [Creating a Multilingual Site](../../../../tutorials/multilanguage-setup.md#translating-multi-value-property-editors) article. @@ -16,7 +16,7 @@ You can use dictionary items to translate the values of a Radiobutton List prope ## Content Example -![Radiobutton List Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/RadioButton-List-Content-v8.png) +![Radiobutton List Content](../built-in-property-editors/images/RadioButton-List-Content-v8.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md index 7845e079379..bff7894eb6c 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md @@ -37,7 +37,7 @@ Extend the functionality of the Rich Text Editor with plugins. ## Data Type Definition Example -![Rich Text Editor - Data Type](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-datatype-v10.png) +![Rich Text Editor - Data Type](../../built-in-property-editors/rich-text-editor/images/rte-datatype-v10.png) ## Content Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles.md index 936a6c304e4..b3992aa2a0c 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles.md @@ -17,13 +17,13 @@ This will generate an empty CSS file in your project. At this point, you can start adding specific styles, that your editors can then use in the Content section when creating and writing new content. -![Add specific RTE styles](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-create-style.png) +![Add specific RTE styles](../../built-in-property-editors/rich-text-editor/images/rte-create-style.png) The image above is an example of how an RTE style can be configured. When working with these styles, the **Preview** feature will show you how the style will look when applied. Every style you add, will automatically be added to the CSS file. The file will be placed in the same location as the rest of your CSS files. It is possible to edit the file directly from the backoffice as well. Access it from the **Code** tab in the top-right corner. -![Edit CSS file directly in the backoffice](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-code-tab.png) +![Edit CSS file directly in the backoffice](../../built-in-property-editors/rich-text-editor/images/rte-code-tab.png) ## Using RTE Styles @@ -41,4 +41,4 @@ You can have as many different styles for your RTEs as you want. You might want When configuring your RTE Data Types, you can select which stylesheets your content editors should be able to use. -![Choose stylesheets on the Data Type](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-choose-stylesheet.png) +![Choose stylesheets on the Data Type](../../built-in-property-editors/rich-text-editor/images/rte-choose-stylesheet.png) diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/slider.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/slider.md index 56e9c5ec491..3c7ca8ee7f7 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/slider.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/slider.md @@ -10,13 +10,13 @@ There are two flavors of the slider. One with a single value picker. One with a ## Data Type Definition Example -![Slider Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Slider-Data-Type-Definition-Example.png) +![Slider Data Type Definition](../built-in-property-editors/images/Slider-Data-Type-Definition-Example.png) ## Content Example -
+
-
+
## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/tags.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/tags.md index 9d24b5b013a..fb56ab8fce5 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/tags.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/tags.md @@ -8,7 +8,7 @@ The Tags property editor allows you to add multiple tags to a node. ## Data Type Definition Example -![Data Type Definition Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Tags-DataType-v10.png) +![Data Type Definition Example](../built-in-property-editors/images/Tags-DataType-v10.png) ### Tag group @@ -24,17 +24,17 @@ There are built-in property value converters, which means you don't need to worr ### CSV tags -![CSV tags example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Csv-example-v8.png) +![CSV tags example](../built-in-property-editors/images/Csv-example-v8.png) ### JSON tags -![JSON tags example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Json-example-v8.png) +![JSON tags example](../built-in-property-editors/images/Json-example-v8.png) ### Tags typeahead Whenever a tag has been added it will be visible in the typeahead when you start typing on other pages. -![Tags typeahead example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Typeahead-v8.png) +![Tags typeahead example](../built-in-property-editors/images/Typeahead-v8.png) ## MVC View Example - displays a list of tags diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textarea.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textarea.md index 4fbffd30d48..e2c479fcb60 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textarea.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textarea.md @@ -10,11 +10,11 @@ Textarea is an HTML textarea control for multiple lines of text. It can be confi ### Without a character limit -![Textarea Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Textarea-Setup-v10.png) +![Textarea Data Type Definition](../built-in-property-editors/images/Textarea-Setup-v10.png) ### With a character limit -![Textarea Data Type Definition With Limits](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Textarea-Setup-Limit-v8.png) +![Textarea Data Type Definition With Limits](../built-in-property-editors/images/Textarea-Setup-Limit-v8.png) ## Settings @@ -22,11 +22,11 @@ Textarea is an HTML textarea control for multiple lines of text. It can be confi ### Without a character and rows limit -![Textarea Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Textarea-Content-v8.png) +![Textarea Content Example](../built-in-property-editors/images/Textarea-Content-v8.png) ### With a character limit and rows limit -![Textbox Content Example With Limits](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Textarea-Content-Limit-v8.png) +![Textbox Content Example With Limits](../built-in-property-editors/images/Textarea-Content-Limit-v8.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textbox.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textbox.md index e346497a651..bf7359ce7b7 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textbox.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/textbox.md @@ -12,17 +12,17 @@ Textbox is an HTML input control for text. It can be configured to have a fixed ## Data Type Definition Example -![Textbox Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Textbox-Setup-v10.png) +![Textbox Data Type Definition](../built-in-property-editors/images/Textbox-Setup-v10.png) ## Content Example ### Without a character limit -![Textbox Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Textbox-Content-v8.png) +![Textbox Content Example](../built-in-property-editors/images/Textbox-Content-v8.png) ### With a character limit -![Textbox Content Example Without a Character Limit](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Textbox-Content-Limit-v8.png) +![Textbox Content Example Without a Character Limit](../built-in-property-editors/images/Textbox-Content-Limit-v8.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/true-false.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/true-false.md index 10672412c65..02ffbc9ac18 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/true-false.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/true-false.md @@ -6,7 +6,7 @@ Toggle is a standard checkbox which saves either 0 or 1, depending on the checkb ## Data Type Definition Example -![True/False Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Checkbox-Data-Type-v10.png) +![True/False Data Type Definition](../built-in-property-editors/images/Checkbox-Data-Type-v10.png) The Toggle property has a setting which allows you to set the default value of the checkbox, either checked (true) or unchecked (false). @@ -14,7 +14,7 @@ It is also possible to define a label, that will be displayed next to the checkb ## Content Example -![No Edit Content Example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/Checkbox-Content.png) +![No Edit Content Example](../built-in-property-editors/images/Checkbox-Content.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/user-picker.md b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/user-picker.md index 3a854156332..003b6c22df7 100644 --- a/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/user-picker.md +++ b/13/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/user-picker.md @@ -8,11 +8,11 @@ The user picker opens a panel to pick a specific user from the Users section. Th ## Data Type Definition Example -![Media Picker Data Type Definition](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/User-Picker-DataType-v8.png) +![Media Picker Data Type Definition](../built-in-property-editors/images/User-Picker-DataType-v8.png) ## Content Example -![Member Picker Content](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/User-Picker-Content-v8.png) +![Member Picker Content](../built-in-property-editors/images/User-Picker-Content-v8.png) ## MVC View Example diff --git a/13/umbraco-cms/fundamentals/backoffice/variants.md b/13/umbraco-cms/fundamentals/backoffice/variants.md index 0628da4aba0..fb0bd3a2e61 100644 --- a/13/umbraco-cms/fundamentals/backoffice/variants.md +++ b/13/umbraco-cms/fundamentals/backoffice/variants.md @@ -30,7 +30,7 @@ How to use Language Variants in Umbraco To work with Language Variants you need to have more than one language enabled. This can be done from the `Settings` section: -![Adding a language](../../../../10/umbraco-cms/fundamentals/backoffice/images/languages\_v10.png) +![Adding a language](images/languages_v10.png) {% hint style="info" %} You will always have one default language but each language can be set to mandatory. @@ -44,11 +44,11 @@ Now that there are two languages to vary the content with, it needs to be enable 2. Open the **Permissions** page. 3. Toggle **Allow vary by culture**. -
+
To allow a property on the Document Type to be varied it will have to be enabled for the property: -![Allowing variance on properties](../../../../10/umbraco-cms/fundamentals/backoffice/images/varying-properties\_v10.png) +![Allowing variance on properties](images/varying-properties_v10.png) ## Working with Language Variants on content @@ -57,11 +57,11 @@ When you return to your content node you will notice two things: 1. At the top of the Content tree there will now be a dropdown so you can show the Content tree in the language of your choice. 2. To the right of the content name there is now a dropdown where you can select a language. You can also open a split view so you can see two languages at once. - ![Allowing variance on properties](../../../../10/umbraco-cms/fundamentals/backoffice/images/varying-content\_v10.png) + ![Allowing variance on properties](images/varying-content_v10.png) Each Property Editor that does not allow variants (an Invariant Property) will by default need to be unlocked in order to be edited. The lock exists to make it clear that this change will affect more languages. Since the value of the invariant properties are shared between all variants on the website. -![How an invariant property looks when it is locked](../../../../10/umbraco-cms/fundamentals/backoffice/images/invariant-property-locked.png) +![How an invariant property looks when it is locked](images/invariant-property-locked.png) {% hint style="info" %} Whether or not the lock is enabled on the invariant properties depends on the `AllowEditInvariantFromNonDefault` setting in the `appsettings.json` file. @@ -92,7 +92,7 @@ This can be controlled on a User Group level. All default User Groups, except th When "Allow access to all languages" is not checked, languages can be added and/or removed. This is to determine which variants the users in the user group have access to. -![Assign access to all or individual languages on th User Group](../../../../10/umbraco-cms/fundamentals/backoffice/images/Assign-Access-Languages.png) +![Assign access to all or individual languages on th User Group](images/Assign-Access-Languages.png) {% hint style="info" %} Even though the language permissions have been set, a user will still be able to view and browse all the language variations. The permission setting will ensure that only the added languages are editable by users of the User Group. diff --git a/13/umbraco-cms/fundamentals/code/debugging/README.md b/13/umbraco-cms/fundamentals/code/debugging/README.md index 317cc2df3dd..79b80950bd7 100644 --- a/13/umbraco-cms/fundamentals/code/debugging/README.md +++ b/13/umbraco-cms/fundamentals/code/debugging/README.md @@ -56,17 +56,17 @@ To display the profiler ensure that the configuration `Umbraco:CMS:Hosting:Debug Also, ensure your template calls `@Html.RenderProfiler()` as one of the last things. -
+
If you click 'Show Trivial' you can seen the kind of detail the MiniProfiler makes available to you about the execution path of your page: -
+
and any underlying SQL Statements that are being executed for a part of the execution: -
+
-![Underlying SQL query details](../../../../../10/umbraco-cms/fundamentals/code/debugging/images/v8-miniprofiler-sql-details.png) +![Underlying SQL query details](images/v8-miniprofiler-sql-details.png) ### Writing to the MiniProfiler @@ -113,7 +113,7 @@ public class RootController : RenderController and now in the profiler you can see: -![Show Trivial](../../../../../10/umbraco-cms/fundamentals/code/debugging/images/v8-miniprofiler-write.png) +![Show Trivial](images/v8-miniprofiler-write.png) ## Umbraco Productivity Tool - Chrome Extension @@ -121,7 +121,7 @@ If you are using the Google Chrome browser you can install this [Umbraco Product This will allow you to quickly switch between debugging with the MiniProfiler, Trace viewer and normal mode. -![Umbraco Productivity Tool](../../../../../10/umbraco-cms/fundamentals/code/debugging/images/chrome-tool.png) +![Umbraco Productivity Tool](images/chrome-tool.png) ## [Logging](logging.md) diff --git a/13/umbraco-cms/fundamentals/code/source-control.md b/13/umbraco-cms/fundamentals/code/source-control.md index 226242e7641..1813b1b7910 100644 --- a/13/umbraco-cms/fundamentals/code/source-control.md +++ b/13/umbraco-cms/fundamentals/code/source-control.md @@ -8,7 +8,7 @@ description: >- ## Umbraco Cloud -When you are running your site on Umbraco Cloud, source control is a part of the experience. Have a look at the ['Technical overview of an Umbraco Cloud Environment'](https://docs.umbraco.com/umbraco-cloud/getting-started/environments) and the information on ['Working with your Umbraco Cloud project'](https://docs.umbraco.com/umbraco-cloud/setup/set-up#working-with-your-umbraco-cloud-project) for a steer on Source/Version Control good practices. +When you are running your site on Umbraco Cloud, source control is a part of the experience. Have a look at the [Technical overview of an Umbraco Cloud Environment](https://docs.umbraco.com/umbraco-cloud/begin-your-cloud-journey/project-features/environments). Additionally, see the information on [Repositories in a Cloud Project](https://docs.umbraco.com/umbraco-cloud/explore-umbraco-cloud/technology-overview/repositories-in-a-cloud-project) for Source/Version Control good practices. ## Outside of Umbraco Cloud @@ -57,7 +57,7 @@ For most projects, this gitignore will be enough, and this article will not be a However, we will go through the different files in order to give you an insight into the anatomy of an Umbraco website and therefore which parts to include in version control and which parts not to. -![Typical set of Umbraco Project Folders](../../../../10/umbraco-cms/fundamentals/code/images/file-structure-v10.png) +![Typical set of Umbraco Project Folders](images/file-structure-v10.png) #### The Umbraco Folder diff --git a/13/umbraco-cms/fundamentals/data/adding-tabs.md b/13/umbraco-cms/fundamentals/data/adding-tabs.md index e835ad495e2..6f176fc7804 100644 --- a/13/umbraco-cms/fundamentals/data/adding-tabs.md +++ b/13/umbraco-cms/fundamentals/data/adding-tabs.md @@ -13,7 +13,7 @@ To add a tab, follow these steps: 1. Go to **Settings**. 2. Create or select a **Document Type/Media Type/Member Type** and click **Add tab**. - ![Add tab](../../../../10/umbraco-cms/fundamentals/data/images/Add-tab.png) + ![Add tab](images/Add-tab.png) {% hint style="info" %} When adding the first tab, all existing groups are automatically added to the tab. @@ -30,7 +30,7 @@ To reorder tabs, follow these steps: This is important when using compositions, as you want to always display a tab/group at a certain position by setting a manual numeric value. - ![Reorder tabs](../../../../10/umbraco-cms/fundamentals/data/images/Reorder-tabs.gif) + ![Reorder tabs](images/Reorder-tabs.gif) 5. Select **I am done reordering**. 6. Click **Save**. @@ -53,7 +53,7 @@ Converting a tab back into a group is not possible, as tabs can contain groups, Once you start adding tabs, you might see a “Generic” tab appear. This is done to hold groups and properties that are not assigned to a tab. For example, a group of properties coming from a composition that has no tab. In order to display the groups and properties correctly and have a solid data structure, they will be displayed under the “Generic” tab. -![Generic tab](../../../../10/umbraco-cms/fundamentals/data/images/Generic-tab.png) +![Generic tab](images/Generic-tab.png) To manage the **Generic** tab on a **Document Type/Media Type**: @@ -61,4 +61,4 @@ To manage the **Generic** tab on a **Document Type/Media Type**: 2. Click **Add tab** and enter the **Name** for the tab. All existing groups and properties are added to the tab. 3. Go to the **Document Type/Media Type**, the **Generic** tab will now be replaced by the tab from the composition. - ![Composition Add Tab](../../../../10/umbraco-cms/fundamentals/data/images/Composition-add-tab.gif) + ![Composition Add Tab](images/Composition-add-tab.gif) diff --git a/13/umbraco-cms/fundamentals/data/content-version-cleanup.md b/13/umbraco-cms/fundamentals/data/content-version-cleanup.md index 508abbcb778..ca33cc657a4 100644 --- a/13/umbraco-cms/fundamentals/data/content-version-cleanup.md +++ b/13/umbraco-cms/fundamentals/data/content-version-cleanup.md @@ -50,7 +50,7 @@ It is worth noting that whilst we delete rows, we do not shrink database files o It is possible to override the global settings per Document Type in the backoffice to prevent unwanted cleanup. This can be managed in the "permissions" Content App for each Document Type. -![Content Version Cleanup - Document Type overrides](../../../../10/umbraco-cms/fundamentals/data/images/per-doctype-override.png) +![Content Version Cleanup - Document Type overrides](images/per-doctype-override.png) ## Prevent cleanup of important versions @@ -58,7 +58,7 @@ It is possible to mark important content versions as "prevent cleanup" to ensure 1. Open rollback modal. -
+
2. Click **Prevent cleanup** button for each important version. -
+
diff --git a/13/umbraco-cms/fundamentals/data/creating-media/README.md b/13/umbraco-cms/fundamentals/data/creating-media/README.md index 9a1c8ab0465..37df7b48cc8 100644 --- a/13/umbraco-cms/fundamentals/data/creating-media/README.md +++ b/13/umbraco-cms/fundamentals/data/creating-media/README.md @@ -37,13 +37,13 @@ From the **Media** section in the Umbraco backoffice, you can add new media item * The Media item will be created based on the type you choose. * Upload the image or file, give the Media item a name, and click **Save**. -![Upload Media - Create Button](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/v9-media-types-upload-media.png) +![Upload Media - Create Button](images/v9-media-types-upload-media.png) * Use the Drag and drop feature to add your files to the Media section. * Umbraco will automatically detect the Media Type and create the Media item. * You can drop entire folder structures to recreate that same structure in the Media section. -![Upload Media - Media section](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/v9-media-types-media-section.png) +![Upload Media - Media section](images/v9-media-types-media-section.png) ### Add media through the Content section @@ -52,11 +52,11 @@ New media items can be added to your site without interrupting the content creat * Drag and drop the image(s) from your file explorer directly into the Media Picker property on the Content page. * Images added this way is automatically added to the user's start node in the Media section of the Umbraco backoffice. -![Drag and drop images directly into the content](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/upload-images-from-content.gif) +![Drag and drop images directly into the content](images/upload-images-from-content.gif) * Select the "+" icon to open the "Select media" dialog where you can add images from your file explorer directly or using drag and drop. -![Add images from the "Select media" dialog](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/add-image-from-dialog.gif) +![Add images from the "Select media" dialog](images/add-image-from-dialog.gif) ## Creating a folder @@ -88,7 +88,7 @@ By selecting multiple media items it is possible to perform bulk operations like To edit properties on a single media item, click the name of the item, which you will see once you hover over the item. -![Edit media item](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/hover-over.png) +![Edit media item](images/hover-over.png) From the top-right corner of the Media section, you can toggle between list and grid view. There is also an option to search for the items in the Media section. @@ -120,7 +120,7 @@ A Media Type is created in the **Settings** section using the Media Type editor. You will now see the Media Type editor. It is similar to the editor used for creating Document Types. -![Creating a Media Type](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/create-new-media-type\_new.png) +![Creating a Media Type](images/create-new-media-type_new.png) {% hint style="info" %} Having different folders for different Media Types makes it possible to restrict where media items can be created and added. Only allowing PDF uploads in a certain folder and employee images in another make it easier to keep the Media section organized. @@ -153,13 +153,13 @@ Follow the steps outlined below to add the properties to the Media Type: 6. Rename the editor _Employee Image Cropper_. 7. Add two new crops called _Thumbnail_ (200px x 350px) and _wideThumbnail_ (350px x 200px). -![Defining crops](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/new-data-type\_new.png) +![Defining crops](images/new-data-type_new.png) Name the remaining four properties _Width_, _Height_, _Size_, and _Type_, and give them the aliases as mentioned above. They should all use the **Label** editor. As mentioned before these properties will automatically be populated once an image has been uploaded. -![Adding properties](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/finished-new-media-type\_new.png) +![Adding properties](images/finished-new-media-type_new.png) ## Defining a Media Type folder @@ -171,7 +171,7 @@ Next up, we will create a folder to hold the employee images. We could use the e 4. Navigate to the **List view** tab. 5. Toggle the **Enable list view** option. -![Enable List View](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/toggle-listview.png) +![Enable List View](images/toggle-listview.png) The new folder should be allowed to be created in the root of the Media tree. We also need to allow only the Employee Image Media Type in our new folder. Both of these configurations can be set on the **Permissions** tab. @@ -180,7 +180,7 @@ The new folder should be allowed to be created in the root of the Media tree. We 3. Click **Add child** under **Employee Images**. 4. Select **Employee Image**. -![Permissions](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/select-child-nodes.png) +![Permissions](images/select-child-nodes.png) ### Creating the folder and media items @@ -190,7 +190,7 @@ The new folder should be allowed to be created in the root of the Media tree. We There are four options to add new media items to the folder, as you can see here: -![Uploading Media](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/four-ways-of-uploading.png) +![Uploading Media](images/four-ways-of-uploading.png) {% hint style="info" %} Uncheck the **Allow at root** option on the **Employee Images** Media Type to prevent the creation of multiple folders of this type. This will only disable the creation of new ones and not affect existing folders. diff --git a/13/umbraco-cms/fundamentals/data/creating-media/default-media-types.md b/13/umbraco-cms/fundamentals/data/creating-media/default-media-types.md index e768db5ad23..ceb277862a1 100644 --- a/13/umbraco-cms/fundamentals/data/creating-media/default-media-types.md +++ b/13/umbraco-cms/fundamentals/data/creating-media/default-media-types.md @@ -48,7 +48,7 @@ The `UmbracoMediaArticle` media type has the following properties: * `umbracoExtension` - Label (string) * `umbracoBytes` - Label (bigint) -![MediaArticle](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/umbraco-media-article-media-type.png) +![MediaArticle](images/umbraco-media-article-media-type.png) ### UmbracoMediaAudio @@ -58,7 +58,7 @@ The `UmbracoMediaAudio` media type has the following properties: * `umbracoExtension` Label (string) * `umbracoBytes` Label (bigint) -![MediaAudio](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/umbraco-media-audio-media-type.png) +![MediaAudio](images/umbraco-media-audio-media-type.png) ### UmbracoMediaVectorGraphics @@ -68,7 +68,7 @@ The `UmbracoMediaVectorGraphics` media type has the following properties: * `umbracoExtension` Label (string) * `umbracoBytes` Label (bigint) -![MediaVectorGraphics](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/umbraco-media-vector-graphicsmedia-type.png) +![MediaVectorGraphics](images/umbraco-media-vector-graphicsmedia-type.png) ### UmbracoMediaVideo @@ -78,7 +78,7 @@ The `UmbracoMediaVideo` media type has the following properties: * `umbracoExtension` - Label (string) * `umbracoBytes` - Label (bigint) -![MediaVideo](../../../../../10/umbraco-cms/fundamentals/data/creating-media/images/umbraco-media-video-media-type.png) +![MediaVideo](images/umbraco-media-video-media-type.png) {% hint style="info" %} You can also create localization files for Media Types. You can read more about this in the [Document Type Localization](../defining-content/document-type-localization.md) article. diff --git a/13/umbraco-cms/fundamentals/data/data-types/README.md b/13/umbraco-cms/fundamentals/data/data-types/README.md index fedf316c6c0..13dc0f53d8d 100644 --- a/13/umbraco-cms/fundamentals/data/data-types/README.md +++ b/13/umbraco-cms/fundamentals/data/data-types/README.md @@ -18,7 +18,7 @@ An example of this could be to have two dropdown Data Types both referencing the To create a new Data Type, go to the **Settings** section within the backoffice. Thereafter click the menu icon to the right of the **Data Types** folder and select **Create**->**New Data Type**. Name the Data Type - we'll call it _Dropdown Cities_. -![Dropdown List](../../../../../10/umbraco-cms/fundamentals/data/data-types/images/creating-a-data-type-v10.png) +![Dropdown List](images/creating-a-data-type-v10.png) * **Property Editor:** This is where you pick the Property Editor that our _Dropdown Cities_ Data Type will be referencing. Pick the **Dropdown** and now you will see the configuration options that are available for a Data Type referencing the Dropdown Property Editor. * **Enable multiple choice:** By enabling this it will be possible to select multiple options from the dropdown. @@ -36,7 +36,7 @@ Besides the Data Types that are available out of the box there are some addition To view the Data Type reference, go to the **Settings** section and expand the **Data Types** folder. Select the **Data Type** you wish to view the reference for and click the **Info** tab. -![Content Picker References](../../../../../10/umbraco-cms/fundamentals/data/data-types/images/viewing-data-type-reference.png) +![Content Picker References](images/viewing-data-type-reference.png) This gives you an overview of the Types that currently use the Data Type. diff --git a/13/umbraco-cms/fundamentals/data/data-types/default-data-types.md b/13/umbraco-cms/fundamentals/data/data-types/default-data-types.md index 438982e04d1..3909bb46f89 100644 --- a/13/umbraco-cms/fundamentals/data/data-types/default-data-types.md +++ b/13/umbraco-cms/fundamentals/data/data-types/default-data-types.md @@ -6,7 +6,7 @@ description: Learn about the default data types in Umbraco. Here's a list of the default Data Types that come installed with Umbraco. There are plenty more that you can create based on the installed [Property Editors](../../backoffice/property-editors/). -![Umbraco 9 Data Type List](../../../../../10/umbraco-cms/fundamentals/data/data-types/images/default-data-types-9.png) +![Umbraco 9 Data Type List](images/default-data-types-9.png) ## Approved Color diff --git a/13/umbraco-cms/fundamentals/data/dictionary-items.md b/13/umbraco-cms/fundamentals/data/dictionary-items.md index c38ebc54af5..8a06beddf93 100644 --- a/13/umbraco-cms/fundamentals/data/dictionary-items.md +++ b/13/umbraco-cms/fundamentals/data/dictionary-items.md @@ -8,7 +8,7 @@ Depending on how your site is set up, not all content is edited through the **Co Dictionary Items can be managed from the **Translation** section. Let's take a look at an example. In this example, we will translate "Welcome to Umbraco" from within the template and add it to the dictionary: -
+
## Adding a Dictionary Item @@ -18,11 +18,11 @@ To add a Dictionary Item: 2. Click on **Dictionary** in the **Translation** tree and select **Create**. 3. Enter the **Name** for the dictionary item. Let's say _Welcome_. -
+
4. Click **Create**. 5. Enter the values for the different language versions. -
+
6. Click **Save**. ### Grouping Dictionary Items @@ -38,7 +38,7 @@ To group dictionary items: 7. Click **Create**. 8. Enter the values for the different language versions. -
+
9. Click **Save**. ## Editing Dictionary Items @@ -85,7 +85,7 @@ To fetch dictionary values in the template, replace the text with the following @Umbraco.GetDictionaryValue("Welcome") ``` -![Rendering dictionary item](../../../../10/umbraco-cms/fundamentals/data/images/rendering-dictionary-item.png) +![Rendering dictionary item](images/rendering-dictionary-item.png) Alternatively, you can specify an `altText` which will be returned if the dictionary value is empty. @@ -93,7 +93,7 @@ Alternatively, you can specify an `altText` which will be returned if the dictio @Umbraco.GetDictionaryValueOrDefault("Welcome", "Another amazing day in Umbraco") ``` -![Rendering dictionary item](../../../../10/umbraco-cms/fundamentals/data/images/rendering-altvalue-dictionary-item.png) +![Rendering dictionary item](images/rendering-altvalue-dictionary-item.png) ## Importing and exporting Dictionary Items @@ -110,7 +110,7 @@ In some cases, you might want to use the same Dictionary Items on multiple Umbra This will download a `.udt` file which you can use to import the Dictionary items on another Umbraco website. -![Right-click the Dictionary Item to open the options menu with the Export feature](../../../../10/umbraco-cms/fundamentals/data/images/export.png) +![Right-click the Dictionary Item to open the options menu with the Export feature](images/export.png) ### Importing Dictionary Items @@ -126,7 +126,7 @@ This will download a `.udt` file which you can use to import the Dictionary item The Dictionary Items have now been added to your website. -![Review the Dictionary Items for import before confirming](../../../../10/umbraco-cms/fundamentals/data/images/import.png) +![Review the Dictionary Items for import before confirming](images/import.png) ## Using Dictionary Item in a Multilingual website diff --git a/13/umbraco-cms/fundamentals/data/relations.md b/13/umbraco-cms/fundamentals/data/relations.md index 22ac9052350..4058d9c9e64 100644 --- a/13/umbraco-cms/fundamentals/data/relations.md +++ b/13/umbraco-cms/fundamentals/data/relations.md @@ -6,7 +6,7 @@ description: What are relations, how to create and manage them Umbraco sections are built around the concept of 'trees' and there is an implicit relationship between items in a section tree. -![Parent, Siblings & Children](../../../../10/umbraco-cms/fundamentals/data/images/parent-siblings-children.png) +![Parent, Siblings & Children](images/parent-siblings-children.png) We refer to these relationships in the manner of a 'Family Tree' - eg, One content item might be the 'Parent' of some content items, and those content items would be referred to as the 'Children' of that parent. Items within the same branch of the tree can also be described as 'Ancestors' or 'Descendants' of an item, depending if they are above or below them in the depth of the tree. @@ -36,15 +36,15 @@ To create and use Relations in your Umbraco Website, you need to define a 'Relat Navigate to the **Settings** section in the Umbraco backoffice and you'll find the **Relation Types** folder in the Settings tree. -![Relation Types Tree](../../../../10/umbraco-cms/fundamentals/data/images/relation-types-tree.png) +![Relation Types Tree](images/relation-types-tree.png) If you expand the Relation Type tree, you can see that Umbraco 'ships' with some default Relation Types. These are used by the Umbraco backoffice to help deliver some key backoffice functionality: -![Default Relation Types](../../../../10/umbraco-cms/fundamentals/data/images/default-relation-types.png) +![Default Relation Types](images/default-relation-types.png) For example, there is a Relation Type that tracks when Media is picked in Content to be able to provide the functionality of warning an editor if they try to delete a Media Item that it is 'in use'. There is a Relation Type, to help 'restore' deleted content back to the place it was deleted from in the Recycle Bin. -![Create Relation Type](../../../../10/umbraco-cms/fundamentals/data/images/create-relation-type.png) +![Create Relation Type](images/create-relation-type.png) To create your new Relation Type, follow these steps: @@ -60,17 +60,17 @@ To create your new Relation Type, follow these steps: Example: For relating Members to their uploaded Images, we might create a 'Member Images' relation - ![Member Images](../../../../10/umbraco-cms/fundamentals/data/images/member-images.png) + ![Member Images](images/member-images.png) 6. Select **Is Dependency** as **Yes** if you wish this Relation Type to be used in Umbraco's 'tracking' functionality; that warns editors when trying to delete entities if they are 'used' in a Relation Type marked as 'Is Dependency' 7. Click **Create** and you'll see your new Relation Type created in the Relation Types folder. You can see the 'Alias' that you'll need to make note of when working with Relations. - ![Member Images](../../../../10/umbraco-cms/fundamentals/data/images/relation-alias.png) + ![Member Images](images/relation-alias.png) ## Viewing Relations To view one of the existing Relation Types, go to the **Relations** tab. It displays a long list of all the objects that have been related for this specific Relation Type. -![View Relations](../../../../10/umbraco-cms/fundamentals/data/images/view-relations.png) +![View Relations](images/view-relations.png) ## Creating Relations diff --git a/13/umbraco-cms/fundamentals/data/scheduled-publishing.md b/13/umbraco-cms/fundamentals/data/scheduled-publishing.md index 627f8fc1763..86808259fb5 100644 --- a/13/umbraco-cms/fundamentals/data/scheduled-publishing.md +++ b/13/umbraco-cms/fundamentals/data/scheduled-publishing.md @@ -10,17 +10,17 @@ Each document in Umbraco can be scheduled for publishing and unpublishing on a p You can find the options to do this click on the arrow next to the **Save and publish** button and pick **Schedule...** -![Scheduled publishing](../../../../10/umbraco-cms/fundamentals/data/images/schedule.png) +![Scheduled publishing](images/schedule.png) This will open a **Schedule Publishing** dialog where you can specify dates and time. -![Scheduled publishing](../../../../10/umbraco-cms/fundamentals/data/images/scheduled-publishing-8.png) +![Scheduled publishing](images/scheduled-publishing-8.png) ## Timezones Your server may be in a different timezone than where you are located. You are able to select a date and time in your timezone and Umbraco will make sure that the item gets published at that time. So, if you select 12PM then the item will be published at 12PM in the timezone you are in. This may be 8PM on the server, which is indicated when you select the date and time. -![Scheduled publishing](../../../../10/umbraco-cms/fundamentals/data/images/Publish-Timezone-Difference.jpg) +![Scheduled publishing](images/Publish-Timezone-Difference.jpg) If you are in the same timezone as the server, this message will not appear under the date picker. diff --git a/13/umbraco-cms/fundamentals/data/users.md b/13/umbraco-cms/fundamentals/data/users.md index c9641a42c0e..7a33f8fd2b7 100644 --- a/13/umbraco-cms/fundamentals/data/users.md +++ b/13/umbraco-cms/fundamentals/data/users.md @@ -46,13 +46,13 @@ You can also create your own custom User Groups and add properties and tabs as y Go to the **Users** section and select the **Groups** tab in the top-right corner. -![User Groups Tab](../../../../10/umbraco-cms/fundamentals/data/images/user-groups.png) +![User Groups Tab](images/user-groups.png) Select **Create group** and you will be taken to the **User Group** editor. Here you can define and edit the User Group through custom settings and properties. ### User Group Parameters -![Create User Group](../../../../10/umbraco-cms/fundamentals/data/images/create-user-group.png) +![Create User Group](images/create-user-group.png) Shows basic information about the User Group and settings for custom properties. @@ -69,7 +69,7 @@ Depending on which User Group a user is added to, each user has a set of permiss The available user permissions are defined under **Default Permissions** in the User group. -![Default permissions](../../../../10/umbraco-cms/fundamentals/data/images/default-permissions.png) +![Default permissions](images/default-permissions.png) ### Setting User Permissions diff --git a/13/umbraco-cms/fundamentals/design/partial-view-macro-files.md b/13/umbraco-cms/fundamentals/design/partial-view-macro-files.md index 0605a545123..0260c537233 100644 --- a/13/umbraco-cms/fundamentals/design/partial-view-macro-files.md +++ b/13/umbraco-cms/fundamentals/design/partial-view-macro-files.md @@ -14,7 +14,7 @@ A Macro is a reusable piece of functionality with some configuration options in You can create and edit Partial View Macro Files in the **Partial View Macro Files** folder from the **Settings** section of the Backoffice. -![Creating a new partial view macro file](../../../../10/umbraco-cms/fundamentals/design/images/creating-partial-view-macro-files.png) +![Creating a new partial view macro file](images/creating-partial-view-macro-files.png) In the **Create** menu, there are four options available: @@ -27,7 +27,7 @@ In the **Create** menu, there are four options available: To create a Partial View Macro File, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial View Macro Files** folder. Choose **Create**. Select **New partial view macro** and enter a Partial View Macro Filename. Enter the macro logic and click the **Save** button. You will now see the Partial View Macro File in the **Partial View Macro Files** folder. You also see the macro in the **Macros** folder in the Backoffice. -![Created partial view](../../../../10/umbraco-cms/fundamentals/design/images/created-partial-view-macro-file.png) +![Created partial view](images/created-partial-view-macro-file.png) By default, the Partial View Macro File is saved in the `Views/MacroPartials` folder. @@ -35,7 +35,7 @@ By default, the Partial View Macro File is saved in the `Views/MacroPartials` fo To create a Partial View Macro File without a macro, go to the **Settings** section in the Umbraco backoffice. Click right on the **Partial View Macro Files** folder. Choose **Create**. Select **New partial view macro (without macro)** and enter a Partial View Macro Filename. Enter the macro logic and click the **Save** button. You will now see _only_ the Partial View Macro File in the **Partial View Macro Files** folder in the Backoffice. -![Created partial view](../../../../10/umbraco-cms/fundamentals/design/images/created-partial-view-macro-file-without-macro.png) +![Created partial view](images/created-partial-view-macro-file-without-macro.png) By default, the Partial View Macro File is saved in the `Views/MacroPartials` folder. @@ -43,7 +43,7 @@ By default, the Partial View Macro File is saved in the `Views/MacroPartials` fo To create a Partial View Macro File from the snippet, go to the **Settings** section in the Umbraco backoffice. Click right on the **Partial Views Macro Files** folder. Choose **Create**. Select **New empty partial view macro from snippet**. Select the snippet you want to create a partial view for and enter a Partial View Macro Filename. The code snippet you selected is displayed in the backoffice editor. Click the **Save** button. You will now see the Partial View Macro File in the **Partial View Macro Files** folder. You also see the macro in the **Macros** folder in the Backoffice. -![Created partial view from snippet](../../../../10/umbraco-cms/fundamentals/design/images/created-partial-view-macro-file-from-snippet.png) +![Created partial view from snippet](images/created-partial-view-macro-file-from-snippet.png) By default, the partial view is saved in the `Views/MacroPartials` folder. Umbraco provides the following partial view macro snippets: @@ -72,7 +72,7 @@ By default, the partial view is saved in the `Views/MacroPartials` folder. Umbra To create a folder, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial Views Macro Files** folder. Choose **Create** and select **Folder**. Enter a folder name and click the **Create** button. -![Created folder](../../../../10/umbraco-cms/fundamentals/design/images/folder.png) +![Created folder](images/folder.png) ## Rendering a Partial View Macro File