Search

Sorry to pose such a basic question and I have been looking in the forums as well as using a fair bit of Google but I can't seem to find a simple explanation as to how to simply display images in my XSLT.

In HTML it would obviously be a case of

<img src="" width="" height="" alt="" />

Do I go about it the same way, simply filling in the src with a certain path? My image handle is simply "image". Or is there a better way of doing this?

Thanks

Are you wanting to display an image that's detailed in your source XML (i.e. that you've uploaded with an entry into a section), or an image that you'll directly reference that's sitting in your images directory? If the former, please post your source XML, which can be found by adding ?debug to the address bar when viewing your frontend page if logged in as a developer.

Sorry yes it's within an entry. The image has it's own field.

<data>

2012-06-2715:0720120627+02:00Symphony BaseGreeting Entryhttp://localhost/symphonyhttp://localhost/symphony/workspacegreetingsgreetings3/greetings/aloha/?debug=rawhttp://localhost/symphony/greetings/aloha52428802.3alohaonjegolders2e9738bc77e002af6689454a1cf758c808aad6cflive <events/> GreetingsAloha

Here is some content

Sorry don't know what happened there. Have uploaded as a file:

Attachments:
example.xml

... Posting error

If it's the former you can use {} to inject xpath into html attributes.

For Example:

<img src="{$workspace}{/data/foo/entry/image/@path}/{/data/foo/entry/image/filename}"
width="{/data/foo/entry/image/meta/@width}"
height="{/data/foo/entry/image/meta/@height}"
alt="{/data/foo/entry/image-name}" />

I struggled with this at first too, as the {} notation doesn't seem to be well documented on most xslt/xpath/libxsl resources.

Edit: added workspace and /

You need to indent code with four spaces or a tab to display it in the forum.

So given the XML:

<data>
    <greeting-entry>
        <section id="1" handle="greetings">Greetings</section>
        <entry id="5">
            <greeting-title handle="aloha">Aloha</greeting-title>
            <greeting-content mode="formatted">
                <p>Here is some content</p>
            </greeting-content>
            <greeting-date time="18:01" weekday="2">2012-06-26</greeting-date>
            <greeting-language>
                <item handle="english">English</item>
            </greeting-language>
            <new-image size="276 KB" path="/images" type="image/jpeg">
                <filename>img_0466.jpg</filename>
            <meta creation="2012-06-27T11:39:32+02:00" width="907" height="678"/>
            </new-image>
        </entry>
    </greeting-entry>
</data>

Your XSLT could be something like the following, assuming you only ever have one image per entry:

<template match="/data/greeting-entry/entry">
    <!-- other stuff for your entry here -->
    <img src="{$workspace}{new-image/@path}/{new-image/filename}" alt=""/>
</template>

Hi S_E, thanks for that, I seem to end up with an empty image tag when I view source trying your code. I'm on a single entry page if that helps?

I'm not sure as I'm already in the right "node?" whether I need the data/foo/entries? My xml file is in the comment above, thanks for the help.

See David's explanation above. His example is much better crafted than mine :D

Thanks David, that worked perfectly! And thanks too S_E, I appreciate people being so kind and helpful :)

They're so kind and helpful because we torture them if they're not. It's a simple method and creates great results!

I like it!

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details