Edit Search WebPart
In this articles I'll explain how to create the formatted image search results
There are three steps to perform this operation at MOSS
1. Create an Image scope at the SharePoint Search.
2. Create New Rules for SharePoint Search.
3. Edit Search Web part.
Edit Search WebPart
Now at your page that you create (picturesResults.aspx)
Go to Edit page-> Core Results WebPart -> Modify Shared Web Part -> Xsl Editor
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:param name="ResultsBy" /> <xsl:param name="ViewByUrl" /> <xsl:param name="ViewByValue" /> <xsl:param name="IsNoKeyword" /> <xsl:param name="IsFixedQuery" /> <xsl:param name="ShowActionLinks" /> <xsl:param name="MoreResultsText" /> <xsl:param name="MoreResultsLink" /> <xsl:param name="CollapsingStatusLink" /> <xsl:param name="CollapseDuplicatesText" /> <xsl:param name="AlertMeLink" /> <xsl:param name="AlertMeText" /> <xsl:param name="SrchRSSText" /> <xsl:param name="SrchRSSLink" /> <xsl:param name="ShowMessage" /> <xsl:param name="IsThisListScope" /> <xsl:param name="DisplayDiscoveredDefinition" select="True" /> <xsl:param name="NoFixedQuery" /> <xsl:param name="NoKeyword" /> <xsl:param name="NoResults" /> <xsl:param name="NoResults1" /> <xsl:param name="NoResults2" /> <xsl:param name="NoResults3" /> <xsl:param name="NoResults4" /> <xsl:param name="DefinitionIntro" /> <!-- When there is keywory to issue the search --> <xsl:template name="dvt_1.noKeyword"> <span class="srch-description"> <xsl:choose> <xsl:when test="$IsFixedQuery"> <xsl:value-of select="$NoFixedQuery" /> </xsl:when> <xsl:otherwise> <xsl:value-of select="$NoKeyword" /> </xsl:otherwise> </xsl:choose> </span> </xsl:template> <!-- When empty result set is returned from search --> <xsl:template name="dvt_1.empty"> <div class="srch-sort"> <xsl:if test="$AlertMeLink and $ShowActionLinks"> <span class="srch-alertme" > <a href ="{$AlertMeLink}" id="CSR_AM1" title="{$AlertMeText}"><img style="vertical-align: middle;" src="/_layouts/images/bell.gif" alt="" border="0"/><xsl:text disable-output-escaping="yes">&nbsp;</xsl:text><xsl:value-of select="$AlertMeText" /></a> </span> </xsl:if> <xsl:if test="string-length($SrchRSSLink) > 0 and $ShowActionLinks"> <xsl:if test="$AlertMeLink"> | </xsl:if> <a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL"><img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/><xsl:text disable-output-escaping="yes">&nbsp;</xsl:text><xsl:value-of select="$SrchRSSText"/></a> </xsl:if> </div> <br/> <br/> <span class="srch-description" id="CSR_NO_RESULTS"> <xsl:value-of select="$NoResults" /> <ol> <li><xsl:value-of select="$NoResults1" /></li> <li><xsl:value-of select="$NoResults2" /></li> <li><xsl:value-of select="$NoResults3" /></li> <li><xsl:value-of select="$NoResults4" /></li> </ol> </span> </xsl:template> <!-- Main body template. Sets the Results view (Relevance or date) options --> <xsl:template name="dvt_1.body"> <div class="srch-results"> <xsl:if test="$ShowActionLinks"> <div class="srch-sort"> <xsl:value-of select="$ResultsBy" /> <xsl:if test="$ViewByUrl"> | <a href ="{$ViewByUrl}" id="CSR_RV" title="{$ViewByValue}"> <xsl:value-of select="$ViewByValue" /> </a> </xsl:if> <xsl:if test="$AlertMeLink"> | <span class="srch-alertme" > <a href ="{$AlertMeLink}" id="CSR_AM2" title="{$AlertMeText}"><img style="vertical-align: middle;" src="/_layouts/images/bell.gif" alt="" border="0"/><xsl:text disable-output-escaping="yes">&nbsp;</xsl:text><xsl:value-of select="$AlertMeText" /></a> </span> </xsl:if> <xsl:if test="string-length($SrchRSSLink) > 0"> | <a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL"><img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/><xsl:text disable-output-escaping="yes">&nbsp;</xsl:text><xsl:value-of select="$SrchRSSText"/></a> </xsl:if> </div> <br /><br /> </xsl:if> <xsl:apply-templates /> </div> <xsl:call-template name="DisplayMoreResultsAnchor" /> </xsl:template><!-- This template is called for each result --> <xsl:template match="Result"> <xsl:variable name="url" select="url"/> <div id="result{id}" class="result" dir="rtl"> <div id="image{id}" class="picture" > <xsl:choose> <xsl:when test="string-length(picturethumbnailurl)>0"> <xsl:call-template name="DisplayThumbnail"> <xsl:with-param name="str" select="picturethumbnailurl"/> <xsl:with-param name="height" select="pictureheight" /> <xsl:with-param name="width" select="picturewidth" /> </xsl:call-template> </xsl:when> <xsl:otherwise> <xsl:call-template name="DisplayThumbnail"> <xsl:with-param name="str" select="url"/> <xsl:with-param name="height" select="pictureheight" /> <xsl:with-param name="width" select="picturewidth" /> </xsl:call-template> </xsl:otherwise> </xsl:choose> </div> <div id="props{id}" class="properties"> <xsl:call-template name="DisplaySite"> <xsl:with-param name="title" select="title"/> <xsl:with-param name="url" select="url" /><!-- sitename--> <xsl:with-param name="isdocument" select="isdocument"/> </xsl:call-template> <xsl:call-template name="DisplayTitle"> <xsl:with-param name="str" select="title"/> <xsl:with-param name="url" select="url"/> </xsl:call-template> <xsl:call-template name="DisplayDim"> <xsl:with-param name="height" select="pictureheight" /> <xsl:with-param name="width" select="picturewidth" /> </xsl:call-template> <xsl:call-template name="DisplaySize"> <xsl:with-param name="size" select="size" /> </xsl:call-template> </div> </div> </xsl:template> <xsl:template name="DisplayThumbnail"> <xsl:param name="str" /> <xsl:param name="height" /> <xsl:param name="width" /> <xsl:if test='string-length($str) > 0'> <a> <xsl:attribute name="href"><xsl:value-of select="$str" /></xsl:attribute> <img> <xsl:attribute name="src"> <xsl:value-of select="$str" /> </xsl:attribute> <xsl:choose> <xsl:when test="string-length($height) = 0"> <xsl:attribute name="height"> 125px </xsl:attribute> <xsl:attribute name="width"> 150px </xsl:attribute> </xsl:when> <xsl:when test="$width > 150 and $width >= $height"> <xsl:attribute name="width"> <xsl:value-of select="(150 div $width) * $width" />px </xsl:attribute> <xsl:attribute name="height"> <xsl:value-of select="(150 div $width) * $height" />px </xsl:attribute> </xsl:when> <xsl:when test="$height > 150 and $width < $height"> <xsl:attribute name="width"> <xsl:value-of select="(150 div $height) * $width" /> </xsl:attribute> <xsl:attribute name="height"> <xsl:value-of select="(150 div $height) * $height" /> </xsl:attribute> </xsl:when> </xsl:choose> </img></a> </xsl:if> </xsl:template> <xsl:template name="DisplaySite"> <xsl:param name="title"/> <xsl:param name="url" /> <xsl:param name="isdocument" /> <xsl:if test='$isdocument = 1'> <xsl:if test='string-length($url) > 0'> <xsl:choose> <xsl:when test="starts-with($url, 'file://')"> <a href="{$url}" ><img src="/_layouts/images/folder.gif" alt="פתח" style="border:none; vertical-align:bottom;"/></a> <!-- <xsl:element name="a"> <xsl:attribute name="href"> <xsl:call-template name="strip"> <xsl:with-param name="relfile"><xsl:value-of select="url"/></xsl:with-param> </xsl:call-template> </xsl:attribute> <img src="/_layouts/images/folder.gif" alt="פתח" style="border:none; vertical-align:bottom;"/> </xsl:element> --> </xsl:when> <xsl:when test="starts-with($url, 'http://')"> <a href="{$url}" ><img src="/_layouts/images/cat.gif" alt="Open file location" style="border:none; vertical-align:bottom;"/></a> <!-- <xsl:element name="a"> <xsl:attribute name="href"> <xsl:call-template name="strip"> <xsl:with-param name="relfile"><xsl:value-of select="url"/></xsl:with-param> </xsl:call-template> </xsl:attribute> <xsl:attribute name="target">blank</xsl:attribute><img src="/_layouts/images/cat.gif" alt="Open file location" style="border:none; vertical-align:bottom;"/></xsl:element> --> </xsl:when> </xsl:choose>   </xsl:if> </xsl:if> </xsl:template> <xsl:template name="strip"> <xsl:param name="reldir"/> <xsl:param name="relfile"/> <xsl:choose> <xsl:when test="contains($relfile, '/')"> <xsl:call-template name="strip"> <xsl:with-param name="relfile"> <xsl:value-of select="substring-after($relfile,'/')"/> </xsl:with-param> <xsl:with-param name="reldir"> <xsl:value-of select="concat($reldir, substring-before($relfile,'/'), '/')"/> </xsl:with-param> </xsl:call-template> </xsl:when> <xsl:otherwise> <xsl:value-of select="$reldir"/> </xsl:otherwise> </xsl:choose> </xsl:template> <!-- Display the formated Dimensions of the image --> <xsl:template name="DisplayDim"> <xsl:param name="height" /> <xsl:param name="width" /> <xsl:if test='string-length($height) > 0'> <br/>גודל תמונה: <xsl:value-of select="$width" />x<xsl:value-of select="$height" /> </xsl:if> </xsl:template> <xsl:template name="DisplayTitle"> <xsl:param name="str" /> <xsl:param name="url" /> <xsl:if test='string-length($str) > 0'> <span style="width=110px; height:1.5em; overflow:hidden;"><a href="{$url}" title="View: {$str}"><xsl:value-of select="$str" /></a></span> </xsl:if> </xsl:template> <xsl:template name="HitHighlighting"> <xsl:param name="hh" /> <xsl:apply-templates select="$hh"/> </xsl:template> <xsl:template match="ddd"> … </xsl:template> <xsl:template match="c0"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c1"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c2"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c3"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c4"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c5"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c6"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c7"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c8"> <b><xsl:value-of select="."/></b> </xsl:template> <xsl:template match="c9"> <b><xsl:value-of select="."/></b> </xsl:template> <!-- The size attribute for each result is prepared here --> <xsl:template name="DisplaySize"> <xsl:param name="size" /> <xsl:if test='string-length($size) > 0'> <xsl:if test="number($size) > 0"> <br/>גודל קובץ: <xsl:choose> <xsl:when test="round($size div 1024) < 1"><xsl:value-of select="$size" /> Bytes</xsl:when> <xsl:when test="round($size div (1024 *1024)) < 1"><xsl:value-of select="round($size div 1024)" />KB</xsl:when> <xsl:otherwise><xsl:value-of select="round($size div (1024 * 1024))"/>MB</xsl:otherwise> </xsl:choose> </xsl:if> </xsl:if> </xsl:template> <!-- A generic template to display string with non 0 string length (used for author and lastmodified time --> <xsl:template name="DisplayString"> <xsl:param name="str" /> <xsl:if test='string-length($str) > 0'> - <xsl:value-of select="$str" /> </xsl:if> </xsl:template> <!-- document collapsing link setup --> <xsl:template name="DisplayCollapsingStatusLink"> <xsl:param name="status"/> <xsl:param name="urlEncoded"/> <xsl:param name="id"/> <xsl:if test="$CollapsingStatusLink"> <xsl:choose> <xsl:when test="$status=1"> <br/> <xsl:variable name="CollapsingStatusHref" select="concat(substring-before($CollapsingStatusLink, '$$COLLAPSE_PARAM$$'), 'duplicates:"', $urlEncoded, '"', substring-after($CollapsingStatusLink, '$$COLLAPSE_PARAM$$'))"/> <span class="srch-dup"> [<a href="{$CollapsingStatusHref}" id="$id" title="{$CollapseDuplicatesText}"> <xsl:value-of select="$CollapseDuplicatesText"/> </a>] </span> </xsl:when> </xsl:choose> </xsl:if> </xsl:template><!-- The "view more results" for fixed query --> <xsl:template name="DisplayMoreResultsAnchor"> <xsl:if test="$MoreResultsLink"> <a href="{$MoreResultsLink}" id="CSR_MRL"> <xsl:value-of select="$MoreResultsText"/> </a> </xsl:if> </xsl:template> <xsl:template match="All_Results/DiscoveredDefinitions"> <xsl:variable name="FoundIn" select="DDFoundIn" /> <xsl:variable name="DDSearchTerm" select="DDSearchTerm" /> <xsl:if test="$DisplayDiscoveredDefinition = 'True' and string-length($DDSearchTerm) > 0"> <script language="javascript"> function ToggleDefinitionSelection() { var selection = document.getElementById("definitionSelection"); if (selection.style.display == "none") { selection.style.display = "inline"; } else { selection.style.display = "none"; } } </script> <div> <a href="#" onclick="ToggleDefinitionSelection(); return false;"> <xsl:value-of select="$DefinitionIntro" /><b><xsl:value-of select="$DDSearchTerm"/></b></a> <div id="definitionSelection" class="srch-Description" style="display:none;"> <xsl:for-each select="DDefinitions/DDefinition"> <br/> <xsl:variable name="DDUrl" select="DDUrl" /> <xsl:value-of select="DDStart"/> <b> <xsl:value-of select="DDBold"/> </b> <xsl:value-of select="DDEnd"/> <br/> <xsl:value-of select="$FoundIn"/> <a href="{$DDUrl}"> <xsl:value-of select="DDTitle"/> </a> </xsl:for-each> </div> </div> </xsl:if> </xsl:template> <!-- XSL transformation starts here --> <xsl:template match="/"> <xsl:if test="$AlertMeLink"> <input type="hidden" name="P_Query" /> <input type="hidden" name="P_LastNotificationTime" /> </xsl:if> <xsl:choose> <xsl:when test="$IsNoKeyword = 'True'" > <xsl:call-template name="dvt_1.noKeyword" /> </xsl:when> <xsl:when test="$ShowMessage = 'True'"> <xsl:call-template name="dvt_1.empty" /> </xsl:when> <xsl:otherwise> <xsl:call-template name="dvt_1.body"/> </xsl:otherwise> </xsl:choose> </xsl:template> <!-- End of Stylesheet --> </xsl:stylesheet>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Columns>
<Column Name="WorkId"/>
<Column Name="Rank"/>
<Column Name="Title"/>
<Column Name="Author"/>
<Column Name="Size"/>
<Column Name="Path"/>
<Column Name="Description"/>
<Column Name="Write"/>
<Column Name="SiteName"/>
<Column Name="CollapsingStatus"/>
<Column Name="HitHighlightedSummary"/>
<Column Name="HitHighlightedProperties"/>
<Column Name="ContentClass"/>
<Column Name="IsDocument"/>
<Column Name="PictureThumbnailURL"/>
<Column Name="ContentType"/>
<Column Name="FileExtension"/>
<Column Name="PictureWidth"/>
<Column Name="PictureHeight"/>
</Columns>
</root>
see more at
Create Images Search Result in SharePoint - Part 1
Create Images Search Result in SharePoint - Part 2
Thanks,
Roi