CODEWITHSUNDEEP
htmlasp.net-mvc
leora
leora

Reputation: 196891

render tags as a cloud

i have a database of links and tags. what is the easiest way i can display this as a tag cloud?

Upvotes: 1

Views: 401

Answers (3)

Alex
Alex

Reputation: 111

You can try Tagul web service. It allows you to create beautiful tag clouds from your data source (xml, rss, html) and embed it on your web page.

Upvotes: 0

donut
donut

Reputation: 9507

I would suggest using an unordered-list (<ul>) and then CSS classes to define the size of different tags (i.e., <li class="used_many_times"> vs. <li class="used_few_times">). I did just this except that it was a list of events and the display size of the events were based on how soon the event would happen.

Here's an example of the HTML code that would be generated for it:

<ul> 
    <li class="in2days"><a href="/event/2009-09-07-12-step-study-groups" rel="#12-step-study-groups-1-details">12 Step Study Groups</a><div id="12-step-study-groups-1-details" class="details">Monday, Sep 7, 2009, 7:00pm</div></li> 
    <li class="in1day"><a href="/event/2009-09-06-all-access-tour-mesa-campus" rel="#all-access-tour-mesa-campus-2-details">All Access Tour-Mesa Campus</a><div id="all-access-tour-mesa-campus-2-details" class="details">Sunday, Sep 6, 2009, 9:45am</div></li> 
    <li class="in3days"><a href="/event/2009-09-08-back-to-basics" rel="#back-to-basics-3-details">Back to Basics</a><div id="back-to-basics-3-details" class="details">Tuesday, Sep 8, 2009, 6:00pm</div></li> 
    <li class="in1day"><a href="/event/2009-09-06-celebrate-recovery" rel="#celebrate-recovery-4-details">Celebrate Recovery</a><div id="celebrate-recovery-4-details" class="details">Sunday, Sep 6, 2009, 6:00pm</div></li> 
    <li class="today"><a href="/event/2009-09-05-childrens-weekend-services" rel="#childrens-weekend-services-5-details">Children's Weekend Services</a><div id="childrens-weekend-services-5-details" class="details">Saturday, Sep 5, 2009, 6:00pm</div></li> 
    <li class="in2months"><a href="/event/2009-10-23-destination-zero-2009" rel="#destination-zero-2009-7-details">Destination Zero 2009</a><div id="destination-zero-2009-7-details" class="details">Friday, Oct 23, 2009</div></li> 
    <li class="in3weeks"><a href="/event/2009-09-22-doorway-to-hope" rel="#doorway-to-hope-8-details">Doorway to H.O.P.E.</a><div id="doorway-to-hope-8-details" class="details">Tuesday, Sep 22, 2009, 7:00pm</div></li> 
    <li class="in1month"><a href="/event/2009-10-02-encounter-service" rel="#encounter-service-9-details">Encounter Service</a><div id="encounter-service-9-details" class="details">Friday, Oct 2, 2009, 7:00pm</div></li> 
    <li class="in3monthsplus"><a href="/event/2009-11-28-family-weekend" rel="#family-weekend-10-details">Family Weekend</a><div id="family-weekend-10-details" class="details">Saturday, Nov 28, 2009, 6:00pm</div></li> 
    <li class="in2weeks"><a href="/event/2009-09-15-first-call-singles--bible-study-resuming" rel="#first-call-singles--bible-study-resuming-11-details">First Call Singles -Bible Study resuming</a><div id="first-call-singles--bible-study-resuming-11-details" class="details">Tuesday, Sep 15, 2009, 7:00pm</div></li> 
    <li class="in1week"><a href="/event/2009-09-12-first-call-singles--movie-and-dinner" rel="#first-call-singles--movie-and-dinner-14-details">First Call Singles- Movie and Dinner</a><div id="first-call-singles--movie-and-dinner-14-details" class="details">Saturday, Sep 12, 2009, 3:00pm</div></li> 
    <li class="in4days"><a href="/event/2009-09-09-taking-marriage-to-the-next-level" rel="#taking-marriage-to-the-next-level-39-details">Taking Marriage to the Next Level</a><div id="taking-marriage-to-the-next-level-39-details" class="details">Wednesday, Sep 9, 2009, 7:00pm</div></li>
</ul>

Here's the CSS code that styles the list. I didn't write it.

#content ul#cloud{
    width: 598px;
    margin: 0;
    padding: 0;
}

#content ul#cloud li{
    display:-moz-inline-box;
    display:inline-block;
    list-style: none;
    padding-left: 0;
    padding-right: 15px;
    font-size: 1.1em;
    background: none;
    line-height: 1.4;
}

*html #content ul#cloud li{
    display: inline;
}

*+html #content ul#cloud li{
    display: inline;
}

#content ul#cloud li a{
    color: #B0A073;
}

#content #cloud li.today a{
    font-size: 1.8em;
    color: #FCF9F2;
}

#content #cloud li.in1day a{
    font-size: 1.7em;
    color: #F4EEE5;
}

#content #cloud li.in2days a{
    font-size: 1.6em;
    color: #E3DCCA;
}

#content #cloud li.in3days a{
    font-size: 1.5em;
    color: #DDD5C0;
}

#content #cloud li.in4days a{
    color: #D7CEB5;
    font-size: 1.4em;
}

#content #cloud li.in1week a{
    color: #D0C6AB;
    font-size: 1.3em;
}

#content #cloud li.in2weeks a{
    color: #CABFA0;
    font-size: 1.2em;
}

#content #cloud li.in3weeks a{
    color: #C3B795;
    font-size: 1.1em;
}

#content #cloud li.in1month a{
    color: #BDB08A;
    font-size: 1em;
}

#content #cloud li.in2months a{
    font-size: .9em;
    color: #B7A87F;
}

#content #cloud li.in3monthsplus a{
    font-size: 1em;
    color: #B0A073;
}

As far as the ASP.net part of this goes I have no clue.

Upvotes: 1

Vinay Sajip
Vinay Sajip

Reputation: 99530

You could adapt from this.

Upvotes: 1

Related Questions