zesty.io

Product

Use Cases

Integrations

Learn

Parsley AutoLayout

Automagical HTML output of headless content. Instant access to Content Layout output.

Parsley AutoLayout (PAL) is a function that generates automatic HTML by looking at the content item's fields. It gets the sort order and each field's type and outputs HTML. PAL can be use on Parsley calls that reference a single content items (this, loop variables, and data calls).

Examples:

  • {{this.autoLayout()}}
  • {{each model as item}} {{item.autoLayout(stacked)}} {{end-each}}
  • {{model.first().autoLayout(auto)}}

Auto Layout takes a single parameter autoLayout(mode). The default mode is auto . auto stacked and json the current available options. The type will change the layout behavior of the auto layout and HTML output, but it will not change the content outputted. Auto will also access output from the Content Layout Designer.

If auto layout is called on an illegal parsley reference it will output an error string stating the fact, this error will be suppressed to a comment on live instances.

Parsley AutoLayout Output Examples

The Inline option stacks html element on top of one another.

CSS Classes

Each HTML element outputs with a class of "pal-[fieldtype]" while the encompassing div has the class "pal-container". Developer can control PAL to have custom output by targeting these CSS classes in their own code.

Content Layout Designer Behavior

The drag n drop Content Layout Designer output will be automatically accessed by default by autoLayout when auto or json is passed.

Content Layout Designer write two files when a save or publish occurs, they follow this format /z/pvl/[ZUID].json and /z/pvl/[ZUID].zhtml When autoLayout() resolves, it looks to see if the associated content item or content model has a related set of files that match this format, if they do, Content Layout Designer will resolve automatically.

Start Here

We will listen to your needs and walk you through how Zesty can help your team.

Connect with Content Experts

Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo