Skip to content

Commit

Permalink
Merge pull request umbraco#6220 from umbraco/StarterKitGuide
Browse files Browse the repository at this point in the history 
Updates to the Starter Kit Guide
  • Loading branch information
@sofietoft
sofietoft authored Jun 27, 2024
2 parents a651476 + c79e7b8 commit febe2b4
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 29 deletions.
94 changes: 88 additions & 6 deletions ...-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-3.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,107 @@ Finally, in Part Three we shall change the blog listing.

* Select *Default.cshtml*.

2. Scroll down to find the `blogpost-date` element and change it to use a nicely formatted Publication Date, i.e.:
2. Scroll down to find the `foreach` loop.
3. Declare a new `publicationDate` variable as the first thing within the loop:

```csharp
var publicationDate = post.Value<DateTime>("publicationDate");
```

4. Locate the `blogpost-date` element a bit further down and change it to use the new variable:

```html
<small class="blogpost-date">@post.PublicationDate.ToLongDateString()</small>
<small class="blogpost-date">@publicationDate.ToLongDateString()</small>
```

3. Further up in the view, you also need to redefine the `blogposts` variable:
* The ToLongDateString() method is called on the `publicationDate` variable to format it as a long date string.

5. Redefine the `blogposts` variable before the first `div` tag - this will be used for sorting the posts:

```csharp
var blogposts = startNode.Children.OrderByDescending(x => x.Value<DateTime>("PublicationDate")).ToList();
@{
var blogposts = Model.BlogPosts.OrderByDescending(x => x.Value<DateTime>("publicationDate")).ToList();
}
```

* Because we are sorting by a custom property we need to use the generic `Value` method.

