Latest Entries »


<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

## PHP

if(function_exists( 'wp_enqueue_media' )){

## JS

jQuery(document).ready(function($) {

var custom_uploader;
jQuery('.custom_media_upload').click(function(e) {


custom_uploader ={
      title: 'Custom Title',
      button: {
      text: 'Custom Button Text'
  multiple: true // Set this to true to allow multiple files to be selected
.on('select', function(el, bl) {

   var attachment = custom_uploader.state().get('selection').first().toJSON();

   $('.custom_media_image').attr('src', attachment.url);
return false;

Removing /public/ folder from Laravel

As inspired by CI ,

1. Create a “system” folder in root.

2. Move all the files to system except the public folder.

3. Move all the files form public to root folder.

It should now looking something like attached screen shot below.

Screen Shot 2014-08-22 at 1.21.11 PM


4. Reconfigure the paths


'app' => __DIR__.'/../app',
'public' => __DIR__.'/../public',

Change these two lines to:

'app' => __DIR__.'/../app',
'public' => __DIR__.'/../../',

Find these lines in index.php

require __DIR__.'/../bootstrap/autoload.php';
$app = require_once __DIR__.'/../bootstrap/start.php';

And change to:

$app= require_once__DIR__.'/system/bootstrap/start.php';


Now time to remove index.php form url 

<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]


Cheers enjoy.

1. In view file

// link the required js and css

<script src=”<?php echo assets_url( ‘admin/lib/jquery-1.7.2.min.js’ );?>” type=”text/javascript”></script>
<script type=”text/javascript” src=””></script&gt;
<link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php echo assets_url( ‘js/plugins/elfinder/css/elfinder.min.css’ );?>”>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php echo assets_url( ‘js/plugins/elfinder/css/theme.css’ );?>”>

<script src=”<?php echo assets_url( ‘js/plugins/ckeditor/ckeditor.js’ );?>”></script>
<script src=”<?php echo assets_url( ‘js/plugins/ckeditor/ckeditor.js’ );?>”></script>
<script src=”<?php echo assets_url( ‘js/plugins/ckeditor/adapters/jquery.js’ );?>”></script>
<script src=”<?php echo assets_url( “js/plugins/elfinder/js/elfinder.min.js” ) ?>”></script>

2. initialize the elfinder

<script type=”text/javascript”>
 // setting base url for javascript [ using codeigniter ]
 var base_url = ‘<?php echo base_url(); ?>';
// new config for ckeditor dialog box
CKEDITOR.on(‘dialogDefinition’, function (event) {
    var editor = event.editor;
    var dialogDefinition =;
   // var dialogName =;
    var dialogName = “image”;
    var tabCount = dialogDefinition.contents.length;
    for (var i = 0; i < tabCount; i++) { //цикл для замены клика всех кнопок “Посмотреть на сервере”
        var browseButton = dialogDefinition.contents[i].get(‘browse’);
        if (browseButton !== null) {
            browseButton.hidden = false;
            browseButton.onClick = function (dialog, i) {
                $(‘<div id=”elfinderz” \>’).dialog({
                    modal: true,
                    width: “70%”,
                    title: ‘Togally Assets’,
                    dialogClass: “elfinderz-filez”,
                    zIndex: 9999999,
                    create: function (event, ui) {
                            resizable: false,
                            lang: ‘en’,
                            url: base_url + ‘assets/js/plugins/elfinder/php/connector.php?mode=’ + dialogName,
                            getFileCallback: function (url) {
                                var dialog = CKEDITOR.dialog.getCurrent();
                                if ( == “image”) {
                                    var urlObj = ‘txtUrl’
                                } else if ( == “flash”) {
                                    var urlObj = ‘src’
                                } else if ( == “link”) {
                                    var urlObj = ‘url’
                                } else {
                                    return false
                                dialog.setValueOf(dialog._.currentTabId, urlObj, url);
                return false;
// initializing elfinder
$( ‘textarea.editor-ck’ ).ckeditor({height:”500px”})
// for stand alone purpose with out ckeditor ( in elfinder/elfinder.html )

<script type=”text/javascript” charset=”utf-8″>
// Helper function to get parameters from the query string.
function getUrlParam(paramName) {
var reParam = new RegExp(‘(?:[\?&]|&amp;)’ + paramName + ‘=([^&]+)’, ‘i’) ;
var match = ;

return (match && match.length > 1) ? match[1] : ” ;
$().ready(function() {
var funcNum = getUrlParam(‘CKEditorFuncNum’);

var elf = $(‘#elfinder’).elfinder({
url : “;,
getFileCallback : function(file) {, file);
resizable: false

To those that uses XAMPP 1.7.3 and Mac

  1. Go to Terminal
  2. Enter which php
    • If it says /usr/bin/php, then proceed to 3.
  3. Enter sudo nano ~/.bash_profile
  4. then paste this export PATH="/Applications/XAMPP/xamppfiles/bin:$PATH"
  5. ctrl – O then enter to save, then ctrl – X to exit.
  6. restart terminal.
  7. Enter which php
    • If you did it right, it should be the same as the path in #4.

The reason for the mcrypt error is because your mac uses it’s native php, you need to change it to the one xampp has.

Some of useful commands to test php settings in mac lion

>> which PHP  // to see if mac is using default php server or third party php setting [ xamp or mamp ]

>> php –version  // to see the php version

>> php -m  // to see the active modules / extensions



Reference :


If you guys have ever used chosen plugin. you might have end up trying dynamically changing selection option with javascript.
Here is code below, that you can update option dynamically with javascript for chosen plugin.


<select name="names" id="names" >
    <option value="1"> Niraj </option>
    <option value="2" >Buddha</option>
    <option value="3">Dino</option>
    <option value="4">AL</option>


// updating again with javascript
document.getElementById('names').value = 4;



1. Just a quick plugin development, to fix my work. You may extend it use it distribute it and what ever....................

Objective of the post


1. Basic Plugin development

2. implementing css3 round image style


<script src=""></script>

// plugin start from here

// this hooks a new function to jquery [ $.fn.circle_me = function ]


plugin name : circle_me

author : Jumper

email :

$.fn.circle_me = function(options) {
console.log('Init circle me');

// default styles

var _style = {
             border: '1px solid #DDD',
             borderRadius: '50%',
             display: 'inline-block',
// over ridding the default style with users style
_style = $.extend( _style, options);

Here   "  return "  is so important if you want to add changeable function.

eg:         $(".circle_now").circle_me().hide();

if you do not add return, here hide function will not work but still plugin will work  fine. If you do not want to add chain function you may ignore return function.

return $(this).each(function(){
              var _bg = $(this).attr('src');


// plugin ends here

     // initializing plugin basic


    // initializing plugin with custom options

     $('.circle').circle_me( {  height: "300px", width: "400px", borderRadius:" 70%"});

// html part

<img class="circle"  src="" />


function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {


var storage= {
  setItem: function(key, val) {
   if (!val) { val  = null; return;}
 if (typeof val == "object") {
 val = JSON.stringify(val); // type casting object into string
 localStorage.setItem(key, val);
 getItem: function(key) {
 var val = localStorage.getItem(key);

 if (!val) {return;}

 // parsing stringified object back to object
 len = val.length;
 if (val[0] == "{" && val[len-1] == "}") {
 val = JSON.parse(val);

 return val;


var id = storage.getItem("ID");
console.log("name : ";

Overriding Page Templates per Content Type in Drupal 7

As we know drupal have few  template files: html.tpl.php, page.tpl.php and node.tpl.php. There are few more which controlling the display of more specific elements . For overrriding other templates you may search more now let me show you how to override the page tempates per content type.

We can implement it by adding additional tempalte suggestions to the “theme_hook_suggestions” array in template.php

  1. Open the template.php file in your theme for editing.
  2. Look for a function called yourthemename_preprocess_page (replace the yourthemename with your theme’s name).
  3. If this function already exists, you will need to add the if statement to the end of the function just before the closing bracket. Otherwise you’ll need to create a new function to look like this:

function yourthemename_preprocess_page(&$vars) {
  if (isset($vars['node']->type)) {
    $vars['theme_hook_suggestions'][] = 'page__' . $vars['node']->type;

Now you can create a template file called page–content-type.tpl.php and all nodes with that type will use the new template file.

Filename Notes:

  • Use two dashes after the word ‘page’ in the filename.
  • If your content type is two or more words, replace the underscore ( _ ) with a short dash ( – ) in the content type machine name.



Get every new post delivered to your Inbox.