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:
|
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.