3 . Html Renders (VPTL Model)

Introduction to VPTL model, and how it solves presenting single dynamic collection item on the web.

So far we have talked about collections, and setting up single items, we have gone through creating relations, and nesting items from different collections. However, if we just nest items into items, we would end up with too large html pages. Sometimes we need to use just partial data for a specific item. Example would be author name @ article page. We do not need all Person model fields, just some selected for this case. 

 In order to simplify workflow, and give some structure for a project to be scalable, we introduced 4 default renders for each item.   

VPTL model stands for view, preview, teaser, and liner.

HTML Renders

In the next example we can see the view, preview, teaser, and liner renders for a single item (article) in the Articles collection.

Also visible are 3 renders of another collection, Person in this specific case. Setting up each render and selection of renders used is elaborated in finer details on this  link (missing link)

Prototyping information for creating complex models (vptl in the wild). 

  • Theming consistently

  • Class naming for different renders

  • Large vs modular code

  • How VPTL concept solves modeling and upgrade model

Importance of templating for larger scale websites/projects ... (stylebook)

HTML Renders

View

Preview

Teaser

Liner

Index (Dynamic List)

Index Renders

  1. Core Concepts
    1. Structured Data, MicroData, Schema.org
    2. GraphDB & Dynamic Content
    3. Html Renders (VPTL Model)
    4. Semantic HTML  (Document Semantics)
    5. CSS & Preprocessors
    6. External CSS & JS Libraries
    7. Integrated CMS
    8. Momentum Network and Market
  2. Environment
    1. Viewport
    2. Project Settings
    3. Tools Panel
    4. Code Editor & External Libraries
    5. Visual Helpers
    6. Web Parser
    7. Structure Panel
    8. Render Panel
    9. Stylebook
    10. Assets
  3. HTML
    1. Layout Structure (Master Template)
    2. Basic HTML Building
    3. Parsing Pre-made HTML
    4. Working With Snippets
    5. HTML In Dynamic Collection
    6. Hidden HTML Elements
    7. Forms
    8. Container Lock
  4. Website Structure
    1. Blank Pages
    2. Schema.org Classes
    3. Collections
    4. Collection Properties
    5. DIMS Module Settings
    6. Stylebook (vptli)
    7. Using Render Panel
    8. Index Operations
    9. Relations Between Collections
    10. Taxonomies
  5. Schema.org, Advanced
    1. Independent vs Context
    2. Testing Schema
    3. Knowing When To Stop
  6. Classes & Attributes, Advanced
    1. Auto Generated Classes
    2. Dynamic Attributes
  7. DIMS (CMS)
    1. Overview
    2. DIMS Interfaces
    3. DIMS Modules
    4. Publishing Content
  8. Building Editing Flow
    1. Inbound & Outbound Relations
    2. Using Dims Attributes
  9. Going Live
    1. Connect An External Domain Name