Lastfm

A Lastfm component is used for displaying information about what music you listen to.

Lastfm top artists component dynamically generated html:

   <div class="component lastfm_component">
     <h2>Title goes here</h2>
     <div class="component_content">
       <div class="top_artists">
         <div class="first even item_0 lastfm_entry artist">
           <span class="lastfm_image">
             <img width="48" height="48" src=""/>
           </span>
           <div class="lastfm_metadata">
             <span class="lastfm_artist"></span>
             <span class="lastfm_playcount"></span>
           </div>
         </div>

         <div class="last odd item_1 lastfm_entry artist">
           <span class="lastfm_image">
             <img width="48" height="48" src=""/>
           </span>
           <div class="lastfm_metadata">
             <span class="lastfm_artist"></span>
             <span class="lastfm_playcount"></span>
           </div>[[Category:Components]]
        </div>
      </div>
    </div>
  </div>  

Fig 1.1 - When a user adds a lastfm component to their Viviti site with the top artists option selected, this is the html that is dynamically generated.

Lastfm top tracks component dynamically generated html:

   <div class="component lastfm_component">
     <h2>Title goes here</h2>
     <div class="component_content">
       <div class="top_tracks">
         <div class="first even item_0 lastfm_entry song">
           <span class="lastfm_track_name"></span>
           <span class="lastfm_artist"></span>
           <span class="lastfm_playcount"></span>
         </div>

         <div class="last odd item_1 lastfm_entry song">
           <span class="lastfm_track_name"></span>           
           <span class="lastfm_artist"></span>
           <span class="lastfm_playcount"></span>
        </div>
      </div>
    </div>
  </div>  

Fig 1.1 - When a user adds a lastfm component to their Viviti site with the top tracks option selected, this is the html that is dynamically generated.