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

Answered (Verified) This post has 1 verified answer | 18 Replies | 9 Followers

davelee
Top 75 Contributor
247 Posts
Points 3,005
Reply | Contact
By: 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
 

Answered (Verified) Verified Answers

davelee
Top 75 Contributor
247 Posts
Points 3,005
Reply |Contact
Answered (Verified) By: davelee
Posted: Tue, Dec 5 2006 6:01 PM In reply to

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
 
Answered (Verified)

All Replies

SuperJMN
Top 75 Contributor
251 Posts
Points 3,875
Reply |Contact
By: SuperJMN
Posted: Tue, Jul 18 2006 9:19 AM In reply to
A must have feature!
José Manuel Nieto
Translator of the Spanish Language Pack for Community Server 2007
Developer of CS Gallery Manager
 
  • Post Points: 5 |
petrus
Top 100 Contributor
220 Posts
Points 3,445
Reply |Contact
By: petrus
Posted: Sun, Aug 27 2006 5:12 AM In reply to
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 |
petrus
Top 100 Contributor
220 Posts
Points 3,445
Reply |Contact
By: petrus
Posted: Tue, Sep 12 2006 4:25 AM In reply to
bump

Petrus

 
  • Post Points: 20 |
davelee
Top 75 Contributor
247 Posts
Points 3,005
Reply |Contact
By: davelee
Posted: Wed, Nov 8 2006 8:11 PM In reply to
anybody done this yet????  Big Smile
David
 
davelee
Top 75 Contributor
247 Posts
Points 3,005
Reply |Contact
Answered (Verified) By: davelee
Posted: Tue, Dec 5 2006 6:01 PM In reply to

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
 
Answered (Verified)
DanBartels
Top 25 Contributor
1,155 Posts
Points 69,765
CS Developers
Reply |Contact
By: DanBartels
Posted: Thu, Dec 14 2006 10:37 PM In reply to

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 |
davelee
Top 75 Contributor
247 Posts
Points 3,005
Reply |Contact
By: davelee
Posted: Mon, Dec 18 2006 10:59 AM In reply to

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
 
das
Not Ranked
29 Posts
Points 280
Reply |Contact
By: das
Posted: Wed, Jan 10 2007 11:38 PM In reply to
Cool! Excelent work! Yes I've applied for my community and search result looks better.

 

 
BDMcBride
Not Ranked
14 Posts
Points 190
Reply |Contact
By: BDMcBride
Posted: Tue, Jun 5 2007 9:09 PM In reply to

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 |
davelee
Top 75 Contributor
247 Posts
Points 3,005
Reply |Contact
By: davelee
Posted: Wed, Jun 6 2007 11:02 AM In reply to

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

David
 
editsmile
Not Ranked
26 Posts
Points 515
Reply |Contact
By: editsmile
Posted: Fri, Jun 8 2007 1:22 PM In reply to

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 |
BDMcBride