Forums » Community Server Archive (read only) » Gallery » How to: Include image thumbs in Search & Tag Filter Results

How to: Include image thumbs in Search & Tag Filter Results

This post has 18 Replies | 9 Followers

Top 75 Contributor
Posts 247
Points 3,020
Reply
davelee Posted: Mon, Jul 17 2006 10:15 PM

When a search result includes a title or description of an image.. wouldn't it be appropriate to include an image thumbnail in that result item?

It'd be great if this were built-in. But, has anyone modded to do this?

David
Top 75 Contributor
Male
Posts 276
Points 4,210
Reply
SuperJMN replied on Tue, Jul 18 2006 9:19 AM
A must have feature!

José Manuel Nieto
Translator of the Spanish Language Pack for Community Server 2008
Developer of CS Writer

  • | Post Points: 5
Top 100 Contributor
Posts 220
Points 3,445
Reply
petrus replied on Sun, Aug 27 2006 5:12 AM
davelee:

When a search result includes a title or description of an image.. wouldn't it be appropriate to include an image thumbnail in that result item?

It'd be great if this were built-in. But, has anyone modded to do this?

Althrough it is an old post, I'm still wondering about it. It would be also nice to include image thumb in Tags search.

Petrus

  • | Post Points: 5
Top 100 Contributor
Posts 220
Points 3,445
Reply
petrus replied on Tue, Sep 12 2006 4:25 AM
bump

Petrus

  • | Post Points: 20
Top 75 Contributor
Posts 247
Points 3,020
Reply
davelee replied on Wed, Nov 8 2006 8:11 PM
anybody done this yet????  Big Smile
David
Top 75 Contributor
Posts 247
Points 3,020
Reply
davelee replied on Tue, Dec 5 2006 6:01 PM

Alrighty- I did some tweaking in my source and now Gallery Post items have thumbs in both Search results and Tag Filter results... like this:

search thumbs preview

This requires SDK/source modification and recompilation... here's what I did:

Add the "CS:Href.."  to Skin-SearchResults.ascx and Skin-TagPostResults.ascx as follows:

<div class="CommonSearchResult">

<%-- DOL- added hyperlink/thumb to search results for gallery posts--%>

<CS:Href runat="server" ID="thumb" CssClass="aSearchThumb" Visible="false" />

<%# DataBinder.Eval(Container.DataItem, "BestMatch").ToString().Length > 0 ? DataBinder.Eval(Container.DataItem, "BestMatch") : Formatter.GetBodySummary(DataBinder.Eval(Container.DataItem, "Body").ToString(),350, SearchTextTop.Text, System.Drawing.Color.Black, System.Drawing.Color.Yellow) %>

</div>

<%-- DOL- added "clear:left" to class CommonSearchResultDetails in common.css --%>

<div class="CommonSearchResultDetails">...

The "clear:left" added to the CommonSearchResultDetails class is req in common.css

In each respective codefiles- \Controls\Search\SearchResults.cs and \Controls\Utility\TagPostResults.cs-  add to ItemDataBound per following:

case ListItemType.AlternatingItem:

//DOL- added thumb/hyperlink to search results for gallery posts

if (post.ApplicationType == ApplicationType.Gallery)

{

HyperLink thumb = e.Item.FindControl("thumb") as HyperLink;if (thumb != null)

{

thumb.Visible = true;

thumb.NavigateUrl = post.Url;

thumb.Text = "<img src='" + post.ThumbURL + "' alt='' class='imgSearchThumb' />";

}

}

//end DOL

HyperLink SectionUrl = e.Item.FindControl("SectionUrl") as HyperLink;

In \Components\Search\IndexPost.cs add the private and public properties:

//DOL- added ThumbURL properties to IndexPost.cs .. to display thumbs in search results that are gallery posts

private string _thumbURL;public string ThumbURL

{

get { return _thumbURL; }

set { _thumbURL = value; }

}

And then, finally, in \CommunityServerSearchBarrel\GalleryBarrelItem.cs , add code to set ThumbURL property:

public override void Format(IndexPost post)

{

Gallery gal = Galleries.Galleries.GetGallery(post.SectionID, true);if (gal != null)

{

//DOL- added thumbnail url src to GalleryBarrelItem.cs.. to display thumbs in search results that are gallery posts, in search and tag search.

post.Url = GalleryUrls.Instance().PictureUrl(gal.ApplicationKey, post.PostID);if (GalleryUrls.Instance().ThumbnailURL(gal.ApplicationKey, post.PostID) != null)

{

post.ThumbURL = GalleryUrls.Instance().ThumbnailURL(gal.ApplicationKey, post.PostID);

}

//end DOL

}

post.ApplicationUrl = GalleryUrls.Instance().Home;

}

Style as you wish in common.css... for example:

.imgSearchThumb{border-width: 1px;}

.aSearchThumb{float: left; padding: 5px;}

