Skip to content

Updated image paths to current folder #7515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 17, 2025
Merged

Updated image paths to current folder #7515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6b06bd
Updated image paths to current folder
eshanrnh Oct 17, 2025
3c8534e
Fixes broken links
eshanrnh Oct 17, 2025
73115af
Apply suggestion from @eshanrnh
eshanrnh Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions 13/umbraco-cms/extending/backoffice-tours.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,23 @@ 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.
* **group**

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.
* **allowDisable**

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.
Expand All @@ -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:

Expand Down Expand Up @@ -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.
Expand All @@ -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 %}

<figure><img src="../../../10/umbraco-cms/extending/images/element-v8.png" alt=""><figcaption></figcaption></figure>
<figure><img src="images/element-v8.png" alt=""><figcaption></figcaption></figure>

* **elementPreventClick**

Expand All @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions 13/umbraco-cms/extending/content-apps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-cms/extending/database.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-cms/extending/macro-parameter-editors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-cms/extending/package-manifest.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**.

<figure><img src="../../../10/umbraco-cms/extending/property-editors/images/JSON-schema.png" alt=""><figcaption></figcaption></figure>
<figure><img src="property-editors/images/JSON-schema.png" alt=""><figcaption></figcaption></figure>
* Select **Edit in settings.json** from the **Schemas** section.
* Add the following snippet in the `settings.json` file:

Expand Down
26 changes: 13 additions & 13 deletions 13/umbraco-cms/extending/packages/creating-a-package.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -96,31 +96,31 @@ 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

In this section, we will demonstrate how you can add metadata about the package and its creator(s).

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:

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.

Expand All @@ -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.
4 changes: 2 additions & 2 deletions 13/umbraco-cms/extending/packages/example-package-repository.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)



Expand Down
Binary file added 13/umbraco-cms/extending/packages/images/azuredevops-build.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 13/umbraco-cms/extending/packages/images/azuredevops-release.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions 13/umbraco-cms/extending/packages/installing-and-uninstalling-packages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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).

<img src="../../../../10/umbraco-cms/extending/packages/images/removing-content.png" alt="Backoffice - removing content" data-size="original">
<img src="images/removing-content.png" alt="Backoffice - removing content" data-size="original">

</details>

Expand Down Expand Up @@ -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")

<img src="../../../../10/umbraco-cms/extending/packages/images/removing-datatypes.png" alt="Backoffice - removing data types" data-size="original">
<img src="images/removing-datatypes.png" alt="Backoffice - removing data types" data-size="original">

</details>

Expand All @@ -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

<img src="../../../../10/umbraco-cms/extending/packages/images/removing-templates.png" alt="Backoffice - removing templates" data-size="original">
<img src="images/removing-templates.png" alt="Backoffice - removing templates" data-size="original">

</details>

Expand All @@ -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.

<img src="../../../../10/umbraco-cms/extending/packages/images/removing-partials.png" alt="Backoffice - removing partial views" data-size="original">
<img src="images/removing-partials.png" alt="Backoffice - removing partial views" data-size="original">

</details>

Expand Down Expand Up @@ -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.

Expand All @@ -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.

<img src="../../../../10/umbraco-cms/extending/packages/images/seochecker-app-plugins.png" alt="SEOChecker files in App Plugins" data-size="original">
<img src="images/seochecker-app-plugins.png" alt="SEOChecker files in App Plugins" data-size="original">

Removing _seochecker_ folder from `App_Plugins` will clean up the leftover backoffice section and dashboards.

Expand All @@ -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.
Loading