Sarmad Gardezi

Sarmad Gardezi

a freelance developer

Home about Portfolio Blog

Capital News


Apex World is one of Capital leading business houses with multiple digital services. We serves Broadband Services, Digital Cable tv, HD service, various channels with multiple plans & packages.


PKR: 20,000/=


Image Uploader with Imgur API and JavaScript

If you are building a file uploader app that would allow users to upload images from the local disk to the web, Imgur is a good platform to start with. FileStack, Cloudinary and UploadCare are some popular web services that offer simple file upload widgets but the Imgur API is free for non-commercial usage or if your app is open source.

Go to, register your application and generate the client ID. All HTTP requests for uploading images to Imgur must include the client_id in the authorization header and this would also let you upload images anonymously without the image being tied to your personal Imgur account.

<form id="imgur">
<input type="file" class="imgur" accept="image/*" data-max-size="5000"/>

In the HTML section of your website, include an <input> field of type file and set the accept attribute to “image/*” so that file selector window would only allow selection of image files. We’ll also add a data attribute (max-size) to reject files that are bigger than a specific size (in Kb).

Next, we use jQuery to attach an onChange event handler to the input field that gets triggered when the user clicks the input field and selects a file.

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

$('input[type=file]').on("change", function() {

var $files = $(this).get(0).files;

if ($files.length) {

// Reject big files
if ($files[0].size > $(this).data("max-size") * 1024) {
console.log("Please select a smaller file");
return false;

// Begin file upload
console.log("Uploading file to Imgur..");

// Replace ctrlq with your own API key
var apiUrl = '';
var apiKey = 'ctrlq';

var settings = {
async: false,
crossDomain: true,
processData: false,
contentType: false,
type: 'POST',
url: apiUrl,
headers: {
Authorization: 'Client-ID ' + apiKey,
Accept: 'application/json'
mimeType: 'multipart/form-data'

var formData = new FormData();
formData.append("image", $files[0]); = formData;

// Response contains stringified JSON
// Image URL available at
$.ajax(settings).done(function(response) {


The onChange handler makes as synchronous AJAX file upload request to the Imgur API with the image file sent inside the FormData object.

The form’s encoding type is set to multipart/form-data and thus the sent data is in the same format as the form’s submit method.

After the image is upload, Imgur returns a JSON response containing the public URL of the uploaded image and the deletehash that can be used to delete the file from the Imgur servers.

Sarmad Gardezi Blogging Income Reports

On December 1st, 2012 was Created.

I started out as a person who had no idea that anyone could actually make money online. In fact, I thought all online money-making proposals were scams.

In time, however, I discovered that bloggers can earn money from a blog in various ways.

These include:

  • Putting up advertisements
  • Affiliate marketing/sponsored reviews
  • Selling products such as eBooks and online courses

I earned my first online income by helping a guy with a matter related to his Google Webmaster Tool. He paid me $20 via PayPal. This was the first time I realized that I could make money online.

That was 2014.

Now it’s 2017.

Over the past eight years, I have learned and implemented various techniques that help me to make a living from my blog. Whatever I earn now is a result of the hard work that I have put in for all these years.

I now make it a point to share everything that I have learned with the vibrant community here at ShoutMeLoud. After all, the more you give, the more you get (Law of Attraction!)…

Every month I share my income report which details exactly how I’ve been earning money.

Sarmad Gardezi Income Report: Part of SML’s Transparent Work Culture

Here’s the full list with links to all of my income reports. I suggest you browse them one by one to see how I  evolved over time.

July 2017 Income report: $52,434

June 2017 Income report: $32,480

December 2016 Income report: $34390

October 2016 Income report: $34,339

September 2016 Income report: $31,890

June 2016 Income report: $29,659

May 2016 Income report: $28,640

March 2016 Income report: $21,952

January 2016 Income report: $21,472

September 2015 Income report: $16,877

August 2015 Income report – $12,120

June 2015 Income report – $16,636

May 2015 Income report – $11,840

April 2015 Income report – $14,403

March 2015 Income Report – $15,313

February 2015 Income Report – $12,468

January 2015 Income Report – $9,910

2014 Yearly Income Report – $5,1194

October 2014 Income Report – $7,788

September 2014 Income Report – $7,370

July 2014 Income Report – $9,158

How to Make Custom Post Type in WordPress

What is a Custom Post Type?

Custom post types are nothing more than a basic post but have different sets of parameters defined inside your code. The post type of regular posts is post, pages use page, attachments use attachment and so on. Since the release of WordPress 3.0, you can now create your own custom post types. If created successfully and the right parameters are returned you can have a customized area on your website like no other.

Custom Post Type UI

This plugin provides an easy to use interface to create and administer custom post types and taxonomies in WordPress. This plugin is created for WordPress 3.x. The plugin simply creates the types. You will need to add them to the theme yourself.

Adding Your Own Custom Post Type

Step 1 – Register Post Type

Open your functions.php file and add the code below to it. Make sure the code is added before the closing PHP tag. I will explain the code below.

// Creates Movie Reviews Custom Post Type
function movie_reviews_init() {
$args = array(
'label' => 'Movie Reviews',
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => 'movie-reviews'),
'query_var' => true,
'menu_icon' => 'dashicons-video-alt',
'supports' => array(
register_post_type( 'movie-reviews', $args );
add_action( 'init', 'movie_reviews_init' );

Code Definitions

  • function movie_reviews_init() – Here we create a new function for our custom post type. We do this to limit conflicts with any other code inside our functions.php file. It is also a best practice when adding new code to any file like functions.php.
  • label – A plural descriptive name for the post type marked for translation. If you don’t declare a custom label, WordPress will use the name of the custom post type by default.
  • public – Whether a post type is intended to be used publicly either via the admin interface or by front-end users. WordPress sets this to false by default.Here we set it to true as we do what our custom post type to display publicly.
  • show_ui – Generates a default UI for managing this post type in the admin. You can set this to true or false. For the sake of usability, a UI in the admin area is always a good thing.
  • capability_type – Here we can declare what type of custom post type we will be dealing with. It is used to build the read, edit, and delete capabilities of a post or page. You can choose either post or page.
  • hierarchical – Whether the post type is hierarchical(e.g. page). Or in laymen’s terms, whether or not you can declare a parent page, child page, etc… of the post type. This is mainly intended for Pages. Here we declare it false so there’s no need to worry about it for our example.
  • rewrite – This rule is either true or false. The default is true so if slug argument is entered then the slug name is prepended to the posts. Our slug “movie-reviews” will be prepended to each new post of that type.
  • query_var – This rule is either true or false. It sets the post type name as a query variable.
  • menu_icon – This rule declares a custom icon for the admin area. Here we use a neat resource called dashicons that are included in WordPress already.
  • supports – This is usually an array of features the custom post type will support. Here we have quite a long list. These will tie into the admin area.
  • register_post_type($post_type, $args); – The register_post_type() is a function that WordPress recognizes as a custom post type generator. In this example it accepts two parameters which are the name of the post type itself and any arguments you would like to call.
  • add_action(‘init’, ‘movie_reviews_init’ ); – This line of code returns or calls our function so it fires and displays within our site.