Avatar
Documentation Team
  • Created:
  • Updated:
Follow

Mapping between Inception components and PSV classes

Using an Inception Story in a custom Publish Channel can be done by using any of the files that are provided in the output file of Inception (see Setting up a custom Publish Channel in Inception).

Recommended is to use the file in PSV (Prism Source Vocabulary) format: a combination of XML (for the metadata, re-use rights, and so on) and HTML5 (for the Story content).

This article shows the mapping between the Inception components and the PSV classes.

Note: Properties such as paragraph alignment will be added to the class attribute.

Example: 

<figure class="prism:photo inception:hero _align-middle" style="text-align: center;">.

For more information about Inception components, see Working with Story components in Inception.

Title

Inception component: Title

PSV class:

<h1 class="prism:title inception:title" doc-editable="text"></h1>

Subtitle

Inception component: Subtitle

PSV class:

<h2 class="prism:subtitle inception:subtitle" doc-editable="title"></h2>

Headline

Inception component: Headline

PSV class:

<div class="prism:deck inception:headline">
    <h3 class="inception:section" doc-editable="section"></h3>
    <h1 class="prism:title inception:title" doc-editable="title"></h1>
    <h2 class="prism:subtitle inception:subtitle" doc-editable="subtitle"></h2>
</div>

Hero

Inception component: Hero

PSV class:

<figure class="prism:photo inception:hero">
    <img doc-image="image" />
    <figcaption>
        <h1 class="prism:title inception:title" doc-editable="title"></h1>
        <h2 class="prism:subtitle inception:subtitle" doc-editable="subtitle"></h2>
        <h3 class="prism:byline inception:author" doc-editable="author"></h3>
    </figcaption>
</figure>

Intro

Inception component: Intro

PSV class:

<h2 class="prism:introduction inception:intro" doc-editable="text"></h2>

Body

Inception component: Body

PSV class:

<p class="inception:body" doc-editable="text"></p>

Footer

Inception component: Footer

PSV class:

<footer class="prism:footnotes inception:footer" doc-editable="text"></footer>

Quote

Inception component: Quote

PSV class:

<aside class="prism:pullQuote inception:quote">
    <p><span doc-editable="text"></span><span class="prism:person" doc-editable="author"></span></p>
</aside>

Separator

Inception component: Separator

PSV class:

<hr class="inception:separator"/>

Crosshead

Inception component: Crosshead

PSV class:

<h3 class="prism:deck inception:crosshead" doc-editable="text"></h3>

Author

Inception component: Author

PSV class:

<figure class="prism:photo inception:author-image">
    <img doc-image="image"/>
    <figcaption>
        <p class="prism:byline inception:author-name" doc-editable="name"></p>
        <p class="prism:dateline inception:author-location" doc-editable="location"></p>
        <p class="prism:link inception:author-link" doc-editable="link"></p>
    </figcaption>
</figure>

Image

Inception component: Image

PSV class:

<figure class="prism:photo inception:image">
  <img doc-image="image"/>
  <figcaption class="prism:caption" doc-editable="caption"></figcaption>
</figure>

Slideshow

Inception component: Slideshow

PSV class:

<div class="prism:slideshow inception:slideshow" doc-slideshow="slideshow">
    <div class="slides" u="slides"></div>
</div>

Embed

Inception component: Embed

PSV class:

<div class="inception:embed" doc-html="html"></div>

Product

Inception component: Product

PSV class:



<figure class="prism:photo inception:product">
    <img doc-image="image"/>
    <figcaption>
        <h1 class="prism:title inception:product-title" doc-editable="product_title"></h1>
        <p class="prism:teaser inception:product-description" doc-editable="description"></p>
        <p class="inception:product-price" doc-editable="price"></p>
        <p class="prism:link inception:product-link" doc-editable="link"></p>
    </figcaption>
</figure>

Container

Inception component: Container

PSV class:

<div class="inception:container" doc-container="main"></div>

Example PSV file

