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

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.