and don't forget the clear:left...

.CommonSearchResultDetails

{

...blah etc...

clear:left;

}

That should do it!  (pardon the formatting here in this post) 

Please... recommend fixes.. changes!! 

David
Top 25 Contributor
Posts 1,160
Points 70,210
CS Developers
Reply
DanBartels replied on Thu, Dec 14 2006 10:37 PM

Very cool indeed....  I am going to mull this over a bit more, but I was thinking of adding support for attaching an image to any post, and using that as a thumbnail...  Possibly adding support for icons of the attachment if its not an image...  it seems to be a nice user experience...  but you shouldnt let me stop you...  Thanks for contributing.

 Dan

  • | Post Points: 20
Top 75 Contributor
Posts 247
Points 3,020
Reply
davelee replied on Mon, Dec 18 2006 10:59 AM

DanBartels:
I was thinking of adding support for attaching an image to any post, and using that as a thumbnail...  Possibly adding support for icons of the attachment if its not an image

Great, Dan... I look forward to your ideas. 

David
Not Ranked
Posts 29
Points 280
Reply
das replied on Wed, Jan 10 2007 11:38 PM
Cool! Excelent work! Yes I've applied for my community and search result looks better.

 

Not Ranked
Posts 14
Points 190
Reply
BDMcBride replied on Tue, Jun 5 2007 9:09 PM

I couldn't find those *.cs files in Community Server 2007. Will this code need to be changed to work in the new version? I've been looking at the tag browser code all day and still can't get it nailed down.

  • | Post Points: 20
Top 75 Contributor
Posts 247
Points 3,020
Reply
davelee replied on Wed, Jun 6 2007 11:02 AM

I hadn't had time to jump into CS2007 yet.. but you're right.. CS2007 will require a different approach.

David
Not Ranked
Posts 26
Points 515
Reply
editsmile replied on Fri, Jun 8 2007 1:22 PM

Yes,it require a different approach,but easier
 just change two files ,the indexpostlist.aspx(Themes\XXXXXX\Search) and the tagslist.aspx(Themes\XXXXXX\Tags)

Add following code 

 <CSControl:PlaceHolder runat="server" Tag="Div">
<DisplayConditions><CSGallery:GalleryPostPropertyValueComparison ComparisonProperty="ApplicationType"

ComparisonValue="Gallery" Operator="EqualTo" runat="server" /></DisplayConditions>
<ContentTemplate>
                    <div class="PictureList"><div class="ClearLeft">&nbsp;</div>
        <div class="pic">
         <span><CSGallery:GalleryPostData LinkTo="ViewPicture"

runat="server"><ContentTemplate><CSGallery:GalleryPostImage ImageType="Thumbnail"

runat="server"/></ContentTemplate></CSGallery:GalleryPostData></span>
        </div>
                    <div class="ClearLeft">&nbsp;</div>
                    </div>
     </ContentTemplate>
 </CSControl:PlaceHolder>

 after

<div class="CommonSearchResultArea">
               <CSControl:IndexPostData runat="server" LinkTo="Post" Property="Title" Tag="H4" CssClass="CommonSearchResultName" />

And don't forget import gallery assembly

<%@ Import Namespace="CommunityServer.Galleries.Components" %>

  • | Post Points: 50
Not Ranked
Posts 14
Points 190
Reply
BDMcBride replied on Fri, Jun 8 2007 11:13 PM

 That worked!! Thanks a bunch for the reply!

  • | Post Points: 5
Top 75 Contributor
Male
Posts 276
Points 4,210
Reply
SuperJMN replied on Sat, Jun 9 2007 7:57 AM

I've tried your solution but I didn't find the fragment of code you mention (the "after")

For example, in indexpostlist.aspx I found:

<CSControl:IndexPostData runat="server" Property="ApplicationType" Text="&lt;div class=&quot;CommonSearchResultArea {0}&quot;&gt;" />

<CSControl:IndexPostData runat="server" Property="Title" LinkTo="Post" Tag="h4" CssClass="CommonSearchResultName" />

That seems a lot different Sad

I have CS 2007 SP1, but it appears that you have different tagslist.aspx and indexpostlist.aspx.

José Manuel Nieto
Translator of the Spanish Language Pack for Community Server 2008
Developer of CS Writer

  • | Post Points: 35
Top 50 Contributor
Posts 319
Points 4,865
Reply
shakes replied on Sat, Jun 9 2007 3:02 PM

I placed the code after  <div class="CommonSearchResultDetails"> and that seemed to work for tagslist.aspx didn't need to import the galleries components either

peace shakes

Carolina Pulse

  • | Post Points: 20
Page 1 of 2 (19 items) 1 2 Next > | RSS
Powered by Community Server (Commercial Edition), by Telligent Systems

Copyright© 2008 Telligent Systems Inc. All rights reserved
CommunityServer.com  •  Telligent.com