This plugin loads an XML file specifying different “bricks” used to make up a fundraising image map and generates a dynamic CSS image map based on the XML file for use as a fundraising meter within pages, posts, and more.
- Loads XML file and displays it as a form within the Administrator panel for editing
- Saves edited XML file
- Parses XML file to generate dynamic image map, with opaque squares representing “bricks” that are not yet purchased and transparent squares representing “bricks” that have been purchased.
- Each brick has a hover button popup that directs the user to a donation page, shopping cart, etc.
- Completely customizable background image, XML file, popup image, and more
For support and further information about the Buy-a-Brick plugin see the plugins homepage at http://www.ghtech.org/tools/plugins.html.
Plugin Official Site
If you have questions about installation or use of this plugin, please visit the official plugin site.
Create and upload the sprite image, popup image, and XML file for use with the plugin. See the official plugin site for details on how to do this, especially if you will be linking to Paypal from your image map.
brickstatic.cssfile to match your WordPress theme or fundraising page. Replace the existing CSS file in the .zip file with the file you edited.
Install and activate the Buy-a-brick plugin as normal.
Select the Buy-a-Brick Settings under the Options admin menu and fill out the form with the correct information.
Install, activate, and configure exec-PHP or another plugin that allows the execution of PHP code in WordPress posts and pages.
Edit the header.php file for the WordPress theme you are using. Add the following lines somewhere above the
<link type="text/css" href="” rel=”stylesheet” media=”screen”>
[PAGE_SLUG] is the slug of the page you wish the image map to appear on. You can also use any of the other conditional tags in WordPress if you want the image map to appear elsewhere in the site (with a specific page template, in a post, etc.). See the official plugin page for more details.
In the page, post, etc. where you want the image map to appear, add the following code:
- How do I create the image sprite to use in the plugin?
The sprite has two parts: the bottom half should be the image you want to appear when bricks are purchased, with an identical version of the image directly above it with opacity applied to darken it for bricks that are not yet purchased.
- What is the format of the XML file?
<bricks> <item id="item-id-1" product_name="message-that-appears-in-popup-1" link_brick="url-that-popup-links-to" width="width-of-this-brick-in-px" height="height-of-this-brick-in-px" top= upper-bound-of-this-brick-in-px" left="left-location-of-this-brick-in-px" type="2-if-purchased-1-otherwise" raised="total-raised-so-far-first-item-only" /> </bricks>
An example XML file:
<?xml version="1.0" encoding="utf-8"?> <bricks> <item id="mc1" product_name="Purchase your Brick now $5000" link_brick="http://www.somesite.org/store/products-page/bricks/bricks4" width="99" height="49" top="0" left="0" type="1" raised="$3.700.00"/> <item id="mc2" product_name="Mr. Testing Bricks" link_brick="http://www.somesite.org/store/products-page/bricks/bricks4" width="99" height="49" top="0" left="100" type="2" /> <item id="mc3" product_name="Purchase your Brick now $5000" link_brick="http://www.somesite.org/store/products-page/bricks/bricks4" width="99" height="49" top="50" left="0" type="1" /> <item id="mc4" product_name="Mrs. Testing Bricks" link_brick="http://www.somesite.org/store/products-page/bricks/bricks4" width="99" height="49" top="0" left="200" type="2" /> </bricks>
Contributors & Developers
“Buy a Brick” is open source software. The following people have contributed to this plugin.Contributors
- Revised settings to allow for five fundraising levels and specification of completely different URLs to link to from each level. This is for compatibility with Paypal buttons.
- Updated plugin to handle Paypal donation or purchase link within image map.
- First stable version