WordPress Roots theme: “npm install” command raised error on Windows 8/8.1

Today, While setting up the Roots theme 7.0.2 for WordPress 4.0, I came across an issue on Windows 8.1. I installed the node.js and then ran the “npm install” command on theme’s directory. It ran for few secs with a spinner but end up with following errors (ignore number at the start of each line).

44945 info install roots@7.0.2
44946 info postinstall roots@7.0.2
44947 verbose unsafe-perm in lifecycle true
44948 info roots@7.0.2 Failed to exec postinstall script
44949 error roots@7.0.2 postinstall: `bower install`
44949 error Exit status 1
44950 error Failed at the roots@7.0.2 postinstall script.
44950 error This is most likely a problem with the roots package,
44950 error not with npm itself.
44950 error Tell the author that this fails on your system:
44950 error bower install
44950 error You can get their info via:
44950 error npm owner ls roots
44950 error There is likely additional logging output above.
44951 error System Windows_NT 6.2.9200
44952 error command “C:\\Program Files (x86)\\nodejs\\\\node.exe” “C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install”
44953 error cwd E:\wamp\www\wp_bond\wp-content\themes\bond
44954 error node -v v0.10.33
44955 error npm -v 1.4.28
44956 error code ELIFECYCLE
44957 verbose exit [ 1, true ]

Due to the same reason, if you try to run “grunt dev” or “grunt watch”, you will get message similar to this

Running “less:dev” (less) task
>> FileError: ‘../vendor/bootstrap/less/variables.less’ wasn’t found in assets/less/_bootstrap.less on line 8, column 1:
>> 7 // Variables
>> 8 @import “../vendor/bootstrap/less/variables”;
>> 9 @import “_variables”; // Bootstrap variable overrides and custom variables
Warning: Error compiling assets/less/main.less Use –force to continue.

The solution is to run the command prompt in Administrator mode. :-)

  1. Press Window button, to open the search panel
  2. Type “cmd”
  3. Right click the “Command Prompt” from the search results
  4. Click on “Run as Administrator”
  5. Now, do the regular thing, “cd” to your theme’s directory and run “npm install” command

Output should look like this now

bower not-cached git://github.com/Modernizr/Modernizr.git#2.8.2
bower resolve git://github.com/Modernizr/Modernizr.git#2.8.2
bower not-cached git://github.com/jquery/jquery.git#1.11.1
bower resolve git://github.com/jquery/jquery.git#1.11.1
bower not-cached git://github.com/twbs/bootstrap.git#3.3.0
bower resolve git://github.com/twbs/bootstrap.git#3.3.0
bower not-cached git://github.com/scottjehl/Respond.git#1.4.2
bower resolve git://github.com/scottjehl/Respond.git#1.4.2
bower download https://github.com/scottjehl/Respond/archive/1.4.2.tar.gz
bower download https://github.com/Modernizr/Modernizr/archive/v2.8.2.tar.gz

bower extract respond#1.4.2 archive.tar.gz
bower resolved git://github.com/scottjehl/Respond.git#1.4.2
bower download https://github.com/jquery/jquery/archive/1.11.1.tar.gz
bower download https://github.com/twbs/bootstrap/archive/v3.3.0.tar.gz
bower progress modernizr#2.8.2 received 0.2MB
bower progress modernizr#2.8.2 received 0.2MB
bower progress modernizr#2.8.2 received 0.3MB
bower progress jquery#1.11.1 received 0.1MB
bower progress modernizr#2.8.2 received 0.3MB
bower progress modernizr#2.8.2 received 0.3MB
bower progress jquery#1.11.1 received 0.2MB
bower progress modernizr#2.8.2 received 0.3MB
bower progress modernizr#2.8.2 received 0.4MB
bower progress jquery#1.11.1 received 0.2MB

….

Now, run Grunt command to compile LESS code.

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;

}