tag:help-archives.hannonhill.com,2010-02-09:/discussions/how-do-i/17498-using-a-picture-included-in-a-data-definitionCascade CMS: Discussion 2016-02-18T17:33:39Ztag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-21T21:14:20Z2015-04-21T21:14:20ZUsing a picture included in a data definition<div><p>Hi,</p>
<p>You'll need to have a Format transform the data into an actual
image tag so that browsers will render it. Are you currently
applying a Format to the Page in question? If so, can you attach it
here along with the XML output of the Page?</p>
<p>To get the XML output of the Page, do the following:</p>
<ul>
<li>Edit your Format</li>
<li>In the <strong>Preview Options</strong> at the top of the page,
select <em>Page</em> from the drop down menu</li>
<li>Click the page chooser and select a Page where you've selected
an image in the Data Definition</li>
</ul>
<p>You'll see a box pop up with the XML output associated with your
Page. This XML is what you'll need to transform to get the image
onto your Page.</p>
<p>If you can attach the XML output here with your Format we can
help out.</p>
<p>Thanks!</p></div>Timtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-21T21:29:51Z2015-04-21T21:29:51ZUsing a picture included in a data definition<div><p>I don't have a format associated with it at the moment. What I
wanted to be able to do was have the picture appear at the top of
the page, and have the rest be defined by the WYSIWYG editor. Is
this possible?</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-21T21:35:57Z2015-04-21T21:35:57ZUsing a picture included in a data definition<div><p>That is certainly something you'll be able to do with a Format.
Since you don't currently have a Format associated with your Page,
try this:</p>
<ul>
<li>Click <strong>New -> Default -> Format</strong></li>
<li>Select <strong>XSLT</strong> (this doesn't really matter at
this point since we're just doing this to get to the XML output of
your Page)</li>
<li>On the next page, click the drop down menu under
<strong>Preview Options</strong> and select <em>Page</em></li>
<li>Then, select your Page where you've added an image via the Data
Definition</li>
</ul>
<p>Once you see the XML from that Page appear, copy/paste that
output here and we can help out with a very simple sample Format
for outputting the image along with the content.</p></div>Timtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-21T21:48:56Z2015-04-21T21:48:56ZUsing a picture included in a data definition<div><p>Here you go:</p>
<p><code><system-data-structure> <Header type="file">
<content/> <path>/_skin/images/img1.jpg</path>
<link>site://NOBTS Rebrand/_skin/images/img1.jpg</link>
<site>NOBTS Rebrand</site>
<name>img1.jpg</name> </Header> <Default/>
</system-data-structure></code></p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-27T21:31:55Z2015-04-27T21:31:55ZUsing a picture included in a data definition<div><p>Any update on this?</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-28T12:20:54Z2015-04-28T12:20:54ZUsing a picture included in a data definition<div><p>So, just as some very simple examples, I've attached both an
XSLT Format and a Velocity Format that I believe will output an
image tag using the path to the selected image. As a side note, I'm
using the <code><link></code> attribute when outputting the
path to the image as this should rewrite the path to the image in
the event that you are sharing across sites. I could have used
<code><path></code>, but that would only work assuming the
image was managed in the same Site as your Format.</p>
<p><strong>XSLT</strong></p>
<pre>
<code><xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="system-data-structure">
<img>
<xsl:attribute name="src">
<xsl:value-of select="Header/link"/>
</xsl:attribute>
</img>
</xsl:template>
</xsl:stylesheet></code>
</pre>
<p><strong>Velocity</strong></p>
<pre>
<code>#set($content = $_XPathTool.selectSingleNode($contentRoot, '//system-data-structure'))
#set($imgsrc = $content.getChild('Header').getChild('link').value)
<img src="$imgsrc"/></code>
</pre>
<p>You should be able to attach one of those to your DEFAULT region
on the Page and have the selected image appear.</p>
<p>Let me know if this helps.</p>
<p>Thanks</p></div>Timtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-28T13:25:28Z2015-04-28T13:25:28ZUsing a picture included in a data definition<div><p>That does make the image appear, but how do I make the stuff in
the WYSIWYG editor appear beneath it? Just using that as a
transformation in the default region seems to not display anything
else.</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-28T15:55:04Z2015-04-28T15:55:04ZUsing a picture included in a data definition<div><p>You would need to modify the Format further such that you're
outputting all of the content within your WYSIWYG element. In XSLT,
for example, if your WYSIWYG identifier is <code>Default</code>,
you might add a line like this:<br></p>
<pre>
<code><xsl:copy-of select="Default/node()"/></code>
</pre>
underneath where you are outputting the image tag. Keep in mind you
can also add other HTML tags around these elements as needed to
match your site's look and feel.
<p>Hope this helps!</p></div>Timtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-28T16:09:34Z2015-04-28T16:09:34ZUsing a picture included in a data definition<div><p>What's the Velocity equivalent of this?</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-28T16:19:46Z2015-04-28T16:19:46ZUsing a picture included in a data definition<div><p>I believe you would want to use the <a href="http://www.hannonhill.com/kb/Script-Formats/#serializer-tool">Serializer
Tool</a>. For example, something like this might work:<br></p>
<pre>
<code>#set($wysiwyg = $content.getChild('Default'))
$_SerializerTool.serialize($wysiwyg, true)</code>
</pre></div>Timtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-28T16:26:22Z2015-04-28T16:26:22ZUsing a picture included in a data definition<div><p>Perfect. That looks like it'll do it exactly. Thanks!</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752015-04-28T16:27:04Z2015-04-28T16:27:04ZUsing a picture included in a data definition<div><p>No problem! Glad I could help out. Have a good one!</p></div>Timtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-16T22:23:58Z2016-02-16T22:23:58ZUsing a picture included in a data definition<div><p>I have a question I'd like to add on to this. I'm getting the
image just fine, but I'm wanting some more data. I have a title and
author in the metadata, and I would like to get the creation date
of the file as well. How do I get that from the page I'm currently
on?</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-17T15:16:09Z2016-02-17T15:16:09ZUsing a picture included in a data definition<div><p>Hi,</p>
<p>Similar to accessing the page's structured data, you would
update your Format to access the page's metadata.</p>
<p>If you would like to stick with XSLT, or use Velocity and the
XPath Tool), you will need to add a <a href="http://help.hannonhill.com/kb/frequently-asked-questions/create-a-calling-page-index-block">
calling page index block</a> to the region along with your Format.
Once you do this, a Format that would output the
<strong>title</strong> field would look something like:</p>
<p><strong>XSLT</strong></p>
<pre>
<code><xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/system-index-block">
<xsl:apply-templates select="calling-page/system-page"/>
</xsl:template>
<xsl:template match="system-page">
<xsl:value-of select="title"/>
</xsl:template>
</xsl:stylesheet></code>
</pre>
<p><strong>Velocity</strong></p>
<pre>
<code>#set($page = $_XPathTool.selectSingleNode($contentRoot, '/system-index-block/calling-page/system-page'))
$_EscapeTool.xml($page.getChild("title").value)</code>
</pre>
<p>If you would like to avoid the additional Index Block, you can
use the <code>$currentPage</code> variable within a stand-alone
Velocity Format to access the calling page's API object directly.
This object will include system information, metadata, and
structured data. An example Velocity Format that would output the
calling page's <strong>title</strong> would look like:</p>
<pre>
<code>$_EscapeTool.xml($currentPage.metadata.title)</code>
</pre>
<p>For more information about the various properties available to
the <code>$currentPage</code> variable, use the <a href="http://www.hannonhill.com/kb/Script-Formats/#property-tool">Property
Tool</a>:
<code>$_PropertyTool.outputProperties($currentPage)</code>.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-17T21:36:49Z2016-02-17T21:36:49ZUsing a picture included in a data definition<div><p>That worked great... now, one last question... how do I get the
date at which the page was created? I see
current-time="1455744076799" in the system-index-blog tag at the
top, but I'm not sure if that's what I'm looking for. If it is, I'm
not sure how to convert that to a readable date/time. Is that what
I need to use?</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-18T13:05:43Z2016-02-18T13:05:43ZUsing a picture included in a data definition<div><p>Thank you for following up, I am glad to hear I was able to help
point you in the right direction.</p>
<blockquote>
<p>how do I get the date at which the page was created? I see
current-time="1455744076799" in the system-index-blog tag at the
top, but I'm not sure if that's what I'm looking for. If it is, I'm
not sure how to convert that to a readable date/time. Is that what
I need to use?</p>
</blockquote>
<p>What you will want to do is make sure your Index Block is
configured to include <strong>System Metadata</strong>, which will
give you a <code>created-on</code> timestamp for each page.</p>
<p>Once you update your Index Block, you can convert that timestamp
to a Java Date object using the Date Tool:</p>
<pre>
<code>#set ($createdOnDate = $_DateTool.getDate($page.getChild("created-on").value))</code>
</pre>
<p>To format the resulting Date object, you would pass the Date
object into the Date Tool's <code>format</code> method:</p>
<pre>
<code>$_DateTool.format("EEE, d MMM yyyy", $createdOnDate)
## Result: Thu, 18 Feb 2016</code>
</pre>
<p>For additional formatting options see <a href="http://docs.oracle.com/javase/tutorial/i18n/format/simpleDateFormat.html">
this page</a>.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-18T13:34:05Z2016-02-18T13:34:05ZUsing a picture included in a data definition<div><p>That looks like it will work, but does that require me to have
the index block included on the page? I used the line of code you
gave earlier to get the title and author
($_EscapeTool.xml($currentPage.metadata.title)), and that worked
great. Is there an equivalent for the creation date?</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-18T14:31:43Z2016-02-18T14:31:43ZUsing a picture included in a data definition<div><p>Absolutely! You can access the page's creation date using
<code>$currentPage.createdOn</code>. This will return a Java Object
for you, so all you have to do is pass it into
<code>$_DateTool.format()</code>.</p>
<p>For a complete list of properties available to
<code>$currentPage</code>, you can use the following within your
Format:</p>
<pre>
<code>$_PropertyTool.outputProperties($currentPage)</code>
</pre>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-18T16:42:02Z2016-02-18T16:42:02ZUsing a picture included in a data definition<div><p>That did it! Thanks!</p></div>webadmintag:help-archives.hannonhill.com,2010-02-09:Comment/366292752016-02-18T17:33:38Z2016-02-18T17:33:38ZUsing a picture included in a data definition<div><p>Thanks for the update! I'm glad Ryan was able to help out here.
Have a good one.</p></div>Tim