From 6ad92cf6a66de80324c3fc88e6f815d1a2b9c213 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Fri, 17 Oct 2025 10:35:44 +0200 Subject: [PATCH 1/4] Updated image paths to current folder --- .../fundamentals/design/partial-views.md | 8 ++-- .../fundamentals/design/rendering-content.md | 6 +-- .../design/stylesheets-javascript.md | 14 +++--- .../fundamentals/design/templates/README.md | 10 ++--- .../design/templates/named-sections.md | 8 ++-- .../fundamentals/setup/install/iis.md | 8 ++-- .../install/install-umbraco-with-vs-code.md | 36 +++++++-------- .../setup/install/unattended-install.md | 2 +- .../setup/install/visual-studio.md | 2 +- .../fundamentals/setup/server-setup/iis.md | 8 ++-- .../server-setup/load-balancing/README.md | 4 +- .../minor-upgrades-for-umbraco-7.md | 2 +- .../implementation/services/README.md | 2 +- .../angular/directives/umblayoutselector.md | 2 +- .../angular/directives/umbloadindicator.md | 2 +- .../services/eventsservice/changetitle.md | 4 +- 13/umbraco-cms/reference/debugging.md | 4 +- .../management/services/relationservice.md | 4 +- .../customizing-the-links-box.md | 2 +- .../routing/request-pipeline/README.md | 2 +- .../find-publishedcontent-and-template.md | 2 +- .../searching/examine/examine-management.md | 6 +-- .../security/sensitive-data-on-members.md | 6 +-- .../reference/templating/macros/README.md | 10 ++--- .../templating/macros/managing-macros.md | 8 ++-- .../templating/modelsbuilder/configuration.md | 2 +- .../add-microsoft-entra-id-authentication.md | 2 +- .../connecting-umbraco-forms-and-zapier.md | 36 +++++++-------- .../adding-language-variants.md | 8 ++-- .../article-parent-and-article-items.md | 18 ++++---- .../creating-master-template-part-1.md | 12 ++--- .../creating-master-template-part-2.md | 6 +-- ...ng-your-first-template-and-content-node.md | 8 ++-- ...displaying-the-document-type-properties.md | 12 ++--- .../document-types.md | 4 +- .../getting-started.md | 4 +- .../creating-a-custom-dashboard/README.md | 18 ++++---- .../creating-a-property-editor/README.md | 6 +-- .../creating-a-property-editor/part-3.md | 2 +- .../tutorials/creating-an-xml-site-map.md | 6 +-- .../creating-custom-views-for-blocklist.md | 24 +++++----- 13/umbraco-cms/tutorials/custom-error-page.md | 4 +- .../copying-a-page.md | 8 ++-- .../creating-saving-and-publishing-content.md | 28 ++++++------ .../deleting-and-restoring-pages.md | 28 ++++++------ .../editing-existing-content.md | 10 ++--- .../finding-content.md | 2 +- .../logging-in-and-out.md | 4 +- .../moving-a-page.md | 8 ++-- .../ordering-pages.md | 8 ++-- .../umbraco-interface.md | 8 ++-- .../media-management/cropping-images.md | 4 +- .../media-management/working-with-folders.md | 18 ++++---- .../working-with-images-and-files.md | 12 ++--- .../tips-and-tricks/audit-trail.md | 4 +- .../tips-and-tricks/notifications.md | 4 +- .../preview-pane-responsive-view.md | 2 +- .../tips-and-tricks/working-with-folders.md | 2 +- .../version-management/comparing-versions.md | 4 +- .../rollback-to-a-previous-version.md | 4 +- ...ting-started-with-entity-framework-core.md | 2 +- .../tutorials/images/Content-block-list.png | Bin 0 -> 98598 bytes .../tutorials/multilanguage-setup.md | 42 +++++++++--------- 13/umbraco-cms/tutorials/multisite-setup.md | 8 ++-- .../lessons/1-customize-the-starter-kit.md | 4 +- .../README.md | 4 +- 66 files changed, 276 insertions(+), 276 deletions(-) create mode 100644 13/umbraco-cms/tutorials/images/Content-block-list.png diff --git a/13/umbraco-cms/fundamentals/design/partial-views.md b/13/umbraco-cms/fundamentals/design/partial-views.md index ffd51527b0b..4357183d863 100644 --- a/13/umbraco-cms/fundamentals/design/partial-views.md +++ b/13/umbraco-cms/fundamentals/design/partial-views.md @@ -10,7 +10,7 @@ A Partial View (`.cshtml` file) is a regular view that can be used multiple time You can create and edit partial views in the **Partial Views** folder from the **Settings** section of the Backoffice. -![Creating a new partial view](../../../../10/umbraco-cms/fundamentals/design/images/creating-partial-view.png) +![Creating a new partial view](images/creating-partial-view.png) In the **Create** menu, there are three options available: @@ -22,7 +22,7 @@ In the **Create** menu, there are three options available: To create a partial view, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial Views** folder. Choose **Create**. Select **New empty partial view** and enter a partial view name and click the **Save** button. You will now see the partial view markup in the backoffice editor. -![Created partial view](../../../../10/umbraco-cms/fundamentals/design/images/created-partial-view.png) +![Created partial view](images/created-partial-view.png) By default, the partial view is saved in the `Views/Partials` folder in the solution. @@ -30,7 +30,7 @@ By default, the partial view is saved in the `Views/Partials` folder in the solu To create a partial view from the snippet, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial Views** folder. Choose **Create**. Select **New empty partial view from snippet**. Select the snippet you want to create a partial view for and enter a partial view name. The code snippet you selected is displayed in the backoffice editor. Click the **Save** button. -![Created partial view from snippet](../../../../10/umbraco-cms/fundamentals/design/images/created-partial-view-from-snippet.png) +![Created partial view from snippet](images/created-partial-view-from-snippet.png) By default, the partial view is saved in the `Views/Partials` folder in the solution. Umbraco provides the following partial view snippets: @@ -54,7 +54,7 @@ By default, the partial view is saved in the `Views/Partials` folder in the solu To create a folder, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial Views** folder. Choose **Create**. Select **Folder**. Enter a folder name and click the **Create** button. -![Created folder](../../../../10/umbraco-cms/fundamentals/design/images/Partial-Views-folder.png) +![Created folder](images/Partial-Views-folder.png) ## Rendering a Partial View diff --git a/13/umbraco-cms/fundamentals/design/rendering-content.md b/13/umbraco-cms/fundamentals/design/rendering-content.md index e8af49920d9..777dcd2d649 100644 --- a/13/umbraco-cms/fundamentals/design/rendering-content.md +++ b/13/umbraco-cms/fundamentals/design/rendering-content.md @@ -87,7 +87,7 @@ To use the `fallback` type, add the `@using Umbraco.Cms.Core.Models.PublishedCon * Each language can optionally be provided with a fall-back language, that will be used when content is not populated for the language requested and the appropriate overload parameters are provided. * It is possible to chain these language fall-backs, so requesting content for Portuguese, could fall-back to Spanish and then on to English. - ![Configuring fall-back languages](../../../../10/umbraco-cms/fundamentals/design/images/language-fallback.png) + ![Configuring fall-back languages](images/language-fallback.png) ## Query content @@ -104,9 +104,9 @@ You can do this by querying content relative to your current page in template vi ``` -You can use the Query Builder in the template editor to build more advanced queries. ![Query button](../../../../10/umbraco-cms/fundamentals/design/images/button-v8.png) +You can use the Query Builder in the template editor to build more advanced queries. ![Query button](images/button-v8.png) -![Query helper](../../../../10/umbraco-cms/fundamentals/design/images/query-v9.png) +![Query helper](images/query-v9.png) ### More information diff --git a/13/umbraco-cms/fundamentals/design/stylesheets-javascript.md b/13/umbraco-cms/fundamentals/design/stylesheets-javascript.md index ce269421e44..337bdc38516 100644 --- a/13/umbraco-cms/fundamentals/design/stylesheets-javascript.md +++ b/13/umbraco-cms/fundamentals/design/stylesheets-javascript.md @@ -10,7 +10,7 @@ description: >- You can create and edit stylesheets in the Stylesheets folder in the Settings section of the Backoffice. -![Creating a new stylesheet](../../../../10/umbraco-cms/fundamentals/design/images/1-creating-stylesheet.png) +![Creating a new stylesheet](images/1-creating-stylesheet.png) In the Create menu, these options are available: @@ -24,15 +24,15 @@ It is currently not possible to use any CSS preprocessor (such as Syntactically After creating a new stylesheet, you would work with it as you would with templates or JavaScript files - using the built-in backoffice text editor. When you're working with stylesheets, you also have access to the Rich Text Editor, which allows you to create CSS styles and get a real-time preview. -![Stylesheet Rich Text Editor (RTE)](../../../../10/umbraco-cms/fundamentals/design/images/2-rte-editor.png) +![Stylesheet Rich Text Editor (RTE)](images/2-rte-editor.png) The rules you create in the Rich Text Editor section will carry over to the Code tab. -![Stylesheet RTE tab](../../../../10/umbraco-cms/fundamentals/design/images/3-rte-editor-p2.png) ![Stylesheet Code tab](../../../../10/umbraco-cms/fundamentals/design/images/3-rte-editor-p3.png) +![Stylesheet RTE tab](images/3-rte-editor-p2.png) ![Stylesheet Code tab](images/3-rte-editor-p3.png) To reference your newly included stylesheet in a template file, navigate to Templates, pick the template you like (css files are usually referenced in the layout or home templates) and link to it with the `link` tag. -![Linking CSS in template](../../../../10/umbraco-cms/fundamentals/design/images/4-link-css-v9.png) +![Linking CSS in template](images/4-link-css-v9.png) By default, the stylesheets will be saved in the `wwwroot/css` folder in the solution. To reference them you can use either of the methods used in the above screenshot. @@ -58,13 +58,13 @@ If your RTE is styled differently on the frontend of the site, the backoffice st To create and edit JavaScript files in the Backoffice, head on over to the Scripts folder in the Settings section of the Backoffice. -![Creating a new JavaScript](../../../../10/umbraco-cms/fundamentals/design/images/8-create-js.png) +![Creating a new JavaScript](images/8-create-js.png) From here you can add a new JavaScript file, or a new folder. Add a new JavaScript file and write your code: -![Sample JS script](../../../../10/umbraco-cms/fundamentals/design/images/9-myscript.png) +![Sample JS script](images/9-myscript.png) Then, navigate to the template where you would like to include your JS file. @@ -72,7 +72,7 @@ Then, navigate to the template where you would like to include your JS file. ``` -![Reference the script in template](../../../../10/umbraco-cms/fundamentals/design/images/10-reference-script-v9.png) +![Reference the script in template](images/10-reference-script-v9.png) By default all JavaScript files will be stored in the `wwwroot/scripts` folder in the solution. diff --git a/13/umbraco-cms/fundamentals/design/templates/README.md b/13/umbraco-cms/fundamentals/design/templates/README.md index d25cfe4b849..fc9f4e09a98 100644 --- a/13/umbraco-cms/fundamentals/design/templates/README.md +++ b/13/umbraco-cms/fundamentals/design/templates/README.md @@ -12,13 +12,13 @@ By default, all document types should have a template attached - but in case you Open the **Settings** section inside the Umbraco backoffice and right-click the **Templates** folder. Choose **Create**. Enter a template name and click the **Save** button. You will now see the default template markup in the backoffice template editor. -![Created template](../../../../../10/umbraco-cms/fundamentals/design/templates/images/create-template-v8.png) +![Created template](images/create-template-v8.png) ## Allowing a Template on a Document Type To use a template on a document, you must first allow it on the content's type. Open the Document Type you want to use the template, go to the Templates tab and select the template under the **Allowed Templates** section. -![Allowing template](../../../../../10/umbraco-cms/fundamentals/design/templates/images/allow-template-v8.png) +![Allowing template](images/allow-template-v8.png) ## Inheriting a Master Template @@ -40,7 +40,7 @@ A template can inherit content from a master template by using the ASP.NET views We then create a new template called **textpage** and in the template editor, click on the **Master Template** button and set its master template to the template called **MasterView**: -![Inherit template](../../../../../10/umbraco-cms/fundamentals/design/templates/images/inherit-template-v8.png) +![Inherit template](images/inherit-template-v8.png) This changes the `Layout`value in the template markup, so **textpage** looks like this: @@ -103,7 +103,7 @@ By default, when rendering a named section, the section is not mandatory. To mak @RenderSection("Head", true) ``` -![Create partial](../../../../../10/umbraco-cms/fundamentals/design/templates/images/render-named-sections-v10.png) +![Create partial](images/render-named-sections-v10.png) On your child page template call `@section Head {}` and then type your markup that will be pushed into the Master Template: @@ -123,7 +123,7 @@ Another way to reuse HTML is to use partial views - which are small reusable vie Like templates, create a partial view, by right-clicking **Partial Views** and selecting **Create**. You can then either create an empty partial view or create a partial view from a snippet. -![Create partial](../../../../../10/umbraco-cms/fundamentals/design/templates/images/create-partial-v8.png) +![Create partial](images/create-partial-v8.png) The created partial view can now be injected into any template by using the `@Html.Partial()` method like so: diff --git a/13/umbraco-cms/fundamentals/design/templates/named-sections.md b/13/umbraco-cms/fundamentals/design/templates/named-sections.md index 25173de3278..31cf7d44a0a 100644 --- a/13/umbraco-cms/fundamentals/design/templates/named-sections.md +++ b/13/umbraco-cms/fundamentals/design/templates/named-sections.md @@ -31,10 +31,10 @@ To define a Named Section, follow these steps: 1. Go to **Settings**. 2. Navigate to a template and click **Sections**. -
+
3. Select **Define a named section** and enter the **Section Name**. -
+
4. Click **Submit**. ## Render a Name Section @@ -52,9 +52,9 @@ To render a Named Section, follow these steps: 1. Go to **Settings**. 2. Navigate to a template and click **Sections**. -
+
3. Select **Render a named section** and enter the **Section Name**. -
+
4. \[Optional] Select **Section is mandatory**. This means that the child templates need to have the named section defined for them to work. 5. Click **Submit**. diff --git a/13/umbraco-cms/fundamentals/setup/install/iis.md b/13/umbraco-cms/fundamentals/setup/install/iis.md index c6ce71b85c1..6e8f548d97b 100644 --- a/13/umbraco-cms/fundamentals/setup/install/iis.md +++ b/13/umbraco-cms/fundamentals/setup/install/iis.md @@ -12,11 +12,11 @@ The guide will assume you already have IIS configured and know your way around i First, you need to ensure you have "Development time IIS support installed". To check this, go to the Visual Studio installer, click modify and check on the right side under "ASP.NET and web development": -![Checking the IIS module exists](../../../../../10/umbraco-cms/fundamentals/setup/install/images/iis-module.png) +![Checking the IIS module exists](images/iis-module.png) Once that is installed you should set up a new IIS site - and make sure to add the hostname to your hosts file as well. Here is my setup for an example: -![IIS site example](../../../../../10/umbraco-cms/fundamentals/setup/install/images/iis-site.png) +![IIS site example](images/iis-site.png) {% hint style="info" %} For the path you want to point it at the root of your site - where the `.csproj` file is. @@ -106,8 +106,8 @@ You can add a new profile called IIS, and point it at your local domain. Here it At this point IIS will be added to the launch profiles, and you can run the site from Visual Studio by choosing IIS in the dropdown: -![Launch profiles](../../../../../10/umbraco-cms/fundamentals/setup/install/images/launchprofiles.png) +![Launch profiles](images/launchprofiles.png) And finally the site is running from your local IIS: -![Local IIS site](../../../../../10/umbraco-cms/fundamentals/setup/install/images/voila.png) +![Local IIS site](images/voila.png) diff --git a/13/umbraco-cms/fundamentals/setup/install/install-umbraco-with-vs-code.md b/13/umbraco-cms/fundamentals/setup/install/install-umbraco-with-vs-code.md index 14f07175abc..2cd70fe70da 100644 --- a/13/umbraco-cms/fundamentals/setup/install/install-umbraco-with-vs-code.md +++ b/13/umbraco-cms/fundamentals/setup/install/install-umbraco-with-vs-code.md @@ -1,42 +1,42 @@ # Install using Visual Studio Code -Follow these steps to set up an Umbraco project with VS Code. The benefit of using VS Code is that it is super quick to get up and running. +Follow these steps to set up an Umbraco project with Visual Studio Code. The benefit of using Visual Studio Code is that it is super quick to get up and running. -## Installing and setting up VS Code +## Installing and setting up Visual Studio Code -1. Go to [https://code.visualstudio.com/](https://code.visualstudio.com/) and download VS Code for free. -2. Once installed, launch VS Code. -3. Click the extensions menu at the bottom on the left side. Then search for **C#** and install it. +1. Go to [https://code.visualstudio.com/](https://code.visualstudio.com/) and download Visual Studio Code for free. +2. Once installed, launch Visual Studio Code. +3. Click the extensions menu at the bottom on the left side. Then search for **C#** and install it. - ![VS Code install extension](../../../.gitbook/assets/Marketplace.jpg) + ![Visual Studio Code install extension](../../../.gitbook/assets/Marketplace.jpg) ## Creating your Umbraco project Follow the [Templates Guide](install-umbraco-with-templates.md) to create your project folder. -## Configure VS Code to run the Umbraco project +## Configure Visual Studio Code to run the Umbraco project -Open your project folder in VS Code, your project will look something like this: +Open your project folder in Visual Studio Code, your project will look something like this: ![Fresh Umbraco installation](../../../.gitbook/assets/VS_Code_Explorer.png) -Now we need to tell VS Code how to run your project. +Now we need to tell Visual Studio Code how to run your project. Open the command palette, you can use the shortcut `Ctrl+Shift+P`, and type in `Tasks: Configure` and select the `Tasks: Configure Task` option: -![Configure task option](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/ConfigureTask.png) +![Configure task option](images/VsCode/ConfigureTask.png) Select "Create task.json from template" -![Create task from template](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/TaskJsonFromTemplate.png) +![Create task from template](images/VsCode/TaskJsonFromTemplate.png) Now select ".NET Core" as your template. -![Create .NET Core Template](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/NetcoreTemplate.png) +![Create .NET Core Template](images/VsCode/NetcoreTemplate.png) -After this VS Code will have created a folder called `.vscode` that contains a file called `tasks.json`, it's this file that tells VS Code how to build your project. +Visual Studio Code creates a folder called `.vscode` that contains a file called `tasks.json`. The `tasks.json` file tells Visual Studio Code how to build your project. -Now that we've told VS Code how to build your project, we need to tell it how to launch it. VS Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link. +Now that we've told Visual Studio Code how to build your project, we need to tell it how to launch it. Visual Studio Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link. ![Creating launch.json file](../../../.gitbook/assets/Create_LaunchJson_file.jpg) @@ -56,7 +56,7 @@ Now you'll see a green play button appear with a dropdown where ".NET Core Launc

