Hi Steve

I'm not sure you can do this unless you use some inline XSLT to fetch and render the image if want to keep using the umbraco:Item approach?

Is there a specific reason why you want to do it this way rather than using Razor or XSLT? What version of Umbraco are you currently using?

/Jan

Hi Steve,

Try to see this article from the Chrismas calendar from the year 2012. http://24days.in/umbraco/2012/introducing-the-umbraco-image-control/ You could try use Mortens provider.

You should be able to do somehting like this:

<umbraco:Image runat="server" field="feature1Image" Parameters="width=200" Provider="imageGen" />

And it would generate this:

<img src="/ImageGen.ashx?image=/media/19/73006.jpg&width=200">

Hope this helps,

/Dennis

I am open for most anything, it's currently within the template as an Umbraco Item and I am looking for an easy way to have it resized to the area it's in on the template.

Hi Steve

Ok, but the proper approach could vary depending on the Umbraco version you're currently using. If it's 4.11 then by all means try the approach Dennis suggests above. Then you don't need ImageGen.

But let us know the version and then we can probably figure out a nice solution.

/Jan

I am using 6.1.6

Hi Steve

Ok, then try and see if you can succeed with the approach Dennis mentions above - I totally forgot about that option since so much has happened the past 2 years.

Let us know how it all works out.

/Jan

It causes a server error. Won't load the page.

What does the error say?

/Jan

I am not privy to the server logs. So I don't know.

But don't you get a yellow screen with some kind of error message when you're trying to view the content?

/Jan

Hi Steve,

I found a way to do it with inline XSLT, but it uses the old XML schema, so I have tried to updated to the new XML schema. The new XML schema was introduced in Umbraco 4.5

<umbraco:Item runat="server" field="featureImage" xslt="concat('&lt;img src=&quot/imageGen.ashx?image=',umbraco.library:GetMedia({0},'true')/umbracoFile, '&amp;amp;width=200&amp;amp;constrain=true&quot; /&gt;')" xsltDisableEscaping="true"/>

I found the inspiration from this post: http://our.umbraco.org/forum/developers/xslt/4537-Using-Imagegen-in-inline-xslt

Hope this works,

/Dennis

Server Error in '/' Application.

This is all we get. With some basic :

Runtime Error

Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine. 

Details: To enable the details of this specific error message to be viewable on remote machines, please create a <customErrors> tag within a "web.config" configuration file located in the root directory of the current web application. This <customErrors> tag should then have its "mode" attribute set to "Off".

<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

Notes: The current error page you are seeing can be replaced by a custom error page by modifying the "defaultRedirect" attribute of the application's <customErrors> configuration tag to point to a custom error page URL.

<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/>
    </system.web>
</configuration>

HI Steve

Ok, that's what I suspected but you never know for sure.

Then perhaps try the next suggestion from Dennis and see if it works. If that also throws an error you need to be able to see the error message. So you need to get hold of a person that can provide you the error message so you can share it with us :)

/Jan

Dennis's suggestion corrects the server runtime error, but the image doesn't load on the page.

Hi Steve

Ok...just spotted one thing in the code that needs to be corrected...it should not say 'true' but true() or 1 as the second parameter in the call to the GetMedia method. If it's called with 'false' or 'true' it will in both cases actually be true and it matters in terms of what XML the method returns.

So ideally the code should look like this

<umbraco:Item runat="server" field="featureImage" xslt="concat('&lt;img src=&quot/imageGen.ashx?image=',umbraco.library:GetMedia({0},true())/umbracoFile, '&amp;amp;width=200&amp;amp;constrain=true&quot; /&gt;')" xsltDisableEscaping="true"/>

However I don't think that it's the culprit in this case.

If you just write this

<umbraco:item runat="server" field="featureImage" />

Does it then return an image id at all?

/Jan

Jan,

It doesn't even return the image with:

<umbraco:itemrunat="server"field="featureImage"/>

Hi Steve,

I think I found a solution for you.

Try this and see if you get the source of the image.

<umbraco:Item runat="server" field="featureImage" xslt="concat('&lt;img src=&quot;/ImageGen.ashx?image=', umbraco.library:GetMedia({0},0)/umbracoFile, '&quot; /&gt;')" xsltDisableEscaping="true" />

The code above should genreate somethig similar to this output.

<img src="/ImageGen.ashx?image=/media/1002/desert.jpg" />

Hope it works,

/Dennis

Hi Steve,

I have played some more with it, and add some parameters to it.

This should give you an image with a width on 200px

<umbraco:Item runat="server" field="featureImage" xslt="concat('&lt;img src=&quot;/ImageGen.ashx?image=', umbraco.library:GetMedia({0},0)/umbracoFile, '&amp;amp;width=200&amp;amp;constrain=true&quot; /&gt;')" xsltDisableEscaping="true"/>

Hope this helps,

/Dennis

Hi Steve