<?xml version="1.0" encoding="UTF-8"?>
<psv:psv xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:psv="http://prismstandard.org/namespaces/psv/1.0/"
        xmlns:prism="http://prismstandard.org/namespaces/basic/3.0/" xmlns:dc="http://purl.org/dc/elements/1.1/">
   <psv:metadata xmlns="http://www.w3.org/1999/xhtml">
       <prism:contentType>article</prism:contentType>
       <psv:uniqueid>
           <psv:idblk>
               <dc:identifier>6zcdfHVf4Nq8Ll9Vnr2MLF</dc:identifier>
               <dc:title>psv test</dc:title>
           </psv:idblk>
       </psv:uniqueid>
   </psv:metadata>
   <psv:content xmlns="http://www.w3.org/1999/xhtml">
       <head>
           <link rel="stylesheet" href="template/design.css"/>
           <script src="template/vendor.js"/>
       </head>
       <body>
           <article>
               <h1 class="prism:title inception:title" doc-editable="text">title</h1>
               <h2 class="prism:subtitle inception:subtitle" doc-editable="title">subtitle</h2>
               <div class="prism:deck inception:headline">
                   <h3 class="inception:section" doc-editable="section">standfirst1</h3>
                   <h1 class="prism:title inception:title" doc-editable="title">stand2</h1>
                   <h2 class="prism:subtitle inception:subtitle" doc-editable="subtitle">stand3</h2>
               </div>
               <figure class="prism:photo inception:hero _align-middle" style="text-align: center;">
                   <img doc-image="image"
                        src="https://vernon-eu-west-1.woodwing.com/file/6NWfRAABKd4B8y0UkxdkdS/*/6NWfRAABKd4B8y0UkxdkdS.jpg"
                        style="background-position: 50% 50%;"/>
                   <figcaption>
                       <h1 class="prism:title inception:title" doc-editable="title">hero1</h1>
                       <h2 class="prism:subtitle inception:subtitle" doc-editable="subtitle">hero2</h2>
                       <h3 class="prism:byline inception:author" doc-editable="author">hero3</h3>
                   </figcaption>
               </figure>
               <h2 class="prism:introduction inception:intro" doc-editable="text">intro</h2>
               <p class="inception:body" doc-editable="text">body</p>
               <footer class="prism:footnotes inception:footer" doc-editable="text">footer</footer>
               <aside class="prism:pullQuote inception:quote">
                   <p>
                       <span doc-editable="text">quote1</span>
                       <span class="prism:person" doc-editable="author">quote2</span>
                   </p>
               </aside>
               <hr class="inception:separator"/>
               <h3 class="prism:deck inception:crosshead" doc-editable="text">crosshead</h3>
               <figure class="prism:photo inception:author-image">
                   <img doc-image="image"
                        src="https://vernon-eu-west-1.woodwing.com/file/Ekb4xP56a5GA-VEu7jqT6c/*/Ekb4xP56a5GA-VEu7jqT6c.png"
                        style="background-position: 50% 50%;"/>
                   <figcaption>
                       <p class="prism:byline inception:author-name" doc-editable="name">author1</p>
                       <p class="prism:dateline inception:author-location" doc-editable="location">author2</p>
                       <p class="prism:link inception:author-link" doc-editable="link">autor3</p>
                   </figcaption>
               </figure>
               <div class="prism:slideshow inception:slideshow" doc-slideshow="slideshow" style="position: relative;">
                   <div class="slides" u="slides" doc-container="slideshow">
                       <figure class="prism:photo inception:image _fit-frame-height-to-content">
                           <img doc-image="image"
                                src="https://vernon-eu-west-1.woodwing.com/file/5ApaQLk1Kk394pmu2H5hY1/*/5ApaQLk1Kk394pmu2H5hY1.png"/>
                           <figcaption class="prism:caption" doc-editable="caption"/>
                       </figure>
                       <figure class="prism:photo inception:image _fit-frame-height-to-content">
                           <img doc-image="image"
                                src="https://vernon-eu-west-1.woodwing.com/file/FULHM8Ap4Y38EJOaqatRft/*/FULHM8Ap4Y38EJOaqatRft.jpg"/>
                           <figcaption class="prism:caption" doc-editable="caption"/>
                       </figure>
                       <figure class="prism:photo inception:image _fit-frame-height-to-content">
                           <img doc-image="image"
                                src="https://vernon-eu-west-1.woodwing.com/file/APEq23Ts4Jj9lJ4yhLnpaG/*/APEq23Ts4Jj9lJ4yhLnpaG.jpg"/>
                           <figcaption class="prism:caption" doc-editable="caption"/>
                       </figure>
                   </div>
                   <div class="resize-sensor"
                        style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; z-index: -1; visibility: hidden;">
                       <div class="resize-sensor-expand"
                            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                           <div style="position: absolute; left: 0px; top: 0px; transition: 0s; width: 1930px; height: 4090px;"/>
                       </div>
                       <div class="resize-sensor-shrink"
                            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                           <div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%"/>
                       </div>
                   </div>
               </div>
               <figure class="prism:photo inception:image _fit-frame-height-to-content">
                   <img doc-image="image"
                        src="https://vernon-eu-west-1.woodwing.com/file/3Cg9KI8q4CRAPAvgi8ADwi/*/3Cg9KI8q4CRAPAvgi8ADwi.jpg"
                        style="height: 0px; display: block; overflow: hidden; padding-bottom: 66.6667%; background-position: 50% 50%;"/>
                   <figcaption class="prism:caption" doc-editable="caption">caption</figcaption>
               </figure>
               <div class="inception:embed" doc-html="html">embed</div>
               <figure class="prism:photo inception:product">
                   <img doc-image="image"
                        src="https://vernon-eu-west-1.woodwing.com/file/0BSIp6PY4YJ9G1pzlt6YeB/*/0BSIp6PY4YJ9G1pzlt6YeB.jpg"
                        style="background-position: 50% 50%;"/>
                   <figcaption>
                       <h1 class="prism:title inception:product-title" doc-editable="product_title">product1</h1>
                       <p class="prism:teaser inception:product-description" doc-editable="description">product2</p>
                       <p class="inception:product-price" doc-editable="price">product3</p>
                       <p class="prism:link inception:product-link" doc-editable="link">product4</p>
                   </figcaption>
               </figure>
               <div class="inception:container" doc-container="main">
                   <p class="inception:body" doc-editable="text">body in container</p>
               </div>
           </article>
       </body>
   </psv:content>
</psv:psv>

Document history

  • 20 December 2017: Updated URL https://vernon-eu-west-1.woodwing.com/ to https://vernon-eu-west-1.woodwing.com/.

Comments

Do you have corrections or additional information about this article? Leave a comment!

Do you have a question about what is described in this article? Please contact support here.


0 comments

Please sign in to leave a comment.

In this article

    Other articles in this section

    Related articles