Mapping between Digital article components in Content Station Aurora and PSV classes
Publishing a Story in Content Station Aurora to a custom Publish Channel can be done by using any of the files that are provided in the output file (see Configuring Content Station Aurora for publishing to a custom Publish Channel).
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).
The overview below shows the mapping between the components of a Digital article component in Content Station Aurora and the PSV classes.
|
Note: Properties such as paragraph alignment will be added to the class attribute. Example: |
For more information about Digital article components, see Working with the components of a Digital article in Content Station Aurora.
Title
Digital article component: Title
PSV class:
<h1 class="prism:title inception:title" doc-editable="text"></h1>Subtitle
Digital article component: Subtitle
PSV class:
<h2 class="prism:subtitle inception:subtitle" doc-editable="title"></h2>Headline
Digital article 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
Digital article 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
Digital article component: Intro
PSV class:
<h2 class="prism:introduction inception:intro" doc-editable="text"></h2>Body
Digital article component: Body
PSV class:
<p class="inception:body" doc-editable="text"></p>Footer
Digital article component: Footer
PSV class:
<footer class="prism:footnotes inception:footer" doc-editable="text"></footer>Quote
Digital article 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
Digital article component: Separator
PSV class:
<hr class="inception:separator"/>Crosshead
Digital article component: Crosshead
PSV class:
<h3 class="prism:deck inception:crosshead" doc-editable="text"></h3>Author
Digital article 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
Digital article component: Image
PSV class:
<figure class="prism:photo inception:image">
<img doc-image="image"/>
<figcaption class="prism:caption" doc-editable="caption"></figcaption>
</figure> Slideshow
Digital article component: Slideshow
PSV class:
<div class="prism:slideshow inception:slideshow" doc-slideshow="slideshow">
<div class="slides" u="slides"></div>
</div>Embed
Digital article component: Embed
PSV class:
<div class="inception:embed" doc-html="html"></div>Product
Digital article 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
Digital article 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-dev-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-dev-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-dev-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-dev-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-dev-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-dev-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-dev-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>
Comments
2 comments
you can add a new digital component?
Hi Roberto,
Great question, currently you cannot add new digital components. However we are working on a feature (custom components) which makes this possible. Expected is that this will be available in the upcoming months. Please have a look here to see what features are coming up and in progress.
Thanks,
Maarten
Please sign in to leave a comment.