Create Images Search Result in SharePoint - Part 3

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


And add this source:


<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">&amp;nbsp;</xsl:text><xsl:value-of select="$AlertMeText" /></a>
    </span>
  </xsl:if>

  <xsl:if test="string-length($SrchRSSLink) &gt; 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">&amp;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">&amp;nbsp;</xsl:text><xsl:value-of select="$AlertMeText" /></a>
    </span>
   </xsl:if>
   <xsl:if test="string-length($SrchRSSLink) &gt; 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">&amp;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)&gt;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) &gt; 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 &gt; 150 and $width &gt;= $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 &gt; 150 and $width &lt; $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) &gt; 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> 
                &#160; 
            </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) &gt; 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) &gt; 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"> 
  &#8230;  
</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) &gt; 0'> 
<xsl:if test="number($size) &gt; 0"> 
<br/>גודל קובץ: 
<xsl:choose> 
<xsl:when test="round($size div 1024) &lt; 1"><xsl:value-of select="$size" /> Bytes</xsl:when> 
<xsl:when test="round($size div (1024 *1024)) &lt; 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) &gt; 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:&quot;', $urlEncoded, '&quot;', 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) &gt; 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>

Go to Result Query Option -> Select Columns
 
 
 
And copy this Code


<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

Comments

  1. venkateshApril 24, 2012 at 11:21 AM

    nice

    ReplyDelete
  2. srinivasJanuary 17, 2013 at 7:36 AM

    Hi looking good blog

    iam using Image with formatting and constraints for publishing in one of custom list .in which the user can upload his meta data and his picture using custom list form. i am doing search funtion on that list i have created search scope to that list i am getting data from that list like first name last name by creating some managed propertis .but i a unable get the images from list can any one provide information how to do. i should not use any code

    ReplyDelete
  3. Roi kolbingerJanuary 22, 2013 at 6:13 PM

    To to get a image from a list I would use maybe SPServices. Take the image through JavaScript code. If you can take the name of the list or its ID - you can take a image.

    ReplyDelete
  4. AnonymousMarch 26, 2013 at 9:51 PM

    If the search will crawl the images referenced on pages??? Who can answer?

    ReplyDelete
  5. Roi kolbingerApril 19, 2013 at 11:19 AM

    You can read the second post in this article - "Create New Rules for SharePoint Search." In this article I explain the Search crawl

    http://iwillsharemypoint.blogspot.co.il/2011/02/create-images-search-result-in_25.html

    ReplyDelete

Post a Comment

Popular posts from this blog

A sharepoint list view of the current month

Image
Who has not asked to make view of the current month? And every time we need to reinvent the wheel. This time I'll show how to do this: Need to create two columns 1. Start of the Month 2. End of the Month Two columns need type -" calculated " The formula of "Start of the Month" =DATE(YEAR(Created),MONTH(Created),1) The formula of "End of the Month" =DATE(YEAR(Created),MONTH(Created)+1,1)-1 The view definition in the "Filter": "Start of the Month" is Less than or Equle to [Today] Or "End of the Month" is Greater than or Equal to [Today] Here is the result: Hope i helped, Roi
Read more

The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters

Image
When you try to compile a project in visual studio and get this message The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters All you need is to correct an error that VS created (and I do not know how) He has written a number of times in the " Deployment Path " "$ SharePoint.Project.FileNameWithoutExtension $ _ $ SharePoint.Feature.FileNameWithoutExtension $" Instead of one in " Deployment Path " It should be like this "YourValue_ $ SharePoint.Feature.FileNameWithoutExtension $" Yours, Roi  
Read more

Export SharePoint 2010 List to Excel with PowerShell

Image
In the previous article I explained how to create a list item, This time I will demonstrate how to export SharePoint List to Excel using PowerShell. All we need to do, is to open the Site, the List and the Items, and then to export it to Excel. Code: $MyWeb = WebUrl $ MyList = MyWeb. Lists [ " ListName " ] $ MyItems = $MyList. Items $ MyItems | Select Fields.. | Export-Csv FilePath $ MyWeb. Dispose() The list looks like this The Excel sheet looks like this
Read more