Archive for February, 2009

How to include PHP code inside a Smarty Template

Tuesday, February 24th, 2009 By Nikhil

I thought this one will be a doodle to find in google, as many you us UI and script writers would need to do this on a day to day basis, that is include a bit of peice of PHP code snippet(.php) into a Smarty Template (.tpl).  I realized that easier/popular  your query, even more difficult to find the exact answer…   a million search results but most of them reffered to “file” includes in Smarty … which has the following syntax

    {include file=”include/header.php”}

This actually inlcuded the file fine but as text , What I wanted was the result of  included file .(Note the above is used include template inside a template file). Finally with a bit persiverance …. I stumbled across a slighty modified syntax, which was the answer to my requirement … so here it is… if you havn’t found  one already

{include_php file=”include/header.php” }

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Adding DropShadow To Images Using CSS

Wednesday, February 18th, 2009 By Nikhil

Another quick tut. Here is something simple and nice using the POWER of CSS… but was difficult concieve( and it surely wasn’t me) to begin with . Adding Dropshadow, might be a peice of cake for many of us, using some image editing tools like Photoshop anf Fireworks etc.
The reason why , I opted for drop shadow using CSS is that , usually while creating a page design/html of an application , the requirements keep iterating. What I mean is , In a existing web site with many images, like the ones displaying freinds list or an image gallery, it will be difficult to reprocess the entire load of images that had been already unloaded to add or remove the shadows, for that matter.
So If you have done a little forward thinking while creating the HTMLS to add these extra divisions or usually the situation is that you have a Loop Logic generating these icons/thumbnails in XSL, PHP. JAVA or any other programming /scripting language, you can add it anytime, then is just the matter of show and hiding these shadows using the CSS Display property,as per the clients ever changing requirements … I havn’t done this sort of forward thinking before this … but ahev started now!

In the example below, the original image is shadow free and the dropshadows are applied as required! ALSO, I have gone a little extra, by using the tricks of my earlier Tut ( Well! these probably are shortest variety of Tutorials , so it is only justified calling them “Tut”‘s ) about Using CSS Clip Property for show off only

Original Image


CSS DropShadow Results
View Demo  | Download sourcefiles

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Understandng The CSS Clip Property

Tuesday, February 17th, 2009 By Nikhil

Why do I want to understand this??? … Humm!!!!

Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator).

There was a good suggestion from one of the component users to modify the Slider Component using clipped backgroud images( against a variable width division) to indicate the slider range. Thus came my time to enter the fun but un-chartered (for me ofcourse) waters of the CSS Clip property.

Well! how difficult it can be? Not much at all …YES and NO. The syntax to use the CSS Clip property is pretty upright but the meaning/usuage is a bit croocked. With a memory like mine, everytime I sit to rework on my Slider Script… I have tokeep referring back to usage of this CLIP property , to remind myself the logic that I have created in my script …. HENCE! thought to pen it down, with a hope to remember it the future ( and also for the benefit of those who seem boggled by the CSS Clip Property)

What does CSS Clip do?

Clip is part of the visual effects module of CSS 2.1 . Simply put, its job is to place a visible window on top of an object that is being clipped , hence clipping images and creating thumbnails without having to create additional files( I have already put this feature to better use in the Slider Component :) )

Using the CSS Clip property, you can create a clipping using the rect shape. Like many other CSS Properties (like margin, padding etc),using rect requires four coordinates Top, Right, Bottom, Left (TRBL). The croocked nature of this property reflects when you take a closer look at how clip calculates the clipping region , using these four coordinates (sends brain into a toss for a while). Now to confuse you the bottom starts from the top, and the right starts from the left. :). You see what i said? …. Hence this post …

This little confusion can easily disappear , with this visual explanation of the CSS Clip/rect property as below!!!!

CSS Clip Requirements

The task we have started is to clip the following Thumbnail image into a squarer looking image (and also a wide-angle image)

original_image  clip_demo
Original Thumbnal/Image Clip Requirements for Sqaure Thumbmail


CSS Clip Results


View Demo  |  Download sourcefiles

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

How to include a WordPress Blog in another site

Monday, February 2nd, 2009 By Nikhil

This question crossed my mind a few times before, when I was working on sites earlier too, which used WordPress to show blogs or new kind of content in some part of the site/portal.Being a novice in PHP and around WordPress, I kept procastinating it, thinking ” this isnt my peice of cake”. Finally! this requirement came upto my nose, when started diggin around a bit for solution.
I was surprised to find that it really was easier than I actually thought it was, to display a list of headlines or the latest post on any other page outside of the WordPress-powered section, just using a little bit of PHP and the WordPress API.

Here is what to do :-
For reasons of explanation, assume that your site is and you have the news section for this site on ( which is running WordPress). Now the requirement is to show the latest post from on the home page of the main site ,i.e.

Step1: In your index.php add the following peice of code , Include the WordPress API file. You can add this to the top of the page you want your post to appear on.

define(‘WP_USE_THEMES’, false); // Disbable use of WordPress Theme
require (‘/var/’); // Include WordPress API
query_posts(‘showposts=1′); // Get Latest Post

In the above peice of include , we are getting only the single most recent post. if you want to try more variations feel free to dig into, query_posts() documentation .

Step 2: Now, In the part of the Index/Home page where you want to show the latest WordPress post from , use the following code. Needless to say, feel free to ad your styling divisions, spans and classes as per your design needs.

Step3 : There is no Step 3 … Thats it … you are done!

OfCourse, You can try a few variations as per your requirements ( as I mentioned earlier, refer to query_posts() documentation ) . Heres some taster …

How show a specific post/page as opposed to the latest post:-
This can easily achived by altering the arguments to query_posts() to include the page ID or page slug


or You can control the number of posts:

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter