Drupal Expert: June 2012

Friday 29 June 2012

JQuery- Auto Refresh Div Every X Seconds

<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
var refreshId = setInterval(function()
{
$('#responsecontainer').fadeOut("slow").load('response.php').fadeIn("slow");
}, 10000);
</script>
</head>
<body>

<div id="responsecontainer">
</div>
</body>

Tuesday 26 June 2012

create-bbc-style-news-ticker-drupal

http://pras.net.np/blogs/create-bbc-style-news-ticker-drupal
demo:
Welcome to views ticker (drupal module) demo page.
Project: http://drupal.org/project/views_ticker
You can see 5 tickers of different style working on this page. YES! I got them all working on the same page — Horizontal scroll, Vertical scroll, vTicker, BBC & Fade styles.
Use fields format in the views, and select fields that are not too long. Mark fields as inline if it doesn\\\’t seem to work properly (this fixes few issues – particularly with horizontal scroll).
http://viewsticker.inettity.com/

Show Twitter Messages on a web Page

The below code was automagically generated by twitter’s badge utility. You should be able to change “yourtwittername” in the code to your twitter name and stuff it in a block. This should work OK for site wide usage, but if you want each user to have there own, in say their profile page, there needs to be a hook to pull the users info and stuff it in a variable. I know it can be done and there is already a pending patch to do something similar I just don’t have the time right now.
<div id="twitter_div">
<h2>Twitter Updates</h2>
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/yourtwittername.json?callback=twitterCallback2&count=5"></script>

Cropping An Image with PHP and the GD Library

Cropping an image with PHP shouldn’t terribly difficult to do and yet when I attempted to do so several months back I was amazed at how little useful documentation PHP offered. Upon Googling the topic I was further amazed but the lack of useful tutorials on the subject. The few I found were overly complicated and didn’t cover simple image cropping. After reading up as much as I could on the subject, and some trial and error, I was able to accomplish my goal of cropping an image with PHP using the GD library.
Just this morning an online friend of mine was struggling with the same issue and twittered for some advice and guidance. I sent them the core of the code I wrote and wished them good luck. I received a quick reply that it worked perfectly for them and apparently ended two days of hair pulling. So I decided I would post the code I sent them here so anyone else who is looking to crop images with PHP and the GD library can do so without having to endure limited documentation and inventing swear words.

// Original image
$filename = 'someimage.jpg';

// Get dimensions of the original image
list($current_width, $current_height) = getimagesize($filename);

// The x and y coordinates on the original image where we
// will begin cropping the image
$left = 50;
$top = 50;

// This will be the final size of the image (e.g. how many pixels
// left and down we will be going)
$crop_width = 200;
$crop_height = 200;

// Resample the image
$canvas = imagecreatetruecolor($crop_width, $crop_height);
$current_image = imagecreatefromjpeg($filename);
imagecopy($canvas, $current_image, 0, 0, $left, $top, $current_width, $current_height);
imagejpeg($canvas, $filename, 100);
// Original image
$filename = 'someimage.jpg';

// Get dimensions of the original image
list($current_width, $current_height) = getimagesize($filename);

// The x and y coordinates on the original image where we
// will begin cropping the image
$left = 50;
$top = 50;

// This will be the final size of the image (e.g. how many pixels
// left and down we will be going)
$crop_width = 200;
$crop_height = 200;

// Resample the image
$canvas = imagecreatetruecolor($crop_width, $crop_height);
$current_image = imagecreatefromjpeg($filename);
imagecopy($canvas, $current_image, 0, 0, $left, $top, $current_width, $current_height);
imagejpeg($canvas, $filename, 100);
Hopefully that helps demonstrate how to simply crop an image with PHP and the GD library.

Set property meta tag in ZEND

$this->doctype(Zend_View_Helper_Doctype::XHTML1_RDFA);
$this->headMeta()->setProperty(‘og:title’, ‘this title is dummy and will changed by dynamic title’);
$this->headMeta()->setName(‘description’, ‘Wel come to archive site you will share all products to facebook’);
$this->headMeta()->setName(‘image’, ‘<img src=”.’.SITE_URL.’/images/fb.png”‘);
$this->headMeta()->appendName(‘keywords’, ‘another test’);

How to Add ‘Pin It’ Button With Images To Your WordPress Blog Without Plugin

Step 1: Add Pinterest’s javascript

Add the following code to your footer.php file of the theme ( before the </body> close tag ) :
You can get Pinterest’s javascript at Goodies
1
<script type="text/javascript"src="//assets.pinterest.com/js/pinit.js"></script>
Step 2: Add Pin it button to single blog post

Add the following code to single.php file of the theme where you want to show Pin It button:
1
<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo catch_that_image() ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal"><img border="0"src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
Step 3: Get the first image with the functions

Add this code info your functions.php file of the theme:

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',$post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
The end. Thanks for reading my Pin It button tutorial. And a big thanks to Jean-Baptiste Jung.

How to Add Twitter’s Official Tweet Button in WordPress

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
   <a href="http://twitter.com/share"
      data-url="<?php the_permalink(); ?>"
      data-via="wpbeginner"
      data-text="<?php the_title(); ?>"
      data-related="syedbalkhi:Founder of WPBeginner"
      data-count="vertical">Tweet</a>

