Shortcode paypal_button now supports translation to 17 languages

With the release of version 1.4 today, the plugin now supports same 17 languages that are supported by PayPal. Those languages are

  1. Danish
  2. Dutch
  3. English
  4. French
  5. German
  6. Hebrew
  7. Italian
  8. Japanese
  9. Norwegian
  10. Polish
  11. Portuguese
  12. Russian
  13. Spanish
  14. Simplified Chinese
  15. Swedish
  16. Thai
  17. Turkish

Stay tuned for more updates!

Generate PayPal Payment URL using paypal_button shortcode

Recently added “echo_link” attribute open new doors of using this plugin. I will explain them here
1. Although, this plugin already has option to choose a custom payment button. But, if it does not comply with you situation you can use same shortcode like following
<a href="[paypal_button name=&quot;ABC Product&quot; amount=&quot;10&quot; echo_link=&quot;1&quot;]"><img alt="" src="http://xyz.com/linktoyourbutton.png" /></a>
2. To open payment page in a new window you can use the same above code with additional one attirbute i.e. traget=”_blank”
<a href="[paypal_button name=&quot;ABC Product&quot; amount=&quot;10&quot; echo_link=&quot;1&quot;]" target="_blank"><img alt="" src="http://xyz.com/linktoyourbutton.png" /></a>
3.  If you just want to have payment URL so you an use it anywhere. For example, some themes, plugins, shortcodes and widget require a payment URL that have to start with http:// then I believe there is no other way around except to generate a PayPal payment URL from the shortcode and paste it to the field.
For example. Write following in any of your post (in Text view) after setting the proper attributes of your payment
<a href="[paypal_button amount=10 echo_link=1 name=&quot;ABC&quot;]">Buy Now</a>
Then Visit this post and copy the link of “Buy Now” (right click on the URL and select “Copy Link”)and paste it where you want to put the Payment URL (starting with http://&#8221;). Copying URL from browser’s location bar after clicking on the link would not work. You have to copy by right clicking on it.
Link to default PayPal buttons are as below, just in case, you need them
Image Link to Image
https://www.paypal.com/en_AU/i/btn/btn_buynowCC_LG.gif
https://www.paypal.com/en_AU/i/btn/btn_paynowCC_LG.gif
https://www.paypal.com/en_AU/i/btn/btn_donateCC_LG.gif
https://www.paypal.com/en_AU/i/btn/btn_buynow_LG.gif
https://www.paypal.com/en_AU/i/btn/btn_paynow_LG.gif
https://www.paypal.com/en_AU/i/btn/btn_cart_LG.gif
https://www.paypal.com/en_AU/i/btn/btn_donate_LG.gif
https://www.paypal.com/en_AU/i/btn/btn_buynow_SM.gif
https://www.paypal.com/en_AU/i/btn/btn_paynow_SM.gif
https://www.paypal.com/en_AU/i/btn/btn_donate_SM.gif
https://www.paypal.com/en_AU/i/btn/btn_cart_SM.gif

WordPress Shortcode for Paypal Pay, Buy, Donation and Cart Buttons

This plugin adds “paypal_button” shortcode to display pay now, buy now, donation and add to cart PayPal buttons with facility to customize they paypal checkout page. After installation you would need to set your PayPal E-Mail address, Business Name (for donations) in “Settings->PayPal Buttons”. You can also set you companies logo in PayPal’s checkout page . It has numerous other option to allow all possible variant of the buttons. Some common usage of the shortcode are as follows

Pay Now Button:
[paypal_button type="paynow" amount="100"]
Buy Now Button:
[paypal_button type="buynow" name="WordPres Portfolio Theme" amount="100"]
Donation Button:
[paypal_button type="donate" amount="100"]
Add to cart Button:
[paypal_button type="cart" name="Computer Table" amount="100"]

pay now, buy now, add to cart, donate

Possible variants of PayPal buttons

Paypal Checkout Page with Company Logo

Paypal Checkout Page with Company Logo

There  are 16 attributes for this shortcode and all of them are option. If none of them is specified, it will look for the what has been configureding in Settings page. If nothing is set up in Settings page, It will try to use the website’s settings.

Shortcode Help Section

type:
(string) (optional) Type of transaction. Allowed Values are
Possible Values: ‘paynow’, ‘buynow’, ‘cart’ or ‘donations’

id:
(string) (optional) Product Number
Possible Values: Any numeric product id

email:
(string) (optional) Your PayPal E-Mail address.
Possible Values: A valid PayPal E-Mail address

name:
(string) (optional) Name of the Product
Possible Values: Any String

amount:
(numeric) (optional) Product price to be charged. Yes, you can left empty for user to input amount. This can be used for donations.
Possible Values: Any numeric value

quantity:
(numeric or string) (optional) Specfiy quantity as number or range or possible comma separated values. Leave empty to let user specify any quantity.
Possible Values: “1” or “1,5,10” or “1-10″

quantity_txt_postfix:
(string) (optional) Post fix text to be shown in quantity dropdown.
Possible Values: ” items” or ” products”

field_sep:
(string) (optional) HTML code to separate the generated visible HTML fields. Use “<br />” for new line.
Possible Values: “&nbsp;” or “<br />”

amount_prompt:
(boolean) (optional) Setting to “1” will enable user to enter amount they would like to pay.
Possible Values: 1 or 0

echo_link:
(boolean) (optional) Set to “1” for linked output of they payment
Possible Values: 1 or 0 Default:0

open_new_window:
(boolean) (optional) Set to “1” to open payment page in a new window
Possible Values: 1 or 0

btn_url:
(string) (optional) Set to URL of the custom button image

currency:
(string) (optional) Currency of the Transaction.
Possible Values: ‘USD’ or ‘CAD’ or any currency code

tax_rate:
(numeric) (optional) Tax rate in percentage applied to the total price.
Possible Values: 0.0001 to 100

shipping_charges:
(numeric) (optional) Shipping charges for the product.
Possible Values: Any numeric value

btn_size:
(string) (optional) Set size of the button either ‘large’ or ‘small’.
Possible Values: ‘large’ or ‘small’

btn_display_cc:
(string) (optional) Display Credit Cards Logo under the button.
Possible Values: ‘yes’ or ‘no’

add_note:
(string) (optional) Let buyer add a note to order.
Possible Values: ‘yes’ or ‘no’

thankyou_page_url:
(string) (optional) Buyer will be redirect to this page after successful payment.
Possible Values: An absolute URL e.g. http://abc.com/thankyou

checkout_logo_url:
(string) (optional) URL to your Logo image.
Possible Values: An absolute URL e.g. http://abc.com/logo.png

checkout_header_border_color:
(string) (optional) Set border color of the checkout page header.
Possible Values: A HTML Hexa-decimal code. e.g. FFFF00, 999999 etc

checkout_header_bg_color:
(string) (optional) Change background color of the checkout page header.
Possible Values: A HTML Hexa-decimal code. e.g. FFFF00, 999999 etc

checkout_bg_color:
(string) (optional) Change background color of the entire checkout page
Possible Values: A HTML Hexa-decimal code. e.g. FFFF00, 999999 etc

PayPal Button shortcode setting page

PayPal Button shortcode setting page

Update 1: Plugin now supports custom payment button.

Update 2: Plugin now supports 17 languages to translate the payment buttons.

How to Fix Aspect Ratio Problem of NextGen GalleryView Template

NextGen is a very powerful and complete photo management plugin for WordPress. It provide several ways to manipulate and display image on the website. It has option for slideshow, thumbnail, custom templating, widgets and shortcodes. I recently utilize it in one of my client’s website and uses GalleryView Template to display the images. You can download it from here

ngg_galleryview_original

It’s a great plugin. But, unfortunetly, it was making a common mistake to display images. It display stretched images. I never thought that in these days when CSS has been so powerful that there are number of ways to avoid stretching and aligning the images in a way that it remain looks beautiful for most of the dimensions. This is how it was appearing.

ngg_galleryview_default

This image is of 800px x 483px but plugin forced it to 450px x 400px, opsss… and look so awful. Here is how to fix it.

Fixing the stretching

  1. Browse to /wp-content/plugins/nggGalleryview
  2. Find and open “gallerview.css“
  3. Find “.galleryview .panel img”. It will have following css
.galleryview .panel img {
   width: 450px;
   height: 400px
}

Change it to

</pre>
.galleryview .panel img {
 max-height: 400px
}
<pre>

That is, Remove one of the dimension (what best suites you) and change the other one to max-width/max-height. It should fix the stretching problem. But, now you may be having another issue, that image is not cropped from the center. Couple of solution is

1.     Cropping from Image Center

To fix this you image dimension should be fixed (assuming 800px). You can use the following CSS to centralize the image in the viewing area. Assuming you have omitted width and used max-height (as above).

</pre>
.galleryview .panel img {
 max-Height: 400px
 position: absolute;
 top:0;
 left:50%;
 margin-left: -400px;  /* half of your image’s width*/
}

You would use top and margin-top to center it vertically.

2.     Make it bigger to accommodate big images

If your content area is big enough to accommodate your pictures, why you must limit them to width of 450px? This is how you will span the gallery to whole of your content area. Lets expand it to width of 680px;

  1. Browse to /wp-content/plugins/nggGalleryview
  2. Find and open “gallerview.css“
  3. Find “.galleryview .panel img”. Change the css to following
</pre>
.galleryview .panel img {
 max-height: 400px;
 }
  1. Find .galleryview and add
text-align: center;
  1. Same directory open “galler-galleryview.php”
  2. Find “panel_width: 450,” (line #40) and change it to “panel_width: 680,”
  3. That’s it. Sample output is below.

ngg_galleryview_fixed

Paging Carousel using Twitter Bootstrap

Twitter Bootstrap is powerful front-end framework for easier, faster and a reliable web development. It has 12-column responsive grid systems with dozens of JavaScript plug-in, styling for all the html tags (forms controls, tables, headings, lists etc). It provides everything to get started with the developed immediately. But, If you want advanced features you have to do them by yourself.

For example, bootstrap provides a simple carousel JavaScript plug-in that only support next and back slider navigation. It has only two callbacks, two attributes and five methods at the moment. I wanted to have a paging carousel. I want all items to be displayed below the carousel as bullets or numbers and when clicked should show up the exact slide. It should also have the default behavior of auto scrolling to next slide. Bootstrap does not support it. Fortunately, it does have the way to develop one.

This is what we are looking for.

  1. First of all, we need html markup. Its same as in the bootstrap’s example with the addition of navigation div.
    <div id="myCarousel" class="carousel slide">
    
    <!-- Carousel items -->
    
    <div class="carousel-inner">
    
    <div class="active item">…</div>
    
    <div class="item">…</div>
    
    <div class="item">…</div>
    
    </div>
    
    <!-- Carousel nav -->
    
    </div>
    
    <div class="carousel-navbar">
    
    <div class="carousel-nav current" > 1 </div>
    
    <div class="carousel-nav"> 2 </div>
    
    <div class="carousel-nav"> 3 </div>
    
    </div>
  2. Call carousel
    $('#myCarousel').carousel()

    You should see your carousel working but not the navigation.

  3. Lets change the navigation when slide changes. We use carousel’s callback ‘slid’ event
    $('#myCarousel').bind('slid', function(e){ //This event is fired when the carousel has completed its slide transition.
    
    </div>
    index = $('#myCarousel .item').index($('#myCarousel .carousel-inner .active')); // find the index of current slide
    
    $('.carousel-navbar .current').removeClass('current'); // reset the navigation
    
    $('.carousel-nav').eq(index).addClass('current'); // update the navigation
    
    });
  4. Until now navigation only simulates the carousel’s effect. We want it show the selected slide when clicked.
    $('.carousel-nav').bind('click', function(e){
    
    $('.carousel-navbar .current').removeClass('current'); // reset the navigation
    
    index = $('.carousel-nav').index(this); // find the clicked slide navigation
    
    $('#myCarousel').carousel(index); // navigate to the selected slider
    
    $(this).addClass('current'); // mark selected to the clicked navigation
    
    });
  5. That’s it.

Additionally, you can style the navigation with the below css

.carousel-navbar {

text-align:center;

}

.carousel-nav {

border: 1px solid #ccc;

display:inline-block;

padding: <span style="color: black; font-family: Consolas; font-size: 9pt; background-color: white;">5px 10px</span>;

color:black;

}

.carousel-nav:hover{

border:1px solid #777;

}

.carousel-nav.current {

background-color:#ccc;

}

Configuring NGinx as a Reverse Proxy for RETS Server

Ever heard of NGinx? If not, Let me tell you it is well known for its performance, caching and small signatures. Many companies are using it as Reverse Proxy Server and Cache Server to speed up the user’s browsing experience. Parallel is one of them. Their latest release for Linux (which is Plesk 11) include it as a builtin component, when enabled, It uses NGinx HttpProxyModule as Reverse Proxy Server in front of apache Apache.

Here, I will make use of Plesk 11’s NGinx to proxy a RETS (Real Estate Transaction Standard) server.

  1. Create a file “rets.conf” at “/etc/nginx/conf” having following contents

    server {

    listen YOUR_SERVER_IP:80;

    server_name rets.example.com;

    client_header_timeout 3m;

    client_body_timeout 3m;

    send_timeout 3m;

    location / {

    proxy_set_header Host $host;

    proxy_pass http://rets.rets-server.net:6103/;

    proxy_read_timeout 100m;

    proxy_connect_timeout 100s;

    proxy_send_timeout 100m;

    proxy_buffering off;

    }

When you browse http://rets.example.com you should see same response as of http://rets.rets-server.net:6103 . Many RETS server also requires HTTP Authentication. If yours does not, you are good to go. Otherwise, You are going to get “401 Athuntication Failed” error code for your login request. WHY? Because, NGinx filters out all the HTTP Authentication headers. No where I could find to let the NGinx forward them as it is. Anyway, One of the alternative methods is to use the NGinx HttpHeadersModule. Here is how to do it.

  1. You need to add a HTTP custom header while sending login request and put base64 encoded username and password.

    “My-Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=”

    “dXNlcm5hbWU6cGFzc3dvcmQ=” is base64 encoding of “username:password”

    Here how you will do it using PHRETS

     $phrets->AddHeader(‘My-Authorization’,’Basic ‘.base64_encode(“{$rets->username}:{$rets->password}”));

    Or alternatively, If you are calling through PHP CURL.

     curl_setopt($curl_handle, CURLOPT_HTTPHEADER, array(‘My-Authorization: Basic ‘ . base64_encode(“{$rets->username}:{$rets->password}”)));

 

  1. Now, you need to pass newly added “My-Authorization” header to RETS Server.

    server {

    listen YOUR_SERVER_IP:80;

    server_name rets.example.com;

    client_header_timeout 3m;

    client_body_timeout 3m;

    send_timeout 3m;

    location / {

    proxy_set_header Authorization $http_my_authorization;

    proxy_pass http://rets.rets-server.net:6103/;

    proxy_read_timeout 100m;

    proxy_connect_timeout 100s;

    proxy_send_timeout 100m;

    proxy_buffering off;

    }

 

That’s it, Now, reverse proxy will work like charm.