Home → How Do I... →

Using a picture included in a data definition

• Edit

webadmin

20 Apr, 2015 09:16 PM

I'm sure this is simple, I just can't seem to hunt it down in the documentation. When I create a picture input for a data definition, how do I use that selected picture? It just seems to print the link to the image on the page. I'd like to use it as a header image later. Thanks.

1. Support Staff 1 Posted by Tim on 21 Apr, 2015 09:14 PM

   

   Hi,

   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?

   To get the XML output of the Page, do the following:

   • Edit your Format
   • In the Preview Options at the top of the page, select Page from the drop down menu
   • Click the page chooser and select a Page where you've selected an image in the Data Definition

   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.

   If you can attach the XML output here with your Format we can help out.

   Thanks!

   • Edit

2. 2 Posted by webadmin on 21 Apr, 2015 09:29 PM

   

   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?

   • Edit

3. Support Staff 3 Posted by Tim on 21 Apr, 2015 09:35 PM

   

   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:

   • Click New -> Default -> Format
   • Select XSLT (this doesn't really matter at this point since we're just doing this to get to the XML output of your Page)
   • On the next page, click the drop down menu under Preview Options and select Page
   • Then, select your Page where you've added an image via the Data Definition

   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.

   • Edit

4. 4 Posted by webadmin on 21 Apr, 2015 09:48 PM

   

   Here you go:

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

   • Edit

5. 5 Posted by webadmin on 27 Apr, 2015 09:31 PM

   

   Any update on this?

   • Edit

6. Support Staff 6 Posted by Tim on 28 Apr, 2015 12:20 PM

   

   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 <link> 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 <path>, but that would only work assuming the image was managed in the same Site as your Format.

   XSLT

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

   Velocity

   #set($content = $_XPathTool.selectSingleNode($contentRoot, '//system-data-structure'))
   #set($imgsrc = $content.getChild('Header').getChild('link').value)
   <img src="$imgsrc"/>
   

   You should be able to attach one of those to your DEFAULT region on the Page and have the selected image appear.

   Let me know if this helps.

   Thanks

   • Edit

7. 7 Posted by webadmin on 28 Apr, 2015 01:25 PM

   

   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.

   • Edit

8. Support Staff 8 Posted by Tim on 28 Apr, 2015 03:55 PM

   

   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 Default, you might add a line like this:
   

   <xsl:copy-of select="Default/node()"/>
   

   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.

   Hope this helps!

   • Edit

9. 9 Posted by webadmin on 28 Apr, 2015 04:09 PM

   

   What's the Velocity equivalent of this?

   • Edit

10. Support Staff 10 Posted by Tim on 28 Apr, 2015 04:19 PM

    

    I believe you would want to use the Serializer Tool. For example, something like this might work:
    

    #set($wysiwyg = $content.getChild('Default'))
    $_SerializerTool.serialize($wysiwyg, true)
    

    • Edit

11. 11 Posted by webadmin on 28 Apr, 2015 04:26 PM

    

    Perfect. That looks like it'll do it exactly. Thanks!

    • Edit

12. Support Staff 12 Posted by Tim on 28 Apr, 2015 04:27 PM

    

    No problem! Glad I could help out. Have a good one!

    • Edit

13. Tim closed this discussion on 28 Apr, 2015 04:27 PM.

14. webadmin re-opened this discussion on 16 Feb, 2016 10:23 PM

15. 13 Posted by webadmin on 16 Feb, 2016 10:23 PM

    

    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?

    • Edit

16. 14 Posted by Ryan Griffith on 17 Feb, 2016 03:16 PM

    

    Hi,

    Similar to accessing the page's structured data, you would update your Format to access the page's metadata.

    If you would like to stick with XSLT, or use Velocity and the XPath Tool), you will need to add a calling page index block to the region along with your Format. Once you do this, a Format that would output the title field would look something like:

    XSLT

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

    Velocity

    #set($page = $_XPathTool.selectSingleNode($contentRoot, '/system-index-block/calling-page/system-page'))
    
    $_EscapeTool.xml($page.getChild("title").value)
    

    If you would like to avoid the additional Index Block, you can use the $currentPage 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 title would look like:

    $_EscapeTool.xml($currentPage.metadata.title)
    

    For more information about the various properties available to the $currentPage variable, use the Property Tool: $_PropertyTool.outputProperties($currentPage).

    Please let me know if you have any questions.

    Thanks!

    • Edit

17. 15 Posted by webadmin on 17 Feb, 2016 09:36 PM

    

    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?

    • Edit

18. 16 Posted by Ryan Griffith on 18 Feb, 2016 01:05 PM

    

    Thank you for following up, I am glad to hear I was able to help point you in the right direction.

    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?

    What you will want to do is make sure your Index Block is configured to include System Metadata, which will give you a created-on timestamp for each page.

    Once you update your Index Block, you can convert that timestamp to a Java Date object using the Date Tool:

    #set ($createdOnDate = $_DateTool.getDate($page.getChild("created-on").value))
    

    To format the resulting Date object, you would pass the Date object into the Date Tool's format method:

    $_DateTool.format("EEE, d MMM yyyy", $createdOnDate)
    ## Result: Thu, 18 Feb 2016
    

    For additional formatting options see this page.

    Please let me know if you have any questions.

    Thanks!

    • Edit

19. 17 Posted by webadmin on 18 Feb, 2016 01:34 PM

    

    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?

    • Edit

20. 18 Posted by Ryan Griffith on 18 Feb, 2016 02:31 PM

    

    Absolutely! You can access the page's creation date using $currentPage.createdOn. This will return a Java Object for you, so all you have to do is pass it into $_DateTool.format().

    For a complete list of properties available to $currentPage, you can use the following within your Format:

    $_PropertyTool.outputProperties($currentPage)
    

    Please let me know if you have any questions.

    Thanks!

    • Edit

21. 19 Posted by webadmin on 18 Feb, 2016 04:42 PM

    

    That did it! Thanks!

    • Edit

22. Support Staff 20 Posted by Tim on 18 Feb, 2016 05:33 PM

    

    Thanks for the update! I'm glad Ryan was able to help out here. Have a good one.

    • Edit

23. Tim closed this discussion on 18 Feb, 2016 05:33 PM.