Add Pinterest “Pin It” Counter Button To Blogger

<a class=’pin-it-button’ count-layout=’horizontal’ expr:href=’"http://pinterest.com/pin/create/button/?url=" + data:post.url’>Pin It Now!</a>
<a href=’javascript:void(run_pinmarklet())’ style=’margin-left:-93px; width:43px; height:20px; display:inline-block;’/>
<script src=’http://assets.pinterest.com/js/pinit.js’ type=’text/javascript’/>
<script type=’text/javascript’>
function run_pinmarklet() {
var e=document.createElement('script'); e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Monday 18 June 2012

Creating beautiful and functional tables with DataTables

DataTables has a wealth of features enabled by default (as can be seen in the zero-configuration example) but the example stylesheets that come in the DataTables package are intentionally rather basic, and there will be times you wish to integrate the look and feel of the table a lot more than the default style allows.

Fortunately styling a DataTables table is actually a relatively simple prospect and I’ll show how to build the style up so that your table looks like the one shown below in this post. In this post I’ll use only very basic initialisation of DataTables and concentrate on just nice CSS styling! I’ll be building on the fine work of Inayaili de Leon for this example, and we will end up with a table which looks like this:

The table
First things first – we need a table to show. You’ll no doubt have your own that you wish to style, but in this example I’m going to use some statistics from the Scottish Government about student numbers. Not the most inspiring of information perhaps, but a perfect example of a statistics table which can be presented on a web-site. The basic unstyled and unscripted table looks like this:

<table id="example" border="0" cellpadding="0" cellspacing="0" class="pretty">

<thead>

<tr>

<th rowspan="2">Local authority</th>

<th colspan="7">Scottish domiciled students in HE</th>

</tr>

<tr>

<th>2005-06</th>

<th>2006-07</th>

<th>2007-08</th>

<th>2008-09</th>

<th>2009-10</th>

<th>% change<br>over last year</th>

<th>% change<br>since 2005-06</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row">Total</th>

<td>212.920</td>

<td>214.860</td>

<td>206.390</td>

<td>207.535</td>

<td>213.210</td>

<td>2.7</td>

<td>0.1</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row">Aberdeen City</th>

<td>9.750</td>

<td>9.850</td>

<td>9.945</td>

<td>10.080</td>

<td>1.4</td>

<td>3.4</td>

</tr>

...

</tbody>

</table>

Note that because of the TH elements in the table body rows, this example uses DataTables 1.8, where the ability to consume TH elements in the body is a new feature. The full basic page that we are going to work with is available here.

Style and scripting base

In order to preserve our sanity and provide a common baseline for styling the table, I’m going to include the YUI 3 reset stylesheet. This stylesheet basically strips the built-in default styles from a viewing web-browser to give a common starting point for styling across all browsers. This is particularly useful with tables since browsers can often have different defaults styles for various elements. This reset stylesheet is included using the following HTML:<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

I’ve also added some basic styles to my page in order to provide a little bit of a framework for us to work with (font-size, content width etc).

Next we include and execute the Javascript required to enhance the table with DataTables. This is done by including jQuery and DataTables, followed by initialising DataTables. In this particular case I’ve chosen to use the built-in “full_numbers” pagination style by specifying the sPaginationType parameter. This is all the Javascript that we need to setup our table.

<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>

<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#example').dataTable( {

"sPaginationType": "full_numbers"

} );

</script>

To position the various control elements we can float them into position using the following CSS. Note I’ve also included highlighting colours to make it easy to see where each element is. In additional this I’ve included a little padding for the various elements, so they visually fit around the table nicely.

div.dataTables_length {

float: left;

background-color: red;

}

div.dataTables_filter {

float: right;

background-color: green;

}

div.dataTables_info {

float: left;

background-color: blue;

}

div.dataTables_paginate {

float: right;

background-color: yellow;

}

div.dataTables_length,

div.dataTables_filter,

div.dataTables_paginate,

div.dataTables_info {

padding: 6px;

}

Also because we are using floating elements we need to consider clearing them. In this case the table needs to clear the paging length and filtering inputs, while any content that follows the table needs to clear the pagination and information elements. For the former we can use a simple clear: both, but for the latter we can use a self-clearing technique.

table.pretty {

clear: both;

}

/* Self clearing - */

div.dataTables_wrapper:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

html[xmlns] .dataTables_wrapper { display: block; }

* html .dataTables_wrapper { height: 1%; }

http://datatables.net/blog/Creating_beautiful_and_functional_tables_with_DataTables for more detailed demo

Drupal Expert

Friday 29 June 2012

JQuery- Auto Refresh Div Every X Seconds

Tuesday 26 June 2012

create-bbc-style-news-ticker-drupal

Show Twitter Messages on a web Page

Cropping An Image with PHP and the GD Library

Set property meta tag in ZEND

How to Add ‘Pin It’ Button With Images To Your WordPress Blog Without Plugin

How to Add Twitter’s Official Tweet Button in WordPress

Add Pinterest “Pin It” Counter Button To Blogger

Monday 18 June 2012

Creating beautiful and functional tables with DataTables

Style and scripting base

Pages

About Me