Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Update render-macro.md Documentation #262

Merged
merged 1 commit into from
Oct 6, 2022
Merged

Update render-macro.md Documentation #262

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 121 additions & 1 deletion docs/editors/render-macro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ In your new Data Type, selected the "[Contentment] Render Macro" option. You wil

The main field is "**Macro**", here you can select and configure the Macro to be rendered.

There are also options to **hide the label** on the property itself, and to **hide the property group container**. Selecting these option will enable the notes to be displayed in full width and outside of the content property panel.
There are also options to **hide the label** on the property itself, and to **hide the property group container**. Selecting these option will enable the rendered macro html to be displayed in full width and outside of the content property panel.


### How to use the editor?
Expand Down Expand Up @@ -62,3 +62,123 @@ Inspiration for how a Macro could be used within the CMS back-office...
- Contextual information about the specific property. Meaning a single Macro could be used for multiple instructions.
- Pull in content from an external source, e.g. analytics from the published page's URL.
- Display content or media referenced by other published properties.
- Display a dynamic list of content nodes, with "Open" and "Preview" links, like a Content Picker


### Some example HTML

You can make your macro blend in to the back-office panel just like a standard property:
```

@inherits Umbraco.Cms.Web.Common.Macros.PartialViewMacroPage
@{
var propertyLabel = Model.MacroParameters["__propertyLabel"] != null ? Model.MacroParameters["__propertyLabel"].ToString() : "Items";
var propertyDescription = Model.MacroParameters["__propertyDescription"] != null ? Model.MacroParameters["__propertyDescription"].ToString() : "Some info here...";

IEnumerable<BlogPost> filteredPosts = Umbraco.AssignedContentItem.Children<BlogPost>().Where([Some filtering criteria here]);

<style>
.macro-actions {
flex-basis: 100px;
}
/* Large Full-screen*/
@@media (min-width:1930px) {
.macro-node {
width: 600px;
}
}


/* Medium Full-screen*/
@@media (min-width:1300px) and (max-width:1929px) {
.macro-node {
width: 500px;
}
}

/* Small Full-screen*/
@@media (min-width:1100px) and (max-width:1299px) {
.macro-node {
width: 300px;
}
}

/* Tablet Screen*/
@@media (min-width:768px) and (max-width:1099px) {
.macro-node {
width: 450px;
}
}

/* Phone Screen*/
@@media (min-width:501px) and (max-width:767px) {
.macro-node {
width: 300px;
}
}

/* Phone Screen - Smallest*/
@@media (max-width:500px) {
.macro-node {
width: 200px;
}
}
</style>

<div class="macro-panel">

<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<div class="control-header">
<label class="control-label">@propertyLabel (@filteredPosts.Count())</label>
<small class="control-description property-is-calc">@propertyDescription</small>
</div>

<div class="controls">
<div class="umb-property-editor">
@if (filteredPosts.Any())
{
foreach (var post in filteredPosts.OrderByDescending(n => n.CreateDate))
{
var icon = "icon-book-alt-2 color-green"; //Look at 'Umbraco.Web.PublishedContentTypeExtensions.GetIcon()' to pull the icon dynamically from the ContentType

<div class="flex">
<span aria-hidden="true" class="umb-node-preview__icon umb-icon" icon="@icon">
<span class="umb-icon__inner">
<i class="@icon"></i>
</span>
</span>
<div class="umb-node-preview__content macro-node">
<div class="umb-node-preview__name">@post.Name</div>
<div class="umb-node-preview__description">@post.Url()</div>
</div>

<div class="umb-node-preview__actions macro-actions">
<button type="button" class="umb-node-preview__action">
<a href="/umbraco/#/content/content/edit/@post.Id" target="_blank">
<localize key="general_open">Open</localize>
</a>
<span class="sr-only ng-binding">&nbsp;@post.Name...</span>
</button>
<button type="button" class="umb-node-preview__action">
<a href="@post.Url()" target="_blank">
<localize key="general_preview">Preview</localize>
</a>
<span class="sr-only ng-binding">&nbsp;@post.Name</span>
</button>
</div>
</div>
}
}
else
{
<i>None</i>
}
</div>
</div>
</div>
</div>
</div>
}

```