Merge pull request #7517 from umbraco/update-image-links

Updated image paths to current folder

Author: eshanrnh

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,15 +22,15 @@ 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.
 
 ## Creating a Partial View from Snippet
 
 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
 

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
 </ul>
 ```
 
-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
 

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,21 +58,21 @@ 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.
 
 ```html
 <script src="/scripts/myScript.js"></script>
 ```
 
-![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.
 

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:
 

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**.
 
-    <figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Sections-option.png" alt=""><figcaption></figcaption></figure>
+    <figure><img src="images/Sections-option.png" alt=""><figcaption></figcaption></figure>
 3.  Select **Define a named section** and enter the **Section Name**.
 
-    <figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Define-named-section.png" alt=""><figcaption></figcaption></figure>
+    <figure><img src="images/Define-named-section.png" alt=""><figcaption></figcaption></figure>
 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**.
 
-    <figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Sections-option.png" alt=""><figcaption></figcaption></figure>
+    <figure><img src="images/Sections-option.png" alt=""><figcaption></figcaption></figure>
 3.  Select **Render a named section** and enter the **Section Name**.
 
-    <figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Render-named-sections.png" alt=""><figcaption></figcaption></figure>
+    <figure><img src="images/Render-named-sections.png" alt=""><figcaption></figcaption></figure>
 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**.

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)

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,26 +56,26 @@ Now you'll see a green play button appear with a dropdown where ".NET Core Launc
 
 <figure><img src="../../../.gitbook/assets/Dropdown_option.jpg" alt=""><figcaption><p>Green Play button options</p></figcaption></figure>
 
-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 .
 
 <figure><img src="../../../.gitbook/assets/launchJson.jpg" alt=""><figcaption></figcaption></figure>
 
 With that, you're ready to run the project! Press F5, or click the little green play button in the **Run and Debug** section to run your brand new Umbraco site locally.
 
 ## 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.
 
 ![Web Installer - Lets Get Started](../../../.gitbook/assets/Install_Umbraco.jpg)
 
 When the installer is done, you will be logged into the backoffice.
 
-<figure><img src="../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/dashboard-v8.PNG" alt=""><figcaption></figcaption></figure>
+<figure><img src="images/VsCode/dashboard-v8.PNG" alt=""><figcaption></figcaption></figure>
 
 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 %}

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.
 
-<figure><img src="../../../../../10/umbraco-cms/fundamentals/setup/install/images/unattended/final-screen.png" alt=""><figcaption></figcaption></figure>
+<figure><img src="images/unattended/final-screen.png" alt=""><figcaption></figcaption></figure>
 
 ## Configuration options
 

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_.