How do i customize the layout of the Search Results page?

Topics: Themes
Mar 29, 2013 at 12:30 AM
How can i change the layout of the search results page? Currently my theme shows a thumbnail image, heading, and then the post description/short text on default.aspx. I want the same appearance on the search results page. How can get the theme to apply to the search results?
Mar 29, 2013 at 3:08 PM
Edited Mar 29, 2013 at 3:31 PM
Here's how I currently do it (Example here).
In your theme the method(s) for rendering thumbnail images will be different, so you would have to substitute these methods with those from your own theme.

In search.aspx look for the following code near the bottom of the file:
<asp:repeater runat="server" id="rep">
      <ItemTemplate>
        <div class="searchresult">
          <a href="<%# Eval("AbsoluteLink") %>"><%# Eval("Title") %></a>
          <span class="text"><%# GetContent((string)Eval("Description"), (string)Eval("Content")) %></span>
         <span class="type" runat="server" id="type" />
          <span class="url"><%# ShortenUrl(Eval("AbsoluteLink").ToString())%></span>
        </div>
      </ItemTemplate>
    </asp:repeater>
Here you would add a method call to render the thumbnail:
<asp:repeater runat="server" id="rep">
      <ItemTemplate>
        <div class="searchresult">

//Note the change at this line
          <h4><a href="<%# Eval("AbsoluteLink") %>"><%# GetContentImage((string)Eval("Content"),75,75) %><%# Eval("Title") %></a></h4>
          
          <p class="text"><%# GetContent((string)Eval("Description"), (string)Eval("Content")) %></p>
          <span class="type" runat="server" id="type" /><br />
          <span class="url"><%# ShortenUrl((String)Eval("AbsoluteLink")) %></span>
        </div>
      </ItemTemplate>
    </asp:repeater>
Then in search.aspx.cs you add the necessary code for GetContentImage (your code will differ depending on the logic used in your theme to get the content images).
 /// <summary>
    /// Gets the first content image as a thumbnail.
    /// </summary>
    /// <param name="content">The post or page content.</param>
    /// <param name="scaleSize">The scale width.</param>
    /// <param name="desiredHeight">If thumbnail is shorter, center verticaly to desired height.</param>
    /// <returns>
    /// HTML markup for thumbnail as string.
    /// </returns>
    protected string GetContentImage(string content, int scaleSize, int desiredHeight)
    {
        if (!string.IsNullOrEmpty(content))
        {            
            string thumbnail = CMS.Theme.cUtils.GetThumbImgTag(content, scaleSize, desiredHeight, true, false);
            if (!string.IsNullOrEmpty(thumbnail))
            {
                return string.Format(
                    "<div class='thumbWrap'><div style='width:{0}px;height:{1}px;overflow:hidden;'>{2}</div></div>",
                    scaleSize,
                    desiredHeight,
                    thumbnail
                    );
            }
        }
        return string.Empty;
    }
The devil is in the detail, but that's the gist of it.