4. *Save* the partial view - a confirmation message should appear confirming that the Partial view has been saved.
5. Now view both the Blog overview and the blog posts themselves in the browser to confirm that all is working as expected.
{% hint style="info" %}
You can use **Query builder** to construct your queries in a more structured and reusable manner. Use the `UmbracoHelper` or the `IPublishedContentQuery` interface to build queries dynamically. For more information, see the [Querying & Models](https://docs.umbraco.com/umbraco-cms/reference/querying) article.
{% endhint %}

6. Locate the `@foreach` loop, and change `Model.Blostposts` to the variable created above: `blogposts`:

```csharp
@foreach (IPublishedContent post in blogposts)
```

7. **Save** the partial view - a confirmation message should appear confirming that the Partial view has been saved.

Now view both the Blog overview and the blog posts themselves in the browser to confirm that all is working as expected.

## Summary

Nice job! In this lesson, you've learned what a **Document Type** is and how to add a new Property to it. You've also learned how to change Templates and sort by custom Properties.

<details>

<summary>See the entire file: Default.cshtml</summary>

{% code title="Default.cshtml" lineNumbers="true" %}
```csharp
@using Umbraco.Cms.Core.Models.PublishedContent
@using Umbraco.Extensions
@model Umbraco.SampleSite.Models.LatestBlogPostsViewModel;
@{
var blogposts = Model.BlogPosts.OrderByDescending(x => x.Value<DateTime>("publicationDate")).ToList();
}
<div class="blogposts">
@foreach (IPublishedContent post in blogposts)
{
var publicationDate = post.Value<DateTime>("publicationDate");
<a href="@post.Url()" class="blogpost">
<div class="blogpost-meta">
<small class="blogpost-date">@publicationDate.ToLongDateString()</small>
<small class="blogpost-cat">
@await Html.PartialAsync("~/Views/Partials/CategoryLinks.cshtml", post.Value<IEnumerable<string>>("categories"))
</small>
</div>
<h3 class="blogpost-title">@post.Value("pageTitle")</h3>
<div class="blogpost-excerpt">@post.Value("excerpt")</div>
</a>
}
@if (Model.BlogPosts.Count() < Model.Total)
{
<div class="pagination">
<nav class="nav-bar nav-bar--center">
@if (Model.Page <= 1)
{
<span class="nav-link nav-link--black nav-link--disabled">Prev</span>
}
else
{
<a class="nav-link nav-link--black" href="@(Model.Url + "?page=" + (Model.Page - 1))">Prev</a>
}
@for (int i = 1; i <= Model.PageCount; i++)
{
<a class="nav-link nav-link--black @(Model.Page == i ? " nav-link--active" : null)" href="@(Model.Url + "?page=" + i)">@i</a>
}
@if (Model.Page == Model.PageCount)
{
<span class="nav-link nav-link--black nav-link--disabled">Next</span>
}
else
{
<a class="nav-link nav-link--black" href="@(Model.Url + "?page=" + (Model.Page + 1))">Next</a>
}
</nav>
</div>
}
</div>
```
{% endcode %}

</details>

[Back to Lessons](../README.md)
37 changes: 14 additions & 23 deletions 14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,33 @@ The final piece to the puzzle is adding the partial view that will be rendered w

1. Go to the **Settings** section.

2. Click on **Partial Views** and select **Create...** > **New empty partial view**

The partial view comes with a standard view model `@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage`. We are using compositions and only render this view on pages where the composition exists, which means we need to be a little more specific.

3. In the template editor, pass in the specific model you've created by adding `<IOpenGraph>`.
2. Click on **Partial Views** and select **Create...** > **New empty partial view**.
3. **Enter a Name** for the partial view. Let's call it: _OpenGraph_
3. Add the standard view model: `@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage`
* We only render this view on pages where the composition exists, so we need to be more specific.
4. In the template editor, pass in the specific model you've created by adding `<IOpenGraph>` after the view model.
* Now you can start rendering the meta tags and adding in the values.
4. First add the title property
5. First add the title property

```html
<meta property="og:title" content="" />
<meta property="og:title" content="@Model.OpenGraphTitle" />
```

5. Set the cursor in the content attribute and select the *+ Insert...* button.
6. Select **Value...**
7. Under *Choose field*, select the `openGraphTitle` property.
8. Set the *Default value* to `siteName`.
* This will make sure that even though the Open Graph title isn't filled in, it will fallback to the title of the site
9. Check *Yes, make it recursive* to ensure the fallback will work on all pages.
10. Add the Open Graph meta tag for type of content - you can hardcode "website" in here:
6. Add the Open Graph meta tag for type of content - you can hardcode "website" in here:

```html
<meta property="og:type" content="website" />
```

11. Next up is adding the URL for Open Graph.
7. Next up is adding the URL for Open Graph.
* For this you'll need the entire URL to the page, not relative to this page.
* There is a handy method for getting this from a content item. Add:

```html
<meta property="og:url" content="@Model.Url(mode: UrlMode.Absolute)" />
```

12. The final thing we need to do is render the image selected on the Open Graph Image property.
8. The final thing we need to do is render the image selected on the Open Graph Image property.
* You'll still need to render the entire URL for the image.
* First, we'll create a variable to get the image:

Expand All @@ -52,27 +46,24 @@ The final piece to the puzzle is adding the partial view that will be rendered w
<meta property="og:image" content="@ogImage.Url(mode: UrlMode.Absolute)" />
```

13. Your partial view is now complete and should only render on pages that are using the Open Graph composition.
9. Your partial view is now complete and should only render on pages that are using the Open Graph composition.

The final view should look like this:

```html
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<IOpenGraph>

<meta property="og:title" content="@Model.Value("openGraphTitle", fallback: Fallback.To(Fallback.Ancestors, Fallback.DefaultValue), defaultValue: new HtmlString("siteName"))" />
<meta property="og:type" content="website" />
<meta property="og:url" content="@Model.Url(mode: UrlMode.Absolute)" />

@{
var ogImage = Model.Value<IPublishedContent>("openGraphImage");
}

<meta property="og:title" content="@Model.OpenGraphTitle" />
<meta property="og:type" content="website" />
<meta property="og:url" content="@Model.Url(mode: UrlMode.Absolute)" />
<meta property="og:image" content="@ogImage.Url(mode: UrlMode.Absolute)" />
```

{% hint style="info" %}
If you do not have Starter Kit installed, or experience issues with the properties not being picked up/showing up in HTML feel free to remove the fallback to siteName.

If your meta properties do not show up on social media, make sure to inspect source HTML. Make sure there are no inline HTML tags in `og:title`, `og:description` etc.
{% endhint %}

Expand Down

0 comments on commit febe2b4

Please sign in to comment.