Symphony.

Obviously the path is displayed eg. /workspace/images/image.jpg so is there any quick method of displaying the actual image?

I’ve tried to reverse engineer by looking into admin.js, class.general.php, content.publish.php, class.administration.php files and the quickpreview.js from the quick preview extension (to display image via hover from http://github.com/icek/quickpreview) but with no success.

Thanks guys.

I am totally guessing here but maybe something like

jQuery("label.file span").prepend("<img src='" + jQuery(this).find("a").attribute("href") + '" />");

…you know, wrapped up into a neat extension. :-)

Cheers man, my php is not too hot but I’m willing to give it a whirl within an extension. Thanks!

Why not use the HTML Panel Field extension? You might simply build a frontend page to display the image (scaled down using JIT), then load this into the HTML panel.

Why not use the HTML Panel Field extension? You might simply build a frontend page to display the image (scaled down using JIT), then load this into the HTML panel.

I reckoned it would be a bit overkill for just displaying a picture when you could simply inject the <img /> using JS. But yes, the HTML Panel Field could do that too.

Symphony, opening you so many possibilities to solve your problem it’s getting hard to choose wich one to take. :-)

Wow that’s two options, I will try both. Perhaps I didn’t search properly for an suitable extension. Thanks!

“So easy a frontend developer could do it!” That’s me!

Keep in mind that this extension will insert all the code, so don’t use a “fully-fledged” XSLT template for an HTML page. All you need is an HTML fragment. Here’s an idea:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">
    <xsl:apply-templates select="//article-images/entry"/>
</xsl:template>

<xsl:template match="article-images/entry">
    <img src="{$root}/image/1/200/0/{image/@path}/{image/filename}" alt=""/>
</xsl:template>

</xsl:stylesheet>

(Note that there is no doctype-public or doctype-system attribute in the <xsl:output/> element.)

This will output nothing but an image tag:

<img src="http://www.example.com/workspace/uploads/example.jpg" alt="" />

Thanks, much appreciated. I’ve got a front-end working with ColorBox (jQuery) though my xpath wasn’t as efficient as yours. I will definitely update my code. I’m still getting my head around displaying images in the backend using the HTML Panel Field extension. I will have to continue tomorrow, I’m whacked.

Cheers guys, I nearly got there but by chance stumbled upon Field: Image Upload & Preview I will revisit the above code so thanks again.