It is my opinion that CodeIgniter’s default img() function that comes in the HTML Helper could have been easier to use. As it is if you want to give your image a name css class you have to define an array consisting of these attributes.
That takes up space and makes the code less readable for non-PHP programmers. Since I work closely with a web designer who is good with HTML but gets lost in PHP I want to leverage the pragmatic power of PHP to automate repetitive tasks (like typing out an entire HTML image tag), but at the same time the result needs to be obvious to a non-programmer but also shorter than the HTML equivalent. I feel the img() helper in CodeIgniter falls short of both these requirements.
CodeIgniter’s img() helper also takes a second parameter, a boolean, this decides whether the index.php file is included in the image path, good if you are using a media controller. For 99.9% of my sites I don’t need these. Therefore I wrote my own helper.
The file is called MY_html_helper.php and lives inside the folder system/application/helpers. As with other extensions to the CI core the prefix MY_ is determined in your config file, so change MY_ to whatever it should be. Add the following code to the file:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
function img($imgName, $attrs=FALSE)
{
$CI =& get_instance();
if (strpos($imgName, 'http') === 0) return;
$imgPath = $CI->config->item('base_url');
if ( ! $imgDir = $CI->config->item('image_dir')) $imgDir = 'assets/images/';
$img = $imgPath.$imgDir.$imgName;
$str = '<img src="'.$img.'" ';
if ($attrs) $str .= $attrs." ";
$str .= "/>";
return $str;
}
All you have to make sure you do is load the html helper: $this->load->helper('html'); in your controller,
or put it in the array of helpers in system/application/config/autoload.php.
The helper assumes images live in the folder assets/images which lives alongside the system folder. If this is not where you put your images then you can specify an alternative directory in your config.php file. Simply add a line that looks like this to config.php: $config['image_dir'] = 'alternative/path/images/';. Don’t forget the trailing slash at the end. This alternative folder would live at the very top level of your application, alongside index.php.
Using the helper is easy and straightforward: <?=img('example.gif')?>
Will produce <img src="http://mysite.com/assets/images/example.gif" />.
Any additional attributes you want in the html tag can be written as per usual as the second parameter. For example if you want to give the image an alt attribute and class:
<?=img('example.gif', 'class="myclass" alt="Example Image"')?>
Will produce:
<img src="http://mysite.com/assets/images/example.gif" class="myclass" alt="Example Image" />
The only hard part about this is making sure you get the single and double quotes correct in the second parameter.
Cheers