Additional macros

The module comes with a few helper macros besides the built-in ones. If you don't need them you can disable in the module's settings page.

editlink

Renders a link to open the admin and edit the page passed as a parameter. The edit link will be visible only to users having the right to edit the page.

The macro can't be used as an n:macro.

Parameters:

• target: the Page to edit in the admin. If it's the first parameter then can be passed simply as $page instead target => $page
• text: text to appear on the link (default: Edit)
• attrs: attributes to add, eg. class, data-attributes, inline style, link target, etc
• urlparams: url parameters to append to the edit link url (string)

{* all parameters with default values: target Page, text to show, attributes: CSS class, target and url parameters *}
{editlink target => $page, text => 'Edit', attrs => 'class="edit-link" target="_blank"', urlparams => '?modal=1'}

{* Edit link for $p (ProcessWire page) *}
{editlink target => $p}
{editlink $p}

{* Edit link for the page with id 1050 *}
{editlink 1050}

{* Edit link for the current $page *}
{editlink}

Setting defaults

You can set default parameters by creating a $view->editlinkDefaults array, eg. in ready.php:

$view->editlinkDefaults = array(
    'text' => '#',
    'attrs' => 'class="edit-link" target="_blank"'
);

This way all edit links will have "Edit page" text and "edit-link" class by default and open in a new window. Setting parameters on individual edit links will override these.

Tip: if "attrs" starts with a "+" character, then it will be appended to the default attrs set in $view->editlinkDefaults instead overwriting (eg. {editlink 'target' => $p, 'attrs' => '+class="top-right small"'} ).

Styling

The rendered link has no styling, you (the developer) should take care of that with custom CSS. By default the macro adds a data-editlink attribute that you can use as a selector.

Example of adding icon-only links:

[data-editlink] {
  all: initial;
  text-indent: -9999px;
  display: inline-block;
  border: 5px solid transparent;
  float: right;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  opacity: 0.3;
  z-index: 200;
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB5UlEQVRYR+3XO2gVURAG4C9iqTZa2Ina2KTRSkER1MJCa2ttYqfgE/EBPhLfjY0Iae1UbCwFFUEbsRJUBG0UREWxFBMGZkOy3HPvZXfhFsmBhYU9O/8//8z5d3bMiNfYiPEtCgL7sQtfcQ8/5qteUmAr9mLVECX6g3OFfbdwFJ+wFt+xGT+r/b0ITOFkbvo1BIEIGoTr6zaO4ArOYD3e5f3NEoHteJYZXcb/IQj02lKBRwKh0E58xjdM43SJwCQOplwzLcGP4wGeImI9wQR24HmJwB3sxqYOwG9kjA14ixVZ2mv9mrANgUr2yLwCD6zrOIZTuFpPrN6ETQkMAo+mXpB5lyVoDB4k2iowCPxElqDYUm0IVCZTqvlA8DYKhKuFtV6suWDVcEOBtyFwAPexDl9S3wq8rkgl/+v0gvNdHMO72IONGMfhNJkSeGB+xKM8knMcmvbAe6xJq16Nf2ky0Rel1RmBIP0hP1Zhs3G9wN8B7tkZgYYu3W0JmpBYUmBJgVDgIcIrij4QE9GhnIiajmO9GnR5DqThE2HfRQIxXL7MTRdazITzMZblYBrfhy14049APLuUk2tMu3Pjc5Nzl++EU4Zrns3YC0KV/gu2YR9WtgCuXv2Nx3jVK9ai+DXrK+LIFZgFWbWDIS5SaWwAAAAASUVORK5CYII=') center center no-repeat;
  background-size: cover;
}

[data-editlink]:hover { opacity: 1; cursor: pointer; }

Open edit link in a modal

To achieve this you'll need a JavaScript tool and adding urlparams and attrs to the edit link.

For example this will generate a link that can be used together with lightGallery.js.

{editlink $page, urlparams => '&modal=1', attrs => 'data-iframe="true"'}

iff

An IF condition that sets a variable "$x" to the value of the condition. In the example below "$x" will be "$page->body", making easier to replace "body" if you need for example "title" instead.

<div n:iff="$page->body">
    {$x|noescape}
</div>

{iff $page->body}
    {$x|noescape}
{/iff}

minify

Minifies markup by removing whitespace and optionally performs other tweaks. Can be applied partially to sections or individual HTML tags.

By default the macro removes whitespace between HTML tags that are not on the same line to handle situations like bold text followed by italic. This is a safe way to reduce the overall size of the markup.

Experimental features

NOTE: experimental features were removed in v0.5.1.

If parameter true is passed the macro will perform additional minifications, eg. removing quotes from attributes that has no spaces or removing default attributes like type="text". According to the markup these tweaks can lead to undesired results so use it only on your own risk. For advanced minification check ProCache (commercial) or AIOM.

Applying as an n:macro:

<div n:minify>
    ...
</div>

Applying as an inner macro to remove whitespace between li elements:

<ul n:inner-minify>
    <li n:foreach="..."></li>
</div>

Applying to a region (whole layout in this example) and enabling experimental settings (by passingtrue):

{minify true}
<!DOCTYPE html>
...
</html>
{/minify}

page

If you need to switch to a page quickly, use the "page" macro. It accepts a page ID (or a selector). It automatically sets the "$p" variable too. Under the hood it uses the $pages->get() API command.

<div n:page="1039">
    {$p->title}
</div>

{page 'template=home'}
    {$p->title}
{/page}

pages

Simlar to the "page" filter but returns a PageArray (loaded to "$pArr") instead of a single page. Under the hood it uses the $pages->find() API command.

<ul n:pages="'template=basic-page,limit=10'" n:inner-foreach="$pArr as $p">
    <li>{$p->title}</li>
</ul>

{pages 'template=basic-page,limit=10'}
<ul n:inner-foreach="$pArr as $p">
    <li>{$p->title}</li>
</ul>
{/pages}

setvar

This is an alternative to the built-in "var" macro and allows setting a variable "inline", that is, adding to a tag for example.

<div n:setvar="url,$p->url">
    {$url}
</div>