Placehold.it - The awesome online image placeholder

Ever wanted to use a default image while developing? It was always time consuming to jump into Photoshop to create a sample image with the right dimensions, save and then use it for development.

Until some freaking awesome genius created placehold.it!!

If you want a default image all you need to do is pass a custom URL to your image "src" attribute to create a default image. With the parameters defined more in detail below.

Simple Image

http://placehold.it/1220x470

Default with the right dimensions

Advanced Image

http://placehold.it/1220x470/3299CC/ffffff&text=Example

1. First parameter (1220x470) is the dimensions
2. Second parameter (3299CC) is the hex of the background
3. Third parameter (FFFFFF) is the hex of the text displayed
4. Fourth parameter ($text=Event) is the actual text displayed

Example Usage

<img src=”http://placehold.it/1220x470/3299CC/ffffff&text=Example"/>

Tada!!

How to retrieve data using Drupal_http_response

Ever wanted to access an API using Drupal. It’s dead easy using drupal_http_response().

 <?php  
  // Construct parameters to pass to URL  
  $data   = 'param_name=value&'param_name1=value1';  
  $options = array(  
   'method' => 'POST', // HTTP Request  
   'data'    => $data,  // Params  
   'headers' => array('Content-Type' => 'application/json'), // Data retrieved type  
  );  
  // Get result  
  $result = drupal_http_request('http://test.com', $options);  
 ?>  

Tada! This syntax be used for your AJAX requests or API calls in Drupal. Easy peezy!

Adding a custom styles format to TinyMCE plugin on Drupal 7

Ever had to create a custom style for the Wysiwyg/TinyMCE plugin on Drupal 7? Well I came across this very niche issue at work earlier this week and it did my head in for a couple of hours. I decided to post this solution in the nil chance someone else comes across a similar issue.

The solution I came up with is to create a custom module and place it in sites/all/modules/custom directory. It is recommended to save all custom modules in a 'custom' directory and drupal standard modules in a ‘contrib’ directory.

Add the following block of code into your mycustommodule.module file in your custom module and edit as you please. For more custom settings have a look at the hook_wysiwyg_editor_settings_alter drupal hook.

 function mycustommodule_wysiwyg_editor_settings_alter(&$settings, $context) {  
   // Each editor has its own collection of native settings that may be extended  
   // or overridden. Please consult the respective official vendor documentation  
   // for details.  
   if ($context['profile']->editor == 'tinymce') {  
     $settings['style_formats'] = array(  
       array(  
         'title'  => 'Black 25%',  
         'selector' => 'a',  
         'classes' => 'btn-small btn-black',  
         'block' => 'a',  
         'styles' => array (  
           'color' => 'black'  
         )  
       ),  
       array(  
         'title'  => 'Black 50%',  
         'selector' => 'a',  
         'classes' => 'btn-medium btn-black',  
         'block' => 'a',  
         'styles' => array (  
           'color' => 'black'  
         )  
       ),  
     )  
   }  
 }  

Voila!!

As always feel free to leave a comment or contribution below! :)

My implemented example of a simple REST API

I'll first of all briefly explain what an API is and what its main purpose is. An API (Application Programming Interface) is in layman terms a way to gain access to data without having any knowledge of the code or technology behind the generation of that data. 

The data is either in JSON or XML format with JSON being the preferable option because it’s more lightweight and puts less stress on resources.

For example the BBC have a few APIs (which you can read about here)  through which you can access their radio programmes and other data. As a consumer of their API you have no idea how that data is being generated or how and where it is being stored. That's the beauty of it!

A REST API uses four main HTTP protocols to access/manipulate data: GET, POST, PUT and DELETE.

HTTP Protocol	Use	Example
GET	To retrieve data	Get list of all radio schedules
POST	To insert a new data entry	Add a new radio schedule to the existing list
PUT	Update existing data	Update a radio schedule entry
DELETE	Delete data entry	Delete a radio schedule entry

You can read more about the HTTP protocols here. There is also a directory of APIs you can have access to here.

In my previous post on "How to build an Android or iOS mobile app from scratch using just basic web skills" I explained that to make your app dynamic it has to make ajax requests to an API to get data.

I have built a lightweight sample API using the Slim MVC framework which you can download or pull from this GitHub URL.

Setup instructions can be found in the README.md file.

Good luck and you can comment or ask any questions here.