Green Play button options

-If you navigate to the Files section, a new `launch.json` file is created in the `.vscode` folder. When you press F5, the `launch.json` file tells VS Code to build your project, run it, and then open a browser . +If you navigate to the Files section, a new `launch.json` file is created in the `.vscode` folder. When you press F5, the `launch.json` file tells Visual Studio Code to build your project, run it, and then open a browser .
@@ -64,7 +64,7 @@ With that, you're ready to run the project! Press F5, or click the little green ## Umbraco Web Installer -This section continues from where we left off but covers the installation and configuration of Umbraco inside your web browser when you run Umbraco for the first time. +This section covers the installation and configuration of Umbraco inside your web browser when you run Umbraco for the first time. You will see the install screen where you will need to fill in some data before Umbraco can be installed. @@ -72,10 +72,10 @@ You will see the install screen where you will need to fill in some data before When the installer is done, you will be logged into the backoffice. -
+
Congratulations, you have installed an Umbraco site! {% hint style="info" %} -You can log into your Umbraco site by entering the following into your browser: http://yoursite.com/umbraco/. +You can log into your Umbraco site by entering the following into your browser: `http://yoursite.com/umbraco/`. {% endhint %} diff --git a/13/umbraco-cms/fundamentals/setup/install/unattended-install.md b/13/umbraco-cms/fundamentals/setup/install/unattended-install.md index a3db27e4c71..3f6dd58c7bf 100644 --- a/13/umbraco-cms/fundamentals/setup/install/unattended-install.md +++ b/13/umbraco-cms/fundamentals/setup/install/unattended-install.md @@ -91,7 +91,7 @@ After completing the steps above you can now initialize the installation by boot Once it has completed, you should see the following when visiting the frontend of the site. -
+
## Configuration options diff --git a/13/umbraco-cms/fundamentals/setup/install/visual-studio.md b/13/umbraco-cms/fundamentals/setup/install/visual-studio.md index fee530a8797..a9c4810dc77 100644 --- a/13/umbraco-cms/fundamentals/setup/install/visual-studio.md +++ b/13/umbraco-cms/fundamentals/setup/install/visual-studio.md @@ -37,7 +37,7 @@ For more information check the first 2 steps of [Install Umbraco with .NET CLI]( Go to **File > New > Project** and search for `Umbraco` in the _Search for templates_ field. -![The Create a new project dialog in Visual Studio.](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VS/create-project.png) +![The Create a new project dialog in Visual Studio.](images/VS/create-project.png) Once you select **Umbraco Project (Umbraco HQ)** navigate to the next step by clicking _Next_. diff --git a/13/umbraco-cms/fundamentals/setup/server-setup/iis.md b/13/umbraco-cms/fundamentals/setup/server-setup/iis.md index 32973b9ea69..eb5ffe361c2 100644 --- a/13/umbraco-cms/fundamentals/setup/server-setup/iis.md +++ b/13/umbraco-cms/fundamentals/setup/server-setup/iis.md @@ -10,7 +10,7 @@ description: Information on hosting Umbraco on IIS * Restart IIS (`net stop was /y` followed by `net start w3svc`) * Create a site in IIS and ensure that the .NET Common Language Runtime (CLR) version is set to `No Managed Code` for the Application Pool. -![IIS Application Pool](../../../../../10/umbraco-cms/fundamentals/setup/server-setup/images/iis-app-pool-core.png) +![IIS Application Pool](images/iis-app-pool-core.png) ### Publish website for manual deployment to IIS @@ -24,7 +24,7 @@ Alternatively, you can use the File Transfer Protocol (FTP) publishing in Visual In Visual Studio, select the Umbraco web project in the _Solution Explorer_ and choose the _Publish..._ command. -![Publish...](../../../../../10/umbraco-cms/fundamentals/setup/server-setup/images/contextmenu-publish-command.jpg) +![Publish...](images/contextmenu-publish-command.jpg) {% hint style="info" %} @@ -38,14 +38,14 @@ You can use the [IIS Release task in Azure DevOps](https://learn.microsoft.com/e In the _Management_ section you find the _Configuration Editor_: -![IIS Website Configuration](../../../../../10/umbraco-cms/fundamentals/setup/server-setup/images/iis-core-website-config.png) +![IIS Website Configuration](images/iis-core-website-config.png) One section is of particular interest: * In the first, left hand dropdown list (_Section:_) choose: `system.webServer/aspNetCore` section. * In the second, right hand dropdown list (_From:_) choose: `ApplicationHost.config `. This ensures your settings will be stored in a machine specific file. The configuration files might end in a public repository and should not contain sensitive data like Connection Strings or Simple Mail Transfer Protocol (SMTP) configuration with username and password. Additionally, by default the configuration file will be overwritten during each publish processes. -![IIS Configuration Editor](../../../../../10/umbraco-cms/fundamentals/setup/server-setup/images/iis-environment-variables.png) +![IIS Configuration Editor](images/iis-environment-variables.png) Find the line named _environmentVariables_ and open the dialog to add environment variables. These work similar to the _launchSettings_. You can define `ASPNETCORE_ENVIRONMENT` and create an `appSettings.[ASPNETCORE_ENVIRONMENT].json` file. Or even better create environment variables for sensitive settings like passwords. There are some differences to `launchSettings.json` configuration: diff --git a/13/umbraco-cms/fundamentals/setup/server-setup/load-balancing/README.md b/13/umbraco-cms/fundamentals/setup/server-setup/load-balancing/README.md index 3a6f15bfa15..2f6418388f3 100644 --- a/13/umbraco-cms/fundamentals/setup/server-setup/load-balancing/README.md +++ b/13/umbraco-cms/fundamentals/setup/server-setup/load-balancing/README.md @@ -46,7 +46,7 @@ In order to understand how to host your site it is best to understand how Umbrac The following diagram shows the data flow/communication between each item in the environment: -![Umbraco flexible load balancing diagram](../../../../../../10/umbraco-cms/fundamentals/setup/server-setup/load-balancing/images/flexible-load-balancing-v9.png) +![Umbraco flexible load balancing diagram](images/flexible-load-balancing-v9.png) The process is as follows: @@ -81,7 +81,7 @@ Each instance will be allocated a role by the automatic server role election pro For example, In the following diagram the node **f02.mysite.local** is the elected "Scheduling server". In order for scheduling to work it needs to be able to send requests to itself, the Backoffice server, the internal load balancer or the public address. The address used by the "Scheduling server" is called the "umbracoApplicationUrl". -![Umbraco flexible load balancing diagram](../../../../../../10/umbraco-cms/fundamentals/setup/server-setup/load-balancing/images/flexible-load-balancing-scheduler-v9.png) +![Umbraco flexible load balancing diagram](images/flexible-load-balancing-scheduler-v9.png) By default, Umbraco will set the "umbracoApplicationUrl" to the address made by the first accepted request when the AppDomain starts. It is assumed that this address will be a DNS address that the server can resolve. diff --git a/13/umbraco-cms/fundamentals/setup/upgrading/version-specific/minor-upgrades-for-umbraco-7.md b/13/umbraco-cms/fundamentals/setup/upgrading/version-specific/minor-upgrades-for-umbraco-7.md index 45600da6366..1bd6147bd97 100644 --- a/13/umbraco-cms/fundamentals/setup/upgrading/version-specific/minor-upgrades-for-umbraco-7.md +++ b/13/umbraco-cms/fundamentals/setup/upgrading/version-specific/minor-upgrades-for-umbraco-7.md @@ -40,7 +40,7 @@ You will be asked to overwrite your web.config file and the files in /config, ma For some inexplicable reason, the installation will fail if you click "No to All" (in the GUI) or answer "L" (in the package manager console) to the question: "File 'Web.config' already exists in project 'MySite'. Do you want to overwrite it?" So make sure to only answer "**No**" (in the GUI) or "**N**" (in the package manager console). -![File conflict dialog with a web.config file in conflict](<../../../../../../10/umbraco-cms/fundamentals/setup/upgrading/images/nuget-overwrite-dialog (1) (1).png>) ![File conflict console message with multiple files in conflict](<../../../../../../10/umbraco-cms/fundamentals/setup/upgrading/images/nuget-upgrade-overwrite (1).png>) +![File conflict dialog with a web.config file in conflict](images/nuget-overwrite-dialog.png) ![File conflict console message with multiple files in conflict](images/nuget-upgrade-overwrite.png) We will overwrite the `web.config` file. We'll back it up so don't worry. You can find the backup in `App_Data\NuGetBackup\20140320-165450\`. The `20140320-165450` bit is the date and time when the backup occurred, which varies. You can then merge your config files and make sure they're up to date. diff --git a/13/umbraco-cms/implementation/services/README.md b/13/umbraco-cms/implementation/services/README.md index 6d4b46919ed..fefd23b7053 100644 --- a/13/umbraco-cms/implementation/services/README.md +++ b/13/umbraco-cms/implementation/services/README.md @@ -538,7 +538,7 @@ public class BlogPostController : RenderController You can generate this ctor in Visual Studio by using either ctrl + . or alt + enter when your cursor is on the base class: -
+
#### Using the SiteService inside a View diff --git a/13/umbraco-cms/reference/angular/directives/umblayoutselector.md b/13/umbraco-cms/reference/angular/directives/umblayoutselector.md index 59eb9b108b0..71e9b817831 100644 --- a/13/umbraco-cms/reference/angular/directives/umblayoutselector.md +++ b/13/umbraco-cms/reference/angular/directives/umblayoutselector.md @@ -2,7 +2,7 @@ When you have a list of items, you can use the `umb-layout-selector` directive to let users toggle between different layouts. For instance, in Umbraco's media archive, users can select between a grid-based layout (thumbnails) and a list-based layout (table). -![Example of the layout selector](../../../../../10/umbraco-cms/reference/angular/directives/images/umbLayoutSelector.png) +![Example of the layout selector](images/umbLayoutSelector.png) The directive has three attributes: diff --git a/13/umbraco-cms/reference/angular/directives/umbloadindicator.md b/13/umbraco-cms/reference/angular/directives/umbloadindicator.md index 41689bac5a8..7938cd19223 100644 --- a/13/umbraco-cms/reference/angular/directives/umbloadindicator.md +++ b/13/umbraco-cms/reference/angular/directives/umbloadindicator.md @@ -2,7 +2,7 @@ Many web sites and web applications use a form of load indicator to indicate a busy state to the user. Throughout the backoffice, Umbraco uses three animated circles as a load indicator - eg. as shown below: -![Example of the load indicator](../../../../../10/umbraco-cms/reference/angular/directives/images/umbLoadIndicator.gif) +![Example of the load indicator](images/umbLoadIndicator.gif) Umbraco internally does this via the `` directive, which you can also use in your own views for the backoffice. diff --git a/13/umbraco-cms/reference/angular/services/eventsservice/changetitle.md b/13/umbraco-cms/reference/angular/services/eventsservice/changetitle.md index c27f8241e47..6da4951dc04 100644 --- a/13/umbraco-cms/reference/angular/services/eventsservice/changetitle.md +++ b/13/umbraco-cms/reference/angular/services/eventsservice/changetitle.md @@ -13,11 +13,11 @@ When the user navigates through the site there is some logic which sets the defa * The current section the user is in * The deployment environment -![Example of the default title](../../../../../../10/umbraco-cms/reference/angular/services/eventsservice/images/defaultview.png) +![Example of the default title](images/defaultview.png) The original title of the page is based on the section being edited and the host name. -![Example of the page title showing edit blo](../../../../../../10/umbraco-cms/reference/angular/services/eventsservice/images/editblog.png) +![Example of the page title showing edit blo](images/editblog.png) The title to use will then be prefixed to the original title of the page. diff --git a/13/umbraco-cms/reference/debugging.md b/13/umbraco-cms/reference/debugging.md index a6af593be03..32b7155262d 100644 --- a/13/umbraco-cms/reference/debugging.md +++ b/13/umbraco-cms/reference/debugging.md @@ -14,7 +14,7 @@ Microsoft and Visual Studio have introduced a new debugging technology called 'S 2. In the **General** window, uncheck `Enable Just My Code` option and check `Enable Source Link support` option. 3. Click **OK** to save the changes. - ![Visual Studio 2019 Debug Settings for SourceLink](../../../10/umbraco-cms/reference/images/VS19-enable-sourcelink.png) + ![Visual Studio 2019 Debug Settings for SourceLink](images/VS19-enable-sourcelink.png) ## What is SourceLink? @@ -29,7 +29,7 @@ To read about SourceLink, you can take a look at the following websites: * Create a new `.NET 5.0` Framework blank/empty website. * Install the latest Umbraco CMS 9.0+ Nuget Packages from Nuget.org * Create an IComposer or similar code in your new site/SLN that you want to F11/Step Into. [Example Code Snippet to try with SourceLink](debugging.md#example-code-snippet-to-try-with-sourcelink) -* Prompt will appear and the original source code file is fetched directly from GitHub. ![Visual Studio 2019 SourceLink dialog](../../../10/umbraco-cms/reference/images/VS19-sourcelink-prompt.png) +* Prompt will appear and the original source code file is fetched directly from GitHub. ![Visual Studio 2019 SourceLink dialog](images/VS19-sourcelink-prompt.png) * How far can you `F11`, also known as `Step Into`, and go down the rabbit hole of the Umbraco CMS source code? ### Example Code Snippet to try with SourceLink diff --git a/13/umbraco-cms/reference/management/services/relationservice.md b/13/umbraco-cms/reference/management/services/relationservice.md index 521fe154e9c..54a99d1e0f4 100644 --- a/13/umbraco-cms/reference/management/services/relationservice.md +++ b/13/umbraco-cms/reference/management/services/relationservice.md @@ -355,7 +355,7 @@ public class RelationComposer : IUserComposer If I know `Save and Publish` my `Products` node I get the following result: -![Relations](../../../../../10/umbraco-cms/reference/management/services/images/relations.PNG) +![Relations](images/relations.PNG) Cool! Now let us try and fetch the data from an API. @@ -419,7 +419,7 @@ public class Relation Browsing `/umbraco/api/relations/getbyrelationtypealias?alias=homesick` now returns the following: -![Relations](../../../../../10/umbraco-cms/reference/management/services/images/relations-api.PNG) +![Relations](images/relations-api.PNG) {% hint style="info" %} diff --git a/13/umbraco-cms/reference/notifications/editormodel-notifications/customizing-the-links-box.md b/13/umbraco-cms/reference/notifications/editormodel-notifications/customizing-the-links-box.md index db6c52bcd4a..636d52125f9 100644 --- a/13/umbraco-cms/reference/notifications/editormodel-notifications/customizing-the-links-box.md +++ b/13/umbraco-cms/reference/notifications/editormodel-notifications/customizing-the-links-box.md @@ -2,7 +2,7 @@ For a content item, Umbraco will show a **Links** box within the **Info** content app. By default, this box will show one or more links to content item. -![image](../../../../../10/umbraco-cms/reference/notifications/editormodel-notifications/images/properties-info-app.png) +![image](images/properties-info-app.png) With the `SendingContentNotification` event, we can manipulate the links in the `Urls` property. This could be by replacing it with custom links although a URL provider would be more suitable: diff --git a/13/umbraco-cms/reference/routing/request-pipeline/README.md b/13/umbraco-cms/reference/routing/request-pipeline/README.md index 212435cea18..da1b18a9be2 100644 --- a/13/umbraco-cms/reference/routing/request-pipeline/README.md +++ b/13/umbraco-cms/reference/routing/request-pipeline/README.md @@ -12,7 +12,7 @@ _This section describes what the Umbraco Request Pipeline is. It explains how Um The request pipeline is the process of building up the URL for a node and resolving a request to a specified node. It ensures that the right content is sent back. -![what is the pipeline](../../../../../10/umbraco-cms/reference/routing/request-pipeline/images/what-is-the-pipeline.png) +![what is the pipeline](images/what-is-the-pipeline.png) ### Outbound vs Inbound diff --git a/13/umbraco-cms/reference/routing/request-pipeline/find-publishedcontent-and-template.md b/13/umbraco-cms/reference/routing/request-pipeline/find-publishedcontent-and-template.md index a22f4037f34..3d98680b04b 100644 --- a/13/umbraco-cms/reference/routing/request-pipeline/find-publishedcontent-and-template.md +++ b/13/umbraco-cms/reference/routing/request-pipeline/find-publishedcontent-and-template.md @@ -54,7 +54,7 @@ The followed method is called on the "PublishedContentRequest.PrepareRequest()" #### HandleWildcardDomains() -![](../../../../../10/umbraco-cms/reference/routing/request-pipeline/images/culture-and-hostnames.png) +![](images/culture-and-hostnames.png) * Finds the deepest wildcard domain between * Domain root (or top) diff --git a/13/umbraco-cms/reference/searching/examine/examine-management.md b/13/umbraco-cms/reference/searching/examine/examine-management.md index e95b7faa5c4..782c6cf725d 100644 --- a/13/umbraco-cms/reference/searching/examine/examine-management.md +++ b/13/umbraco-cms/reference/searching/examine/examine-management.md @@ -6,7 +6,7 @@ _Provides an overview of the available Examine functionality available directly The Umbraco backoffice allows you to view details about your Examine indexes and searchers - all in one place. You can see which fields are being indexed, rebuild the indexes if there's a problem, and test keywords to see what results would be returned. -![Examine Management within the Developer section](../../../../../10/umbraco-cms/reference/searching/examine/images/overview-examine.png) +![Examine Management within the Developer section](images/overview-examine.png) The Examine Management section, accessible from within the Settings section, is split into two sections: Indexers and Searchers. @@ -18,7 +18,7 @@ From the Indexers section, you can view details about each Examine index current This section allows you to see the list of properties on the index that you selected, including how many documents and fields are currently being stored. -![Rebuild Index within Examine Management](../../../../../10/umbraco-cms/reference/searching/examine/images/External-indexes-v10.png) +![Rebuild Index within Examine Management](images/External-indexes-v10.png) Within the Indexers it displays the details for the index provider as well. @@ -38,6 +38,6 @@ You can see an example here how to configure an Examine searcher in the [Examine ### Search field -![Search field for custom searcher within Examine Management](../../../../../10/umbraco-cms/reference/searching/examine/images/examine-management-search-field.png) +![Search field for custom searcher within Examine Management](images/examine-management-search-field.png) The search field allows you to enter a search term and receive results back from the searcher in question. You can confirm if your query is working as expected. Matching results are returned in their raw format, with the score, document ID and Name being returned. The score is calculated by Examine depending on how closely the individual results matched the search term. diff --git a/13/umbraco-cms/reference/security/sensitive-data-on-members.md b/13/umbraco-cms/reference/security/sensitive-data-on-members.md index 3b857b25678..3cdda9803bb 100644 --- a/13/umbraco-cms/reference/security/sensitive-data-on-members.md +++ b/13/umbraco-cms/reference/security/sensitive-data-on-members.md @@ -14,7 +14,7 @@ Every new Umbraco installation ships with a default set of User Groups. One of t Any users who are not part of the Sensitive Data User Group, will not be able to see the data in the properties that are marked as sensitive. Instead, they will see a generic message: "_This value is hidden. If you need access to view this value please contact your website administrator._" -![Sensitive data hidden](../../../../10/umbraco-cms/reference/security/images/sensitive-data-hidden-v8.png) +![Sensitive data hidden](images/sensitive-data-hidden-v8.png) While not part of the Sensitive Data User Group it is also not possible to export members or member data. @@ -25,7 +25,7 @@ Follow these steps in order to grant a user access to sensitive data: 3. Select the **Groups** menu in the top-right corner. 4. Choose the **Sensitive data** group. -![Sensitive data user group](../../../../10/umbraco-cms/reference/security/images/sensitive-data-user-group-v8.png) +![Sensitive data user group](images/sensitive-data-user-group-v8.png) 5. Click **Add** in the **Users** box on the right. 6. Select the users you want to give access to the sensitive data. @@ -55,4 +55,4 @@ Follow the steps below to mark data as sensitive. When the **Is sensitive data** option is enabled, the value and data in the property will only be visible to the users with access to sensitive data. -![Update member type](../../../../10/umbraco-cms/reference/security/images/update-member-type-v8.png) +![Update member type](images/update-member-type-v8.png) diff --git a/13/umbraco-cms/reference/templating/macros/README.md b/13/umbraco-cms/reference/templating/macros/README.md index 89f68c31501..eb926c870d1 100644 --- a/13/umbraco-cms/reference/templating/macros/README.md +++ b/13/umbraco-cms/reference/templating/macros/README.md @@ -14,25 +14,25 @@ You can use macros in your templates, like MVC Partial views - however they diff For example imagine adding an Image Gallery within a rich text editor, and at the point of insertion 'picking' the images to display. -![Insert Image Carousel](../../../../../10/umbraco-cms/reference/templating/macros/images/image-carousel-macro-v8.PNG) +![Insert Image Carousel](images/image-carousel-macro-v8.PNG) Define the parameters -![Define the parameters](../../../../../10/umbraco-cms/reference/templating/macros/images/macro-parameter-editor-v8.png) +![Define the parameters](images/macro-parameter-editor-v8.png) Using in a Rich Text Area A Rich Text Editor should be enabled with macros in the toolbar to allow inserting macros. -![Enable macro toolbar in Rich Text Area](../../../../../10/umbraco-cms/reference/templating/macros/images/rte-macro.png) +![Enable macro toolbar in Rich Text Area](images/rte-macro.png) Rich Text Area with macro toolbar option -![Macro toolbar option in Rich Text Area](../../../../../10/umbraco-cms/reference/templating/macros/images/rte-macro-toolbar.png) +![Macro toolbar option in Rich Text Area](images/rte-macro-toolbar.png) Insert the macro into a Rich Text Area -![Insert the macro into a Rich Text Area](../../../../../10/umbraco-cms/reference/templating/macros/images/pick-images-for-macro-example-v8.png) +![Insert the macro into a Rich Text Area](images/pick-images-for-macro-example-v8.png) The same implementation logic can be used in lots of different places on your site, and the editor can customise the output by choosing different parameters. diff --git a/13/umbraco-cms/reference/templating/macros/managing-macros.md b/13/umbraco-cms/reference/templating/macros/managing-macros.md index 55b57ef6b3d..82bc78af52e 100644 --- a/13/umbraco-cms/reference/templating/macros/managing-macros.md +++ b/13/umbraco-cms/reference/templating/macros/managing-macros.md @@ -10,7 +10,7 @@ There are a couple of ways to create a macro. The first way is to manually create a macro, by right-clicking the Macro folder in the Settings section: -![Create macro](../../../../../10/umbraco-cms/reference/templating/macros/images/create-macro-tree-8.png) +![Create macro](images/create-macro-tree-8.png) Give it a name in the dialog screen, and you'll be presented with the macro editor. @@ -18,7 +18,7 @@ Give it a name in the dialog screen, and you'll be presented with the macro edit The second option is to create the macro through **Partial View Macro Files**. -![Partial View Macro files dialog](../../../../../10/umbraco-cms/reference/templating/macros/images/partial-view-macro-files-8.png) +![Partial View Macro files dialog](images/partial-view-macro-files-8.png) The dialog provides the following options: @@ -31,7 +31,7 @@ The dialog provides the following options: The macro editor view comes with a set of configuration options. -![Macro editor](../../../../../10/umbraco-cms/reference/templating/macros/images/macro-editor-8.png) +![Macro editor](images/macro-editor-8.png) ### Macro partial view @@ -63,7 +63,7 @@ Macro parameters can be used to change the output of a macro at runtime. Macro p The macro parameter dialog looks like this: -![Macro editor](../../../../../10/umbraco-cms/reference/templating/macros/images/macro-parameters-v8.png) +![Macro editor](images/macro-parameters-v8.png) Here you can add/modify/remove macro parameters. diff --git a/13/umbraco-cms/reference/templating/modelsbuilder/configuration.md b/13/umbraco-cms/reference/templating/modelsbuilder/configuration.md index 64434afcb67..7b2280654fa 100644 --- a/13/umbraco-cms/reference/templating/modelsbuilder/configuration.md +++ b/13/umbraco-cms/reference/templating/modelsbuilder/configuration.md @@ -46,4 +46,4 @@ Models Builder ships with a dashboard in the _Settings_ section of Umbraco's bac * Provides a way to generate models (in SourceCodeManual mode only) * Reports the last error (if any) that would have prevented models from being properly generated -![Models Builder Dashboard](../../../../../10/umbraco-cms/reference/templating/modelsbuilder/images/ModelsBuilderDashboard-v9.png) +![Models Builder Dashboard](images/ModelsBuilderDashboard-v9.png) diff --git a/13/umbraco-cms/tutorials/add-microsoft-entra-id-authentication.md b/13/umbraco-cms/tutorials/add-microsoft-entra-id-authentication.md index 6d8990ff55a..4fef1246041 100644 --- a/13/umbraco-cms/tutorials/add-microsoft-entra-id-authentication.md +++ b/13/umbraco-cms/tutorials/add-microsoft-entra-id-authentication.md @@ -227,4 +227,4 @@ Learn more about this in the [Dependency Injection](../reference/using-ioc.md) a 5. Build the project. 6. Run the website. -![Entra ID Login Screen](<../../../10/umbraco-cms/reference/security/images/AD\_Login\_Members (1).png>) +![Entra ID Login Screen](images/AD_Login_Members.png) diff --git a/13/umbraco-cms/tutorials/connecting-umbraco-forms-and-zapier.md b/13/umbraco-cms/tutorials/connecting-umbraco-forms-and-zapier.md index 308c87f4fea..14a82c337aa 100644 --- a/13/umbraco-cms/tutorials/connecting-umbraco-forms-and-zapier.md +++ b/13/umbraco-cms/tutorials/connecting-umbraco-forms-and-zapier.md @@ -28,19 +28,19 @@ Here is what you will need for this tutorial: The first step is to generate the webhook URL that your Umbraco Forms has to send data to. This is done by logging into your Zapier account and clicking “Make a Zap” -![Zapier make a zap](../../../10/umbraco-cms/tutorials/images/zapierMakeZap.png) +![Zapier make a zap](images/zapierMakeZap.png) The next thing to do is pick an app in the “When this happens…” box. This is your trigger and determines when your Zap will start. Select the “Webhooks by Zapier” app -![Zapier find webhooks trigger](../../../10/umbraco-cms/tutorials/images/zapierFindWebhooksTrigger.png) +![Zapier find webhooks trigger](images/zapierFindWebhooksTrigger.png) Now select the “Catch Hook” trigger event and click continue. -![Zapier webhooks catch hook](../../../10/umbraco-cms/tutorials/images/zapierWebhooksCatchHook.png) +![Zapier webhooks catch hook](images/zapierWebhooksCatchHook.png) Now you will get a “Custom Webhook URL” that you will need for your Umbraco Forms. -![Zapier custom webhook URL](../../../10/umbraco-cms/tutorials/images/zapierCustomWebhookURL.png) +![Zapier custom webhook URL](images/zapierCustomWebhookURL.png) Copy this URL and have it ready for later. You will need it when you set up your Umbraco Forms workflow. Now we have to go into the Umbraco backoffice, but keep the Zap you created open. We will get back to it later to finish setup. @@ -58,15 +58,15 @@ Once you have set up your form, it is time to add the “Send form to URL” wor Go to your form in the backoffice and click on “configure workflow”. In the “On Submit” workflow you click “Add workflow”. -![Umbraco Forms Add Workflow](../../../10/umbraco-cms/tutorials/images/umbracoFormsAddWorkflow.png) +![Umbraco Forms Add Workflow](images/umbracoFormsAddWorkflow.png) Now choose the workflow “Send form to URL”. -![Umbraco Forms Send form to URL workflow](../../../10/umbraco-cms/tutorials/images/umbracoFormsSendFormToURLWorkflow.png) +![Umbraco Forms Send form to URL workflow](images/umbracoFormsSendFormToURLWorkflow.png) After giving the workflow a descriptive name, you paste in the webhook URL from Zapier in the “Url” field and choose POST in “Method”. Leave “Fields”, “User” and “Password” blank. -![Umbraco Forms Send form to URL webhook](../../../10/umbraco-cms/tutorials/images/umbracoFormsSendFormToURLWebhook.png) +![Umbraco Forms Send form to URL webhook](images/umbracoFormsSendFormToURLWebhook.png) Now your workflow is ready. Submit your changes and save your form. @@ -78,7 +78,7 @@ To set up field mapping and actions in Zapier your form needs an entry. If this Here is the form and the fields that were submitted for this tutorial. -![Umbraco Forms Fields Submitted](../../../10/umbraco-cms/tutorials/images/umbracoFormsFieldsSubmitted.png) +![Umbraco Forms Fields Submitted](images/umbracoFormsFieldsSubmitted.png) Once you have an entry in your form you are done in the Umbraco backoffice. Now it is time to go back to Zapier and finish setting up your automation. @@ -86,11 +86,11 @@ Once you have an entry in your form you are done in the Umbraco backoffice. Now In Zapier, open up the Zap you started setting up in the first step of this guide. In that Zap we are now ready to continue the setup of our webhook trigger. Start by clicking continue and get to the “Find Data” step. -![Zapier Find Webhook Data](../../../10/umbraco-cms/tutorials/images/zapierFindWebhookData.png) +![Zapier Find Webhook Data](images/zapierFindWebhookData.png) Now click on “Test trigger”. If there is an entry to the form it should look like this. -![Zapier Webhook Data Found](../../../10/umbraco-cms/tutorials/images/zapierWebhookDataFound.png) +![Zapier Webhook Data Found](images/zapierWebhookDataFound.png) Now you have data to further map in your Zap and can continue choosing the action for the Zap. If Zapier does not find any data, try to submit a new form entry. @@ -110,38 +110,38 @@ Once you have done these steps it is time to finish the setup of the Zap. First thing to do is find the “Google Sheets” app in the “Do this…” action. -![Zapier Google Sheets App](../../../10/umbraco-cms/tutorials/images/zapierGoogleSheetsApp.png) +![Zapier Google Sheets App](images/zapierGoogleSheetsApp.png) Now choose the Action event “Create a spreadsheet row” and continue. -![Zapier Google Sheets Action Event](../../../10/umbraco-cms/tutorials/images/zapierGoogleSheetsActionEvent.png) +![Zapier Google Sheets Action Event](images/zapierGoogleSheetsActionEvent.png) Now you need to choose the Google Sheets account you want to connect to. If you have not set this up yet, you will be prompted to do so. Once connected you choose that account and click continue. -![Zapier Google Sheets Account](../../../10/umbraco-cms/tutorials/images/zapierGoogleSheetsAccount.png) +![Zapier Google Sheets Account](images/zapierGoogleSheetsAccount.png) Now you can choose which Google Drive to use, find the spreadsheet and choose the worksheet that you want to send the data to. After doing so, you will get a list of possible fields that you can post your data to. -![Zapier Google Sheets Possible Fields](../../../10/umbraco-cms/tutorials/images/zapierGoogleSheetsPossibleFields.png) +![Zapier Google Sheets Possible Fields](images/zapierGoogleSheetsPossibleFields.png) The fields showing are all columns in your spreadsheet that have a name in row 1. To map the input data to the different fields in the spreadsheet follow these steps: * Select the “Type or insert…” field. * Choose which data to put in the field. -![Zapier Google Sheets Webhook Data](../../../10/umbraco-cms/tutorials/images/zapierGoogleSheetsWebhookData.png) +![Zapier Google Sheets Webhook Data](images/zapierGoogleSheetsWebhookData.png) The data that was caught by the webhook will all be dynamic and you will want to pick the fields here. That way, when a new entry comes in, the field will dynamically insert the data they submitted for that field. -![Zapier Google Sheets Data Mapped](../../../10/umbraco-cms/tutorials/images/zapierGoogleSheetsDataMapped.png) +![Zapier Google Sheets Data Mapped](images/zapierGoogleSheetsDataMapped.png) Once you have mapped all of the fields it is time to click “continue” and test if the data is sent correctly to our spreadsheet. -![Zapier Google Sheets Test](../../../10/umbraco-cms/tutorials/images/zapierGoogleSheetsTest.png) +![Zapier Google Sheets Test](images/zapierGoogleSheetsTest.png) Click “Test & Continue” and wait for it to process. Once it is done, go to the spreadsheet you created and see if the data is there. -![Google Sheets Data](../../../10/umbraco-cms/tutorials/images/googleSheetsData.png) +![Google Sheets Data](images/googleSheetsData.png) Tada! Now your Zap is ready and can be activated to automatically add form entries to Google Sheets. To activate the Zap you go back to your Zap and change the toggle from “Off” to “On”. Now it will be waiting for new form entries and be ready to send them to Google Sheets. diff --git a/13/umbraco-cms/tutorials/creating-a-basic-website/adding-language-variants.md b/13/umbraco-cms/tutorials/creating-a-basic-website/adding-language-variants.md index ea4aeb10d41..cb78908e959 100644 --- a/13/umbraco-cms/tutorials/creating-a-basic-website/adding-language-variants.md +++ b/13/umbraco-cms/tutorials/creating-a-basic-website/adding-language-variants.md @@ -50,7 +50,7 @@ To add culture and hostnames, follow these steps: You will find a language dropdown above your content tree. If it's not there, you might need to refresh the page: -![Language of Content Tree](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/language-content-tree.png) +![Language of Content Tree](images/language-content-tree.png) In the language dropdown, you will find all the languages that you have installed for your site. You can switch between them to update the content variations for each language. @@ -58,15 +58,15 @@ To add language variants to the content, follow these steps: 1. Go to the **Home Page** node. You will find a language dropdown next to the title at the top: - ![Language Variant dropdown](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/language-dropdown.png) + ![Language Variant dropdown](images/language-dropdown.png) 2. Click the dropdown and hover over the new language. You will see an **Open in Splitview** option will appear. - ![Open Language in Splitview](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/open-in-splitview.png) + ![Open Language in Splitview](images/open-in-splitview.png) 3. Click **Open in Splitview**. In this splitview, we can see the content node with each language side by side. You may notice that the bodytext is greyed out - this is because we haven't checked the **Allow vary by culture** checkbox. - ![Splitview editing](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/splitview-editing.png) + ![Splitview editing](images/splitview-editing.png) 4. Enter the **Name** for your content node and the **Page Title** in the new language. 5. Click **Save and Publish**. The **Ready to Publish** window opens providing the option to publish in one or more languages. diff --git a/13/umbraco-cms/tutorials/creating-a-basic-website/article-parent-and-article-items.md b/13/umbraco-cms/tutorials/creating-a-basic-website/article-parent-and-article-items.md index cc1a570d075..4d388a1a663 100644 --- a/13/umbraco-cms/tutorials/creating-a-basic-website/article-parent-and-article-items.md +++ b/13/umbraco-cms/tutorials/creating-a-basic-website/article-parent-and-article-items.md @@ -12,7 +12,7 @@ To create **Articles Main** Document Type, follow these steps: 2. Select **...** next to the **Document Types** in the **Settings** tree. 3. Click **Document Type with Template**. - ![Document Type with template](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/Document_type_with_template.png) + ![Document Type with template](images/Document_type_with_template.png) 4. Enter a **Name** for the **Document Type**. Let's call it _Articles Main_. 5. Let's add two fields with the following specifications: @@ -30,7 +30,7 @@ To create **Articles Item** Document Type, follow these steps: 2. Select **...** next to the **Document Types** in the **Settings** tree. 3. Click **Document Type with Template**. - ![Document Type with template](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/Document_type_with_template.png) + ![Document Type with template](images/Document_type_with_template.png) 4. Enter a **Name** for the **Document Type**. Let's call it _Articles Item_. 5. Let's add two fields with the following specifications: @@ -52,7 +52,7 @@ To update **Articles Main** Document Type permissions: 4. Navigate to the **Articles Main** Document Type and go to the **List View** tab. 5. Toggle **Enable List view** and click **Save**. - ![Enabling List View](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-44-list-view-enabled.png) + ![Enabling List View](images/figure-44-list-view-enabled.png) To update **Articles Item** Document Type permissions: @@ -77,7 +77,7 @@ To add a content node: 5\. Click \*\*Create Articles Item\*\* to add two child nodes called \*\*Article 1\*\*, \*\*Article 2\*\*, and click \*\*Save and Publish\*\*. -