No and the code I asked you to test was not expected to return an image. Just the media id. So sounds like it does not return anything and that's probably why the inline XSLT code does not work since the "featureImage" property seems to be empty.

Is it hooked up on a document type?

/Jan

Did you paste the code directly or did you add the proper spaces so it is not trying to render umbraco:Itemrunat="server" ... For some reason the code has been formatted weirdly in my post above :-/.

/Jan

Okay, Here is what happened. At some point, with all the copying and pasting the property was changed to featureImage from feature1Image. So, now when I changed to the correct property adding the line:

<umbraco:itemrunat="server"field="feature1Image"/>

renders the path in the media library to the image, so the Umbraco item property is working correctly. Now what should I try?

Hi Steve,

Okay try this then.

<umbraco:Item runat="server" field="feature1Image" xslt="concat('&lt;img src=&quot;/ImageGen.ashx?image=', umbraco.library:GetMedia({0},0)/umbracoFile, '&amp;amp;width=200&amp;amp;constrain=true&quot; /&gt;')" xsltDisableEscaping="true"/>

Hope this helps,

/Dennis

Unfortunatly, Nothing is rendered for the image with your recent code Dennis. Any other ideas?

Hi Steve,

I think that I found what the problem is, I tried to change my alias to featue1Image, and the image did not showing, but if I change the alias to featureImage it shows with this code.

<umbraco:Item runat="server" field="featureImage" xslt="concat('&lt;img src=&quot;/ImageGen.ashx?image=', umbraco.library:GetMedia({0},0)/umbracoFile, '&amp;amp;width=200&amp;amp;constrain=true&quot; /&gt;')" xsltDisableEscaping="true"/>

So something indicate that ImageGen don´t like digits in the alias. And of course make sure that you have the ImageGen package installed :-)

/Dennis

Hi Steve

Does this <umbraco:item runat="server" field="feature1Image"/> render the image path? Not an id? Could you copy paste the result of this please?

If it does render the imagepath then I'm sorry I misunderstood all along. To get ImageGen working you should just modify your initial code with something like this

<umbraco:Item field="feature1Image" insertTextBefore="&lt;img src=&quot;/ImageGen.ashx?image='" insertTextAfter="'&amp;width=192&amp;height=192&quot; width=&quot;192&quot; /&gt;" runat="server" />

I'm not 100% sure that the syntax is totally correct but hopefully it's enough for you to get the idea of what I'm trying to do so you're able to figure it out :)

Hope this helps.

/Jan

Okay I was wrong you can use digits in the alias with ImageGen:

This should give you the image.

<umbraco:Item runat="server" field="feature1Image" xslt="concat('&lt;img src=&quot;/ImageGen.ashx?image=', umbraco.library:GetMedia({0},0)/umbracoFile, '&amp;amp;width=200&amp;amp;constrain=true&quot; /&gt;')" xsltDisableEscaping="true"/>

/Dennis

Jan,

It is strange it displays a box, but it shows a broken reference to the image at "/media/1413784/wilkins.png", but if I put the path in the url it goes to the image.

Hi Steve

Ok, what happens if you try to hit the image url using ImageGen directly in the browser?

For instance: http://yoursite.com/ImageGen.ashx?image=/media/1413784/wilkins.png&width=192 - Does that give you a scaled image? If not then try http://yoursite.com/Umbraco/ImageGen.ashx=image=/media/1413784/wilkins.png&width=192 - Does that work?

At some point the path to ImageGen changed for some reason, which I can't remember. But it got moved either into or out of the /Umbraco folder if I remember correctly.

/Jan

Jan,

When I go to the URL using the ImageGen directly it gives me the image, the second method causes a server runtime error.

Hi Steve

Ok, so it actually works like intended when hitting the first of the suggested urls.

Then it's really a matter of making sure that all those weird characters you need to write in the before and after text is matching up right in order to be able to get the media rendered using umbraco:Item.

If it still does not work then I think you should consider using another approach using either a Razor or XSLT based macro.

/Jan

Thanks Jan, 

It was just some extra quotes within the statement that was preventing it from getting the image correctly. Thanks for all your help! This is the final code that worked:

<umbraco:Item field="feature1Image" insertTextBefore="&lt;img src=&quot;/ImageGen.ashx?image=" insertTextAfter="&amp;width=192&amp;height=132&quot; width=&quot;192&quot; height=&quot;132&quot; /&gt;" runat="server" />

Seems to be rendering it blury when compaird to the original larger image though. Any thoughts?

Hi Steve

Yay! :) Happy to hear you got it working.

I think it's because you're might scaling the image width and height, which may lead to the image not being scaled at the proper proportions perhaps? Think you need the constrain attribute somewhere if I remember correct. Otherwise it should be possible to see the different parameters in the imagegen documentation http://www.percipientstudios.com/imagegen/documentation.aspx

Play around with it and see what works but be aware that some of the features requires you to buy a license - if you're planning on using this on a production site you should really consider buying the license :) Locally all features should work so you can try them out.

Cheers, Jan

is working on a reply...