I've installed Imagegen. And I see the package ImageGen in: Section Developer - packages - installed packages 2 times.
If I try this: localhost:8043/umbraco/ImageGen.ashx nothing happened:
Server Error in '/' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking
for (or one of its dependencies) could have been removed, had its name
changed, or is temporarily unavailable. Please review the following URL
and make sure that it is spelled correctly.
Requested URL: /umbraco/ImageGen.ashx
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.18034
But that is the default image of Hello, World! isnt?
To use ImageGen, include it in the path of your <img src="" /> tag. For instance, if you have an image you want to resize that is located at /images/myphoto.jpg and you want to make a thumbnail that is 200px wide instead of sending the full size image to the browser and having the browser resize it with this tag:
<img src="/images/myphoto.jpg" width=200" />
You would resize and cache the image on the server with ImageGen and send the properly sized image to the browser with:
<!-- The fun starts here --> <ul> <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <b> Titel:</b> <xsl:value-of select="./@nodeName"/>
And I have the images stored in de Media section. the thumbnails are: 90x120. But how to manage if you press on a thumbnail you will get a larger format of the image, like 200x400?
What you've got looks good, but two things are not correct.
First, you will still need to convert from the media id storted in the porseleinPlaatje1 property to it's full image path using the GetMedia() function. Second, remember that you need to escape the & character when in xslt. Also, you don't need to specify the hostname in the <img src=""> parameter.
Also, I'm assuming the images stored in the media section are large images. Otherwise you run the risk of having ImageGen up-scale the images and the quality will be poor in that case.
Sorry about that... that's what I get for typing code into the forum without testing it first. I had an extra closing parenthesis, which is exactly what the error pointed to.
Also, in this case you want to use false() as the second parameter to the GetMedia() function because you only want to return a single image and not look deep into the media tree for all children and grandchildren recursively. Using the false() parameter will make the GetMedia() call as fast as possible.
By the way, to mark something as 'code' highlight the line in the post and select the 'Preformatted' format from the styles drop down, rather than the 'Paragrah' style.
I my solution I have used the Lightbox 2. On this page http://lokeshdhakar.com/projects/lightbox2/ you can read how to set it up on your site. So you just include the javascript files to your project and add the rel="lightbox" to your a tag.
but I include the js and the css scripts in the Settings - Scripts folder? Because normaly you will do it in the HTML page. So in Umbraco By content, but that doesnt works. So I triied like this:
<!-- The fun starts here --> <ul> <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <b> Titel:</b> <xsl:value-of select="./@nodeName"/>
<!-- The fun starts here --> <ul> <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <b> Titel:</b> <xsl:value-of select="./@nodeName"/>
<!-- The fun starts here --> <ul> <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <b> Titel:</b> <xsl:value-of select="./@nodeName"/>
Posting the code above seems to have got rid of spaces between imgsrc so ignore these but the rel attribute should be separate from the href attribute.
It looks like you now have a basic lightbox implementation running from what I can see. At least most of it. I say this because in your screenshot the background is grayed out and the image is floating in the center of the browser window.
What is curious to me is that the image is so small. Is this the full-size version of the image stored in the media section? If so, you will want to consider using much larger images in the media section and letting ImageGen resize them to whatever size(s) you want for your thumbnails and also in the lightbox implementation.
Though ImageGen can resize an image to be larger than its original size that will give a very poor quality image for the website visitor. Much better to save large versions and resize them to smaller sizes with ImageGen.
How to use ImageGen?
Hi everybody,
I've installed Imagegen. And I see the package ImageGen in: Section Developer - packages - installed packages 2 times.
If I try this: localhost:8043/umbraco/ImageGen.ashx nothing happened:
Server Error in '/' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.Requested URL: /umbraco/ImageGen.ashx
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.18034
But that is the default image of Hello, World! isnt?
But how to show that default image?
THX
ImageGen is installed to the root of your site... the url in your example should be:
http://localhost:8043/imagegen.ashx?version
To use ImageGen, include it in the path of your <img src="" /> tag. For instance, if you have an image you want to resize that is located at /images/myphoto.jpg and you want to make a thumbnail that is 200px wide instead of sending the full size image to the browser and having the browser resize it with this tag:
You would resize and cache the image on the server with ImageGen and send the properly sized image to the browser with:
Hope this helps.
cheers,
doug.
Hi Douglass,
Thanks, I see now the default image: Hello world.
But I have a xslt file, like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:umbraco.contour="urn:umbraco.contour"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<!-- The fun starts here -->
<ul>
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
<li>
<b> Titel:</b> <xsl:value-of select="./@nodeName"/>
<p>
<b>Omschrijving:</b> <xsl:value-of select="./omschrijving"/>
</p>
<p>
<b>Prijs:</b> <xsl:value-of select="prijs"/>
</p>
<p>
<xsl:choose>
<xsl:when test="string-length(./porseleinPlaatje1) > 0">
<img src="{umbraco.library:GetMedia(./porseleinPlaatje1, true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje2, true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje3, true())/umbracoFile}" />
</xsl:when>
<xsl:otherwise>
<img src="{./uploadImage}" />
</xsl:otherwise>
</xsl:choose>
</p>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
And I have the images stored in de Media section. the thumbnails are: 90x120. But how to manage if you press on a thumbnail you will get a larger format of the image, like 200x400?
Thanks
Niels
I try something like this:
<p>
<xsl:choose>
<xsl:when test="string-length(./porseleinPlaatje1) > 0">
<img src="/localhost:8043/imagegen.ashx?image=/media/porseleinen/porseleinPlaatje1.jpg&width=200, true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje2, true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje3, true())/umbracoFile}" />
</xsl:when>
<xsl:otherwise>
<img src="{./uploadImage}" />
</xsl:otherwise>
</xsl:choose>
</p>
What you've got looks good, but two things are not correct.
First, you will still need to convert from the media id storted in the porseleinPlaatje1 property to it's full image path using the GetMedia() function. Second, remember that you need to escape the & character when in xslt. Also, you don't need to specify the hostname in the <img src=""> parameter.
<img src="/imagegen.ashx?image={umbraco.library:GetMedia(porseleinPlaatje1), true())/umbracoFile}&width=90&height=120" />To make this thumbnail image a link to a larger image, put an anchor around the image tag:
What you put in the href="" is up to you. It might be a link to the full-size image or to another size processed by ImageGen.
Possibly either:
<a href="{umbraco.library:GetMedia(porseleinPlaatje1), true())/umbracoFile}">or
Also, I'm assuming the images stored in the media section are large images. Otherwise you run the risk of having ImageGen up-scale the images and the quality will be poor in that case.
cheers,
doug.
Ok. I have it now like this for the first porseleinImage:
<p>
<xsl:choose>
<xsl:when test="string-length(./porseleinPlaatje1) > 0">
<img src="/imagegen.ashx?image={umbraco.library:GetMedia(porseleinPlaatje1), true())/umbracoFile}&width=90&height=120" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje2, true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje3, true())/umbracoFile}" />
</xsl:when>
<xsl:otherwise>
<img src="{./uploadImage}" />
</xsl:otherwise>
</xsl:choose>
</p>
But then I get this error:
Error occured
System.Xml.Xsl.XslLoadException: Expected token '}', found ','.
...rary:GetMedia(porseleinPlaatje1) -->,<-- true())/umbracoFile}&width=90&h... An error occurred at C:\Users\SavantKing99\Documents\My Web Sites\Umbraco CMS5\xslt\635045633727465672_temp.xslt(34,6).
at System.Xml.Xsl.XslCompiledTransform.LoadInternal(Object stylesheet, XsltSettings settings, XmlResolver stylesheetResolver)
at System.Xml.Xsl.XslCompiledTransform.Load(XmlReader stylesheet, XsltSettings settings, XmlResolver stylesheetResolver)
at umbraco.presentation.webservices.codeEditorSave.SaveXslt(String fileName, String oldName, String fileContents, Boolean ignoreDebugging)
And how to comment the xslt code what you do? I mean in this forum.
I triied like this: [code][/code] but that doesnt work
I also triied like this:
{code}
<p>
<xsl:choose>
<xsl:when test="string-length(./porseleinPlaatje1) > 0">
<img src="/imagegen.ashx?image={umbraco.library:GetMedia(./porseleinPlaatje1), true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje2, true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje3, true())/umbracoFile}" />
</xsl:when>
<xsl:otherwise>
<img src="{./uploadImage}" />
</xsl:otherwise>
</xsl:choose>
</p>
{/code}
Sorry about that... that's what I get for typing code into the forum without testing it first. I had an extra closing parenthesis, which is exactly what the error pointed to.
It should be:
<img src="/imagegen.ashx?image={umbraco.library:GetMedia(porseleinPlaatje1, false())/umbracoFile}&width=90&height=120" />Also, in this case you want to use false() as the second parameter to the GetMedia() function because you only want to return a single image and not look deep into the media tree for all children and grandchildren recursively. Using the false() parameter will make the GetMedia() call as fast as possible.
By the way, to mark something as 'code' highlight the line in the post and select the 'Preformatted' format from the styles drop down, rather than the 'Paragrah' style.
cheers,
doug.
Oke,
I have that :)
it works.
But How to get an JQuery lightbox like this:
http://www.diplo.co.uk/pictures/gran-turismo-5.aspx?
So that you click on an thumbnail and you will get an bigger format in a JQuery box?
Hi savantKing99,
On one of my projects I have made a picture gallery and when you click on the thumbnail, the large picture comes up in a Lightbox.
I my solution I have used the Lightbox 2. On this page http://lokeshdhakar.com/projects/lightbox2/ you can read how to set it up on your site. So you just include the javascript files to your project and add the rel="lightbox" to your a tag.
I hope this can help you to get a solution.
/Dennis
Oke, thanks,
but I include the js and the css scripts in the Settings - Scripts folder? Because normaly you will do it in the HTML page. So in Umbraco By content, but that doesnt works. So I triied like this:
I try it like this:
I try something like this:
I also triied like this:
Hi,
Try this, and see if it has any effect.
I just added an extra /
/Dennis
ok.
but this is correct?
HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
Detailed Error Information:
The problem is the rel tag you have put as part of the href
Try this:
Posting the code above seems to have got rid of spaces between imgsrc so ignore these but the rel attribute should be separate from the href attribute.
Hi,
I have it now like this:
<p>
<xsl:choose>
<xsl:when test="string-length(./porseleinPlaatje1) > 0">
<a href="{umbraco.library:GetMedia(porseleinPlaatje1, true())/umbracoFile}" rel="lightbox">
<img src="/imagegen.ashx?image={umbraco.library:GetMedia(porseleinPlaatje1, false())/umbracoFile}&width=120&height=80" />
</a>
<img src="{umbraco.library:GetMedia(./porseleinPlaatje2, true())/umbracoFile}" />
<img src="{umbraco.library:GetMedia(./porseleinPlaatje3, true())/umbracoFile}" />
</xsl:when>
<xsl:otherwise>
<img src="{./uploadImage}" />
</xsl:otherwise>
</xsl:choose>
</p>
But I dont see the lightbox. The other image will be showing in this url: http://localhost:8043/media/1030/_mg_1002.jpg. But not as a lightbox
I see it now like this when I press on the thumbnail
This is my master page:
It looks like you now have a basic lightbox implementation running from what I can see. At least most of it. I say this because in your screenshot the background is grayed out and the image is floating in the center of the browser window.
What is curious to me is that the image is so small. Is this the full-size version of the image stored in the media section? If so, you will want to consider using much larger images in the media section and letting ImageGen resize them to whatever size(s) you want for your thumbnails and also in the lightbox implementation.
Though ImageGen can resize an image to be larger than its original size that will give a very poor quality image for the website visitor. Much better to save large versions and resize them to smaller sizes with ImageGen.
cheers,
doug.
Yes, I have bigger format: 640x480.
But it is just for testing. Because in any case the lightbox is not shown in this case. how I have it now. Small image or big image
is working on a reply...