Kiva.org is a charity website that allows individuals to provide the capital for micro loans to the working poor.
The Kiva Available Loans widget is a control designed to be used with the BlogEngine.Net blog platform. This control lists, via the Kiva API, a number of the latest loan requests that have not yet been fulfilled.
The available loans can display a developer specified number of thumbnail images. When selected, each image displays a pop up box containing details of the entrepreneur and a link to the loan details page.
Kiva Available Loans control with a basic Kiva styling.
Kiva Available Loans control with the loan description pop up displayed. The contol has a basic Kiva styling.
The Kiva Available Loans widget is released under version 2.1 of the GNU Lesser General Public License.
The latest version of the control can be downloaded here.
How to use the widget with BlogEngine.Net?
The Kiva Available Loans widget can be used as either a BlogEngine.Net widget or as a standard ASP.Net control. To make use of the as a BlogEngine.Net widget, simply:
- Download the latest version of the widget.
- Uncompress the archive, and copy the contents into the root folder of the blog.
- By default, the CSS files are placed in the themes/standard folder. If this is not the theme you are using, copy the files kivaloans.css, kivaloans-ie.css and kivaloans-ie6.css into your theme folder.
- Add the following code snippet into the header of your theme’s master page:
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/kivaloans.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" media="Screen" href='kivaloans.css' charset="iso-8859-1" />
<!--[if IE]>
<link rel="Stylesheet" type="text/css" media="Screen" href='kivaloans-ie.css' charset="iso-8859-1" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="Stylesheet" type="text/css" media="Screen" href='kivaloans-ie6.css' charset="iso-8859-1" />
<![endif]-->
- Log in to the blog as an administrator account and add a Kiva Loans widget to the widget block.
Within the widget’s edit screen you can modify the width, height and number of loan images displayed. This will allow you to fine tune the control to better fit in with your blog’s layout.
How to use the basic control with BlogEngine.Net?
The Kiva Available Loans control does not have to be used as a BlogEngine.Net widget. It can also be used as a standard ASP.Net control. To do this:
- Download the latest version of the widget.
- Uncompress the archive, and copy the contents into the root folder of the blog.
- By default, the CSS files are placed in the themes/standard folder. If this is not the theme you are using copy the files kivaloans.css, kivaloans-ie.css and kivaloans-ie6.css into your theme folder.
- Add the following code snippet into the header of your theme’s master page:
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/kivaloans.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" media="Screen" href='kivaloans.css' charset="iso-8859-1" />
<!--[if IE]>
<link rel="Stylesheet" type="text/css" media="Screen" href='kivaloans-ie.css' charset="iso-8859-1" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="Stylesheet" type="text/css" media="Screen" href='kivaloans-ie6.css' charset="iso-8859-1" />
<![endif]-->
- Add the
<blog:KivaLoansControl ID="loans" runat="server" /> user control tag to your master page.
Included in the control archive are some images and CSS rules to give a Kiva style look and feel to the control. To make use of these use this code snippet:
<div id="loansBox" class="loansBox" >
<h2><span>Kiva Loans</span></h2>
<blog:KivaLoansControl ID="loans" runat="server" NumberOfLoansDisplayed="3" />
</div>
Configuring the control
The KivaLoansControl user control is designed to render as CSS friendly standards complaint HTML. This makes styling the control easy. The control also has a number of properties that allow users to configure what content the control renders. These are:
- CSSClass : Gets and sets the CSS class of the parent tags that the control renders.
- KivaLinkText : Gets and sets the text displayed in the link to Kiva.org which is displayed below the loan thumbnails.
- CloseButtonText : Gets and sets the alternative image text for the close button.
- CloseButtonImagePath : Gets and sets the path to the close button image.
- NumberOfLoansDisplayed : Gets and sets the number of loan thumbnails to be displayed.
- ImageWidth : Gets and sets the maximum width of the loan thumbnails.
- ImageHeight : Gets and sets the maximum height of the loan thumbnails.
- DisplayKivaLink : Gets and sets if the link to Kiva.org which is displayed below the loan thumbnails is to be displayed.