Using a picture included in a data definition

webadmin's Avatar

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

    Tim's Avatar

    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!

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

    webadmin's Avatar

    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?

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

    Tim's Avatar

    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.

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

    webadmin's Avatar

    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>

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

    webadmin's Avatar

    Any update on this?

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

    Tim's Avatar

    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

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

    webadmin's Avatar

    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.

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

    Tim's Avatar

    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!

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

    webadmin's Avatar

    What's the Velocity equivalent of this?

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

    Tim's Avatar

    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)
    
  11. 11 Posted by webadmin on 28 Apr, 2015 04:26 PM

    webadmin's Avatar

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

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

    Tim's Avatar

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

  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

    webadmin's Avatar

    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?

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

    Ryan Griffith's Avatar

    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!

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

    webadmin's Avatar

    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?

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

    Ryan Griffith's Avatar

    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!

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

    webadmin's Avatar

    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?

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

    Ryan Griffith's Avatar

    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!

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

    webadmin's Avatar

    That did it! Thanks!

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

    Tim's Avatar

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

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

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac