“I think that I shall never see a picture lovely as a tree.” (after Joyce Kilmer)
This turns out to be quite an exercise, particularly for the single and multiple media picker types. This must be because of the extra effort of unwrapping the image from the database object, but I was surprised to see so many partial and unintelligible entries in various blogs and forums on the subject. I hope that the following is more successful.
Upload datatype. This datatype returns the url of the image, so all one has to do is surround it with the relevant HTML. At a minimum put this into the template:
<img src= <?UMBRACO_GETITEM field="testupload"/> />
Rich Text datatype. This is, if anything, even easier because TinyMCE has already done all the work. Just put this into the template:
<?UMBRACO_GETITEM field="testtinymce" />
Media Picker datatype. This requires a macro to disentangle the indirect references, so first write an XSLT file containing the following, and tick the box to create a matching macro at the same time. (This is the bit you put just after “<!-- start writing XSLT -->” in a Clean XSLT file.)
<xsl:if test="string($currentPage/data [@alias='testmediapicker']) != '' ">
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="umbraco.library:GetMedia($currentPage/data[@alias='testmediapicker'], 'false')/data [@alias = 'umbracoFile']"/>
</xsl:attribute>
</xsl:element>
</xsl:if>
Note: The <xsl:if> tag is good practice in any case to stop the server giving an error if the field is empty, BUT it is also needed because otherwise the compiler gives an error message when one tries to save the macro.
Secondly, if it was not set up automatically, create a macro which calls the XSLT file above.
Thirdly, put a call to this macro into the template:
<?UMBRACO_MACRO macroAlias="test" ></?UMBRACO_MACRO>
Lefteris’s Multiple Media Picker. This also requires a macro, but the XSLT file has to be different because the datatype returns a set of nodes each containing an image identifier. Otherwise the mechanism is the same as above. (Again this is the bit you put just after “<!-- start writing XSLT -->” in a Clean XSLT file.)
<xsl:if test="($currentPage/data[@alias='testlefmediapicker']/ descendant::node!='')">
<xsl:variable name="images" select="$currentPage/data[@alias='testlefmediapicker']"/>
<xsl:for-each select="$images/descendant::node">
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="umbraco.library:GetMedia(., ’false’)/data [@alias='umbracoFile']"/>
</xsl:attribute>
</xsl:element>
</xsl:for-each>
</xsl:if>
ImageGen
As well as different ways of selecting and displaying images, all the above mechanisms have different ways of controlling the size (and some other attributes) of the resulting display. If you want to control this from the template, rather than leaving it to the user to decide, then I can see the following choices:
- Just put “height” and “width” attributes into the html <img> tag. This has the potential problem of downloading a very large file to create a small final image.
- Use the additional thumbnail file created by Umbraco when storing an image. I have not investigated this further, because I prefer:
- Use ImageGen, which allows considerable control from within the XSLT script.
Install ImageGen from the Developer screen, right click on Macros, click Import Package, then click Go to the Package Repository. Or you can download from http://www.percipientstudios.com/imagegen/download.aspx.
There is very good documentation with the package, and (as far as I have tried it so far) it does exactly what it says on the tin. A must.