CodeIgniter Forums
css and images - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: css and images (/showthread.php?tid=1906)

css and images - El Forum - 07-04-2007

[eluser]Unknown[/eluser]
Hi I'm Ribeiro and i am from Portugal i am new working with the CI and i am doing a web page using this way and i don't under stand where i put the code because i pt the code in the same file that will appear the images and the css and didn't work could you help me? thanks for everything and keep he good work.
good bye

css and images - El Forum - 07-04-2007

[eluser]Phil Sturgeon[/eluser]
My personal favourite is to make a folder in the root directory (next to /system/) and of course make sure it is allowed in your htaccess if using short url's.

In my media I have images/ css/ javascript/ etc. Helps keep things clean.


Other people choose to put it in their view files. You could try this but for security reasons I would advise against it.

css and images - El Forum - 07-04-2007

[eluser]Derek Allard[/eluser]
Agreed. If you put an images folder (like you normally would) you can reference your images like this
Code:
<img src="/images/file.png" />

Notice the extra "/" in front of images? That means "from the top".

Welcome to CodeIgniter!

css and images - El Forum - 07-04-2007

[eluser]the real rlee[/eluser]
I usually set a few variables within my config file then create a helper (much like url_helper) to set the explicit url to my images:

Code:
// config.php

$config['image_url'] = 'images';

Code:
// asset_helper.php


function image_url() {
    $CI =& get_instance();
    return base_url().$CI->config->slash_item('image_url');
}


css and images - El Forum - 07-15-2007

[eluser]webdezzo[/eluser]
Ok all,

Going off of the real rlee's post, I successfully created the following helper, that works like a charm for what I am doing. Figured I would toss a write up on it for everyone to see! Weeeeee!

First,
In order to keep all of my custom config settings seperate, I created an external config file named config/paths.php which contains:

Code:
&lt;?php  if (!defined('BASEPATH')) exit('No direct script access allowed');

/*
|--------------------------------------------------------------------------
| Front End Paths
|--------------------------------------------------------------------------
| base_url =
| URL to your CodeIgniter root. Typically this will be your base URL,
| WITH a trailing slash:
|
|    http://www.your-site.com/
|
| Add base_url prior to the path you are setting
|
*/
$config['image_path']     = "images";
$config['css_path']     = "css";
$config['js_path']     = "js";
$config['flash_path']     = "flash";




?&gt;

Then, I created a path_helper.php file within the helper directory that contains the following:

Code:
&lt;?php  if (!defined('BASEPATH')) exit('No direct script access allowed');
/**
* CodeIgniter
*
* An open source application development framework for PHP 4.3.2 or newer
*
* @package        CodeIgniter
* @author        Rick Ellis
* @copyright    Copyright (c) 2006, EllisLab, Inc.
* @license        http://www.codeignitor.com/user_guide/license.html
* @link        http://www.codeigniter.com
* @since        Version 1.0
* @filesource
*/

// ------------------------------------------------------------------------

/**
* CodeIgniter PATH Helpers
*
* @package        CodeIgniter
* @subpackage    Helpers
* @category    Helpers
* @author        Todd Perkins (with the recommendation of the real rlee
*                 and others from the CI Forums)
* @link        http://www.undecisive.com
*/

// ------------------------------------------------------------------------

/**
* Path IMAGES
*
* Creates http://www.domain.com/images
* or whatever the image file path that is specified in config
*
* @access    public
* @param    string
* @return    string
*/
function path_images()
{
    $CI =& get_instance();
    return base_url().$CI->config->slash_item('image_path');
}

// ------------------------------------------------------------------------

/**
* Path CSS
*
* Creates http://www.domain.com/css
* or whatever the css file path that is specified in config
*
* @access    public
* @param    string
* @return    string
*/
function path_css()
{
    $CI =& get_instance();
    return base_url().$CI->config->slash_item('css_path');
}

// ------------------------------------------------------------------------

/**
* Path JS
*
* Creates http://www.domain.com/js
* or whatever the js file path that is specified in config
*
* @access    public
* @param    string
* @return    string
*/
function path_js()
{
    $CI =& get_instance();
    return base_url().$CI->config->slash_item('js_path');
}

// ------------------------------------------------------------------------

/**
* Path FLASH
*
* Creates http://www.domain.com/flash
* or whatever the flash file path that is specified in config
*
* @access    public
* @param    string
* @return    string
*/
function path_flash()
{
    $CI =& get_instance();
    return base_url().$CI->config->slash_item('flash_path');
}

// ------------------------------------------------------------------------

?&gt;

I included the path helper in the autoload file:

Code:
$autoload['config'] = array('paths');

And whala! I can call my image path from within my views =)
Code:
&lt;?= path_images() ?&gt;

Also, my folder structure is just as suggested, root folder:
/images
/css
/flash
/js

this way, when I am calling any image assets from within a stylesheet, (that cannot contain php code) I can simply call /images/filename.jpg)

Hope this helps!

-undecisive