Content Tree with Articles

+

Content Tree with Articles

## Updating the Template @@ -94,13 +94,13 @@ To update the **Articles Item** template, follow these steps: 8. Replace the static text within the `

` tags (around line 13) with the Model.Value reference to _**articlesTitle**_. 9. Replace the static text within the `
` tags (from line 24 to 30) with the Model.Value reference to _**articlesBodyText**_. - ![Articles Main Template](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/articles-main-template-v9.png) + ![Articles Main Template](images/articles-main-template-v9.png) 10. Define a query for all articles below the `

` tag (around line 32) of the `` section. - ![Query Builder](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/query-builder-v9.png) + ![Query Builder](images/query-builder-v9.png) 11. You can set conditions to get specific articles or decide the order of the articles. For the purpose of this guide, we'll use the following parameters: - ![Query parameters](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/query-parameters.png) + ![Query parameters](images/query-parameters.png) 12. If you've set the correct parameters, you will get a preview of the items being selected with the query. Click **Submit**, and you will see a code snippet has been added to your template. It will look similar to this: ```html @@ -140,9 +140,9 @@ To update the **Articles Item** template, follow these steps: 8. Replace the static text within the `

` tags (around line 14) with the Model.Value reference to _**articleTitle**_. 9. Replace the static text within the `
` tags (from line 26 to 41) with the Model.Value reference to _**articleContent**_. - ![Articles Item Template](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/articles-item-template-v9.png) + ![Articles Item Template](images/articles-item-template-v9.png) 10. Click **Save**. Check your browser, you should now see something similar to the screen below. -![Finished Articles section](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/article-main-frontend.png) +![Finished Articles section](images/article-main-frontend.png) diff --git a/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md b/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md index f59400459b6..6e2c43091a2 100644 --- a/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md +++ b/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md @@ -11,7 +11,7 @@ To create a new master template: 3. Select the **...** next to the **Templates** folder and click **Create**. 4. A template opens up in the content editor. Enter a **Name** for the master template. Let's call it _Master_. -
+
5. Click **Save**. ## Using the Master Template @@ -23,7 +23,7 @@ To use the master template: 3. Select `Master Template: No Master`. The Master template dialog opens on the right-side of the browser. 4. Select the template called **Master**. This will update the Razor code section from `Layout = null;` to `Layout = "Master.cshtml";` -
+
5. Click **Save**. ## Updating Templates With the New Master Template @@ -37,20 +37,20 @@ To update templates with the new master template, follow these steps: 3. Go to **Master** and open the **Homepage** template. 4. For this tutorial, we will cut everything from the `` (around line 9) to the end of the `
` tag (around line 44) which is the `header` and `navigation` of the site to the master template. -
+
5. Click **Save**. 6. Go to the **Master** template and paste this HTML markup after the closing curly brace (around line 9). -
+
7. At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code _**@RenderBody()**_ at the end. -
+
8. Click **Save**. 9. Repeat the same process for the footer content: * Go to **Settings > Templates > Master > Homepage template** and cut everything from the `` tag (around line 110) to the end of the `` tag (around line 124) and click **Save**. * Go to the **Master** template and paste this HTML markup after the _**@RenderBody**_ field we've added. -
+
* Click **Save**. Now we've done a lot of work. When we refresh our localhost page, nothing has changed. If you have a compilation error you have perhaps mistyped **@RenderBody()**. diff --git a/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md b/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md index f6036351f49..fb5620de1bf 100644 --- a/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md +++ b/13/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md @@ -26,7 +26,7 @@ Let's create a content-only contact page where we can provide a title and some r | Content | Page Title | pageTitle | Textstring | | Content | Body Text | bodyText | Rich Text Editor | - ![Simple Content Page Template with Data Fields](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-35-contact-us-template-with-data-fields-v8.png) + ![Simple Content Page Template with Data Fields](images/figure-35-contact-us-template-with-data-fields-v8.png) 8. Click **Save**. 9. Go to **Templates** to view your _Simple Content Page_ template that was created automatically with the Document Type. 10. Select the **Simple Content Page** template and then select **Master** as the **Master template**. @@ -64,7 +64,7 @@ To update the Document Type permissions: 3. Select **Add child** in the **Allowed child node types**. The **Choose child node** dialog opens. 4. Select **Simple Content Page** and click **Save**. -
+
### Creating the content node @@ -102,7 +102,7 @@ To view the **Contact Us** Page: 3. Go to the **Info** tab. 4. Click the link to view the page. -
+
## Using Document Type Properties from the Homepage diff --git a/13/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md b/13/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md index e79eac904ac..31b0888b7af 100644 --- a/13/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md +++ b/13/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md @@ -8,7 +8,7 @@ To edit the template: 2. Expand the **Templates** folder in the **Templating** section of the tree. You should see a template titled _**HomePage**_. 3. Open the template. It will contain a little bit of _**Razor code**_. - ![Home Page Template](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-13-empty-homepage-template-v9.png) + ![Home Page Template](images/figure-13-empty-homepage-template-v9.png) 4. Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in. * We are using files from the [Custom Umbraco Template](https://umbra.co/Umbracotemplate). 5. Open the **Custom Umbraco Template** folder and copy the contents of **index.html**. @@ -27,9 +27,9 @@ To add a content node: 1. Go to **Content**. 2. Select **...** next to the **Content** headline in the tree. Select **HomePage**. - * If you cannot see the content node, check that \[Settings] > \[Document Types] > \[HomePage] > \[Permissions tab] > \[Allow at root] is checked. The Home Page opens in the content editor. + * If you cannot see the content node, check that **Settings > Document Types > HomePage > Permissions tab > Allow at root** is checked. The Home Page opens in the content editor. - ![Home Page Content Node](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-15-create-a-homepage-v8.png) + ![Home Page Content Node](images/figure-15-create-a-homepage-v8.png) 3. Enter the name for the content node. We are going to call this _Homepage_. * The name will show up in the node list and will be used to create a URL for the page. Try to keep it short but descriptive. 4. Enter the following details: @@ -52,4 +52,4 @@ The default Umbraco page will now be gone and we'll now see a bare, unstyled pag If you see a blank page, check if the template is entered and remember to save it. {% endhint %} -![An Unstyled Homepage](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-16-unstyled-homepage-v8.png) +![An Unstyled Homepage](images/figure-16-unstyled-homepage-v8.png) diff --git a/13/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md b/13/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md index e8e59e3b688..df1f6f3dd9c 100644 --- a/13/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md +++ b/13/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md @@ -4,7 +4,7 @@ You might have noticed that the content we've added to the homepage is not being Let’s look at our template and identify where the content should be displayed. -![Where our Data Properties Content Should be Output](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-17-where-our-data-fields-go-v8.png) +![Where our Data Properties Content Should be Output](images/figure-17-where-our-data-fields-go-v8.png) The top arrow in this image is the _Page Title_ and the bottom arrow is the _Body Text_. The Footer is all the way at the bottom of the page. @@ -16,23 +16,23 @@ To set the Document Type properties: 2. Select **Templates** in the **Templating** section, and open the **Homepage** template. 3. Scroll down to the `` section (around line 46) and highlight the text `“Welcome - UmbracoTV”` (around line 49). - ![Replace page Title value](<../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-18-replace-hardcoded-text-with-umbraco-page-field-v9 (1) (1) (1) (1).png>) + ![Replace page Title value](images/figure-18-replace-hardcoded-text-with-umbraco-page-field-v9.png) 4. Click **Insert** and select **Value**. 5. Select **pageTitle** field from the drop-down list. - ![Page Title field](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-19-umbraco-page-field-v9.png) + ![Page Title field](images/figure-19-umbraco-page-field-v9.png) 6. Click **Submit**. 7. Repeat the same process for the content between the `
` tags (around line 61 to 78): * Highlight the content as shown in the figure. - ![Replace Body Text value](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-20-replace-bodytext-with-page-field-v9.png) + ![Replace Body Text value](images/figure-20-replace-bodytext-with-page-field-v9.png) * Click **Insert** and select **Value**. * Select **bodyText** field from the drop-down list. * Click **Submit**. 8. Repeat the same process for the content in the `