Guides
Tutorials
Pop Tags

Pop Tags Reference

Pop tags are used to structure your site and render dynamic content in your templates. This reference provides a quick summary of the standard Pop Tags library. The Guide icon links to the corresponding section of the Guides.


Content Tags

Content tags are the starting point for pulling dynamic content into your templates.

They accept the following options:

from="example-id" pulls content by id, pass in comma seperated list to create a collection
editable="false" disables editing of content in admin mode

<pop:content> pulls the content ( section, entry, or category ) assigned to the current template. Open a content tag to access its field tags. See Guides

<pop:home> pulls the top level content with the default name of "home". It's shorthand for <pop:content from="/">

<pop:parent> pulls the content from one level up in the content heirarchy based off the current scope in the template. Eg.<pop:parent> inside of an entry content pulls the section it belongs to.

<pop:current> pulls the current item of a collection based on the URL of the site visitor. It works similar to <pop:content/> but must be used within a collection tag and can be combined with <pop:not_current> to render the rest of the collection items.


Content Field Tags

Inside a content tag, render its content fields with <pop:[ID_OF_FIELD]>.

Content field id's are based on the name of the field. Eg. an image field named "Product Pic" would get an id of "product_pic" and a corresponding <pop:product_pic> tag.

Here are some of the default field tags:

<pop:title/> renders the single line text named "title". See Guides

<pop:body/> renders the rich text area named "body". See Guides

Text related field tags accept the following options:

truncate="30" specifies the amount of characters to limit the output to
ellipsis="..." specifies a text string to append to the end of the output
escape="false" disables html escaping

<pop:id/> renders the unique id of the content. See Guides

<pop:permalink/> renders the URL associated with the content. See Guides

<pop:image/> Renders a regular html <img> tag served by a CDN.See Guides

Open an image tag to access its <pop:src/> and <pop:title/>.

Image tags take the following options:

width="320" specify the width of the image to be 320px
height="200" specify the height of the image to be 200px
resize="fit" scales the image proportionally to fit within the specified width/height without cropping.
resize="limit" works the same as fit, but doesnt scale the image past its original size.
resize="fill" scales the image to fill the specified width & height. It crops any part of the image that doesn’t fit.

<pop:file> renders a link to a file uploaded to a file field See Guides
Open a file tag to access its <pop:src/> , <pop:title/> & <pop:size/>.

<pop:number/> render a number, sortable See Guides

<pop:author> renders the name of the Webpop user who authored the content.

<pop:published_at/> renders the publishing date of the content. See Guides

<pop:updated_at/> renders the date the content was last edited. See Guides

<pop:created_at/> renders the date the content was created. See Date Field Guides


Collection Tags

Collection tags enumerate collections of content in your templates.

In addition to most of <pop:content>'s options, collection tags also accept:

wrap="ul" specify an html element to enclose the output.
break=" | " inserts a string between each collection item, or pass an html element to wrap each collection item.
limit="10" specify how many collection items to render.
skip="1" specify a certain numner of certain amount of  entries skip, or enter 'current' to skip the entry in the current scope of the url.
order="random" randomize collection order.
order="title ASC" passing in the title field would alphabetize entries, in this case by title, pass in ASC (ascending) for A-Z, pass DESC (descending) to reverse the order.
except="example" excludes collection items by id, can be a comma seperated list
repeat="false" disable the repetition of the markup inside the collection tag, use <pop:values> to mark the part you want to repeat for each value See Attributes Guides

<pop:sections> pulls a collection of sections. See Pulling Content Guides

<pop:categories> pulls a collection of categories. See Categories Guide

<pop:entries> pulls a collection of entries. See Entries Guide


Collection Item Tags

Use them inside of a collection tag to pull specific item of a collection, based on the order of that collection.

<pop:first> pulls the first item of the collection.

<pop:even> pulls the even items of the collection.

<pop:odd> pulls the odd items of the collection.

<pop:last> pulls the last item in the collection.


Logic Tags

Logic tags help you craft customized markup for specific situations. 

<pop:value> renders the value of the tag which wraps it. You can use it to manage the scope of a tag and also to conditionally render a portion of a template based on the value of the wrapping tag. See Guides

 <pop:not_*> provides a way to render alternative markup when a content or field is empty. Not/No tags always pair up with another Pop Tag. Replace the "*" with the name of its pair and place the tag immediately after its pair. If paired with collection item tags, it pulls the opposite of the item. Eg. paired with <pop:first/>, <pop:not_first/> will render all the other entries. See Guides

<pop:no_*> is interchangable with <pop:no_*/> pick whichever name fits better. See Guides

The default option can be passed to other Pop Tags to do the same thing as a logic tag.

default="Hello!" This would render the "Hello!" text if the content the tag is referencing is empty or missing. Pop Tags that get passed into the default option do get evaluated.

<pop:tag> creates a new tag which outputs whatever markup is enclosed by <pop:tag>. Useful for resolving namespace conflicts. See Guides

Name your new tag by passing in the option:

name="my_new_tag" the name for your new Pop Tag. Eg. <pop:my_new_tag/>

Template Tags

Any templates in the /layouts folder are your layout templates.

<pop:layout> specifies a layout template to wrap the current template. See Layout Guides

name="example" this would use the template named "example" in the /layouts folder

<pop:block> holds markup to replace a region of a layout template. See Layouts Guides

region="foo" target the layout region to replace

<pop:region> defines a region of a layout template to be replaced by a block. See Layouts Guides

name="foo" give the region a name, so it can be targetting by a block

<pop:include> inserts any template into the current one. See Includes & Layouts Guides

template="includes/example" specify the filepath of the template to include

Asset Tags

Use Asset tags to maximize site performance.

They'll optimize, cache & serve your assets over the Akamai Content Delivery Network.

Asset tags accept the following options:

name="example.css" specify a filepath of asset you are referencing

<pop:asset/>  renders a cached & CDN delivered url of any asset in your public folder See Assets Guides

<pop:stylesheet/> works like a <link> tag, caches the external stylesheet & any images it references. See Assets Guides

<pop:javascript/> works like a <script> tag, caches the external javascript file. See Assets Guides

<pop:bundle> wraps a grouping of stylesheet or javascript tags and combines them into single, performance optimized files for production. See Assets Guides

name="main-style" prepends a name to the cache buster of the bundled assets.

Form Tags

Form tags accept the following options:

name="test" sends submissions to the forms database
mailto="me@example.com" sends submissions to the specified email address
mailsubject="Hello World!" adds a subject to the email

<pop:form> replaces the regular html <form> tag to send form entries to Webpops form database and optionally an email address. See Forms Guide

<pop:error> show a message when validations fail. See Form Validations Guide

<pop:success> show a message upon successful submission. See Forms Guide

<pop:params> holds the data of a form that was just submitted. Eg. Access the submitted data of an input field named "total" with <pop:params.total/> See Forms Guide


Navigation Tags

<pop:active> renders containing markup if a section or anything within that section is being viewed. See Navigation Guides

<pop:redirect> does a 302 redirect to another URL. See Redirection Guides

Redirect tags accept the following options:

to="example-id" specify url to redirect to
permanent="true" do a 301 redirect

<pop:next> pulls the next entry of a collection, relative to the current one being viewed.

<pop:prev> pulls the previous entry of a collection, relative to the current one being viewed.

<pop:paginate> wraps a collection tag to paginate it's items. See Pagination Guide

per_page="10" specify the number of items per page.

<pop:pagination/> outputs a default pagination markup. Open it for more control. See Guides


Session Tags

<pop:admin/> loads & activates admin mode. See PopTag Basics Guide

<pop:track/> loads & activates Webpop site analytics.

<pop:today/> renders todays date.

format="yyyy" specify the format of the date Eg. "2013" See Guides

<pop:user> renders if the session has a user. See Redirection Guides

The following tags are available within <pop:user>:

<pop:name/> renders current user name.

<pop:email/> renders current user email.


Dev Tags

<pop:development> renders enclosed markup except on the published site.

<pop:production> renders enclosed markup only on the published site. 

<pop:log> outputs anything you log from your extensions. See Guides