Guides
Tutorials
Pop Tags

The Big Picture

Getting Started

Basic proficiency with Webpop means you’ll be able to:

  1. Create and structure dynamic content with the Content Architect.
  2. Render the dynamic content as actual HTML with PopTag templates.

Let's start with an overview of how the pieces fit together.

A Separation of Concerns

There are two basic parts to Webpop.

  1. Content Repository -  This is where all your dynamic content is created and organized. ( blog posts, gallery images, calendar events, testimonials, etc.. )
  2. Design File System - This contains all files involved with rendering an actual website ( public files, templates and extensions. )

Each item of content in the repository has a unique URL and can be assigned to any template in the /templates folder of the Design file system.

Content

Webpop has three basic content types to structure a site: Sections, Entries and Categories.

Sections  The main structural elements of a website. Typical examples of sections would be an “About Us” section, a “Blog” section or a “Gallery” section. Sections can be nested to form heirarchies of content.

Entries  Each section can have a collection of entries which share a common set of custom fields. Typical examples include blog posts, news stories or gallery images. Entries are always a flat collection.

Categories — A section with entries can have a set of categories. Each entry within that section can belong to multiple categories. Categories can also be structured as a nested tree. Some typical use cases for categories would be organizing blog articles into topics or to creating albums for a photo gallery.

Custom Fields —  Any of the above structural content types can also have custom fields associated with it. These are the actual content fields associcated with a given content type. Examples of a custom field would be text, images or even file-uploads. It's totally up to you to define which fields a content should have.

Content Infographic

Design

Design is where you create the presentational layer of your site. You'll use PopTag templates to structure your site and render dynamic content from the repository. Each item of content in your repository can be rendered as a page with a unique URL. It just needs a template assigned to it.

Templates are assigned to sections. Up to 3 templates can be assigned to a section for:

  1. the section itself
  2. the entries in that section
  3. the categories in that section.

All your design files are stored in a versioned file system belonging to your project. This lets you work on a separate copy of your files when modifying a live site. It’s handy for previewing different versions of the design side by side during development.

Templates Infographic

The Public Folder

Apart from the PopTag templates, the design file system also has a public folder. This folder works just like the public directory of any web server. Files uploaded to the public folder will be available from the root domain of the project. For instance if you upload a CSS file to public/css/main.css, the url /css/main.css will resolve to that file.

The Anatomy of a URL

When the browser requests a URL from a Webpop site, the following contexts are dynamically combined to generate an HTML page for the browser to display:

  1. Project
  2. Design version
  3. Content
  4. Template

Let’s take a look at an example project  aptly named “example-project”.
You can visit the public website at www.biwashiga.com.

Or visit version-1.example-project.yourwebisonline.com to preview Version 1 of the project.
This is what the URL looks like:

Anatomy of a URL

When the browser asks Webpop for this URL, the system first recognizes example-project and then looks for a design version called “version-1” inside the project.

Once the correct project and version has been found, the system looks for the content with a permalink of /locations/madrid — in this case it finds the entry Madrid in the Locations section.

The section is then configured with an entry template called “location.tpl” and the system will look for a template like this in a templates folder of version-1. Finally the template is rendered by the PopTags template engine with the Madrid entry as the current content and the resulting HTML is sent to the browser.

Continue to PopTag Basics »