Welcome Guest, Not a member yet? Register   Sign In
wrong image and css files paths in view files
#1

[eluser]cb951303[/eluser]
hello there everyone.

I have a simple main.php in my view folder like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
    &lt;head&gt;
        &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type" /&gt;
        &lt;title&gt;Test&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="test.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <img src="images/logo.png" alt="LOGO" />
    &lt;/body&gt;
&lt;/html&gt;

Controller cmain.php looks like this (it's also configured as the default controller):
Code:
&lt;?php
    class Cmain extends Controller
    {
        function index()
        {
            $this->load->view('main');
        }
    }
?&gt;

Here's how my http server root looks like:
Code:
public_html/
...images
...images/logo.png
...test.css
...system
...system/application/view/main.php
...system/application/controller/cmain.php
...index.php
...license.txt

Here is my problem:
When I go to the address: http://localhost/ or http://localhost/index.php everything is fine. The page loads and renders normally.
But when I go to the address http://localhost/index.php/ or http://localhost/index.php/cmain/index, the page loads but the image and styling doesn't show (my guess is it can't find logo.png and test.css)
I tried to move image and css files to view and controller directories but no luck.

Any help would be appreciated
Thanks in advance
#2

[eluser]Sarfaraz Momin[/eluser]
try putting a starting slash to all ur css and image file paths

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
    &lt;head&gt;
        &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type" /&gt;
        &lt;title&gt;Test&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="/test.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <img src="/images/logo.png" alt="LOGO" />
    &lt;/body&gt;
&lt;/html&gt;
#3

[eluser]cb951303[/eluser]
[quote author="Sarfaraz Momin" date="1220770469"]try putting a starting slash to all ur css and image file paths

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
    &lt;head&gt;
        &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type" /&gt;
        &lt;title&gt;Test&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="/test.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <img src="/images/logo.png" alt="LOGO" />
    &lt;/body&gt;
&lt;/html&gt;
[/quote]

thanks for quick reply
it made it worst. now none of the address combinations work.
#4

[eluser]charlie spider[/eluser]
if you are removing the index.php with an .htaccess file, then make sure your images directory is allowed (depending on what style of .htaccess you use).

for example:

RewriteEngine on
RewriteCond $1 !^(index\.php)
RewriteRule ^(.*)$ /index.php?/$1 [L]

will not allow access to your images folder whereas:

RewriteEngine on
RewriteCond $1 !^(index\.php|flash|icons|images|javascript|style|uploads|favicon\.ico)
RewriteRule ^(.*)$ /index.php?/$1 [L]

will allow access
#5

[eluser]esra[/eluser]
Most of my applications also need to run under other servers such as IIS, so I try to avoid using .htaccess whenever possible. My solution is a bit more complex, but more controllable. I modified index.php to load a defines.php file containing additional application constants. The changes look like so:

Code:
/*
|---------------------------------------------------------------
| DEFINE APPLICATION CONSTANTS
|---------------------------------------------------------------
|
| EXT        - The file extension.  Typically ".php"
| DS            - The directory separator to use
| FCPATH    - The full server path to THIS file
| SELF        - The name of THIS file (typically "index.php)
| BASEPATH    - The full server path to the "system" folder
| APPPATH    - The full server path to the "application" folder
|
*/
define('EXT', '.'.pathinfo(__FILE__, PATHINFO_EXTENSION));
define('DS', '/');
define('FCPATH', __FILE__);
define('SELF', pathinfo(__FILE__, PATHINFO_BASENAME));
define('BASEPATH', $system_folder.DS);

if (is_dir($application_folder))
{
    define('APPPATH', $application_folder.DS);
}
else
{
    if ($application_folder == '')
    {
        $application_folder = 'application';
    }

    define('APPPATH', BASEPATH.$application_folder.DS);
}

/*
|---------------------------------------------------------------
| DEFINE OPTIONAL CONSTANTS FILE
|---------------------------------------------------------------
|
| If a file named defines.php exists in the extensions folder,
| the file will be loaded. Define your custom constants in
| this file.
|
*/
$defines_file = 'extensions'.DS.'defines.php';
if (file_exists($defines_file))
{
    require_once($defines_file);
}

I store defines.php in the extensions/ directory at the same level as the system/ directory. A sample defines.php is so:

Code:
&lt;?php

// Application-specific paths
define('MODULEPATH', APPPATH.'modules/');
define('BLOCKPATH', APPPATH.'blocks/');
define('TEMPLATEPATH', APPPATH.'templates/');

// Paths to shared directories relative to index.php
define('ASSETPATH', 'assets/');
define('EXTENSIONPATH', 'extensions/');
define('TMPPATH', 'tmp/');
define('DOCUMENTPATH', 'docs/');
define('INSTALLERPATH', 'installer/');

The ASSETPATH is of interest in your case. When your application loads, all paths are relative to the location where index.php is stored, so you can take advantage of this and use a helper to handle paths in your main.php or other templates you might use. In my case, I made a copy of the url helper, renamed it to link_helper.php and stored it under application/helpers/, then added some additional functions to insert absolute urls into my templates. All functions were based on the base_url() function, appended with a constant. For example:

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

Code:
/**
* Assets URL
*
* Returns the path to the assets directory
*
* @access    public
* @return    string
*/    
function asset_url()
{
    $CI =& get_instance();
    return $CI->config->slash_item('base_url').ASSETPATH;
}
    
// ------------------------------------------------------------------------

What the above does is pull the base_url config variable from config.php and append the specific path from defines.php to create an absolute url to the asset.

You need to autoload the helper or load it in a controller.

You can create a directory at any location under any name in a directory under the index.php location based on whatever directory paths you define in defines.php. In my case, I made a assets/ directory with the subdirectories assets/js/, assets/css/ and assets/images/.

Then in your templates, you can add css, javascript, and images by inserting &lt;?=asset_url();?&gt; in the various template paths, followed by js/, css/, or images/ plus whatever file you need to load.

The added benefit of this approach is that you can create defines for any special paths you might need for a CI application and use those in your templates and controllers. For example, I use separate directories for storing templates, modules, and blocks (view fragments or partials).

The approach might seem a bit complex for some people, but I create the setup once for each new CI version and reuse the setup as the starting point for all of my projects.
#6

[eluser]cb951303[/eluser]
[quote author="charlie spider" date="1220780877"]if you are removing the index.php with an .htaccess file, then make sure your images directory is allowed (depending on what style of .htaccess you use).

for example:

RewriteEngine on
RewriteCond $1 !^(index\.php)
RewriteRule ^(.*)$ /index.php?/$1 [L]

will not allow access to your images folder whereas:

RewriteEngine on
RewriteCond $1 !^(index\.php|flash|icons|images|javascript|style|uploads|favicon\.ico)
RewriteRule ^(.*)$ /index.php?/$1 [L]

will allow access[/quote]

unfortunately I'm not using .htaccess :/
#7

[eluser]cb951303[/eluser]
[quote author="esra" date="1220796225"]Most of my applications also need to run under other servers such as IIS, so I try to avoid using .htaccess whenever possible. My solution is a bit more complex, but more controllable. I modified index.php to load a defines.php file containing additional application constants. The changes look like .......
[/quote]
I see how this works. I'll use it unless anyone have anything more elegant. I feel like it should have very simple solution Smile
thanks very much
#8

[eluser]esra[/eluser]
There are other solutions mentioned in the Ignited Code forum (AssetLib and a few others) and elsewhere in other forums. If you do a search for assets_helper, you will find a helper and config file to use as a similar asset-only solution. However, if your application projects range from simple to complex like mine do, the above approach is probably more useful and versatile.

For me, I save a lot of time by building a base CI installation with a collection of basic extensions to reuse in all of my projects.
#9

[eluser]cb951303[/eluser]
[quote author="esra" date="1220801057"]There are other solutions mentioned in the Ignited Code forum (AssetLib and a few others) and elsewhere in other forums. If you do a search for assets_helper, you will find a helper and config file to use as a similar asset-only solution. However, if your application projects range from simple to complex like mine do, the above approach is probably more useful and versatile.

For me, I save a lot of time by building a base CI installation with a collection of basic extensions to reuse in all of my projects.[/quote]

thanks for the info. I'll go that way
#10

[eluser]Sumon[/eluser]
I am not sure my approach is standard or not. But i use it without getting any trouble.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
    &lt;head&gt;
        &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type" /&gt;
        &lt;title&gt;Test&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url();?&gt;test.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <img src="&lt;?php echo base_url();?&gt;images/logo.png" alt="LOGO" />
    &lt;/body&gt;
&lt;/html&gt;

Only add base url before any css or image location. this produce absolute path and doesn't create any problem for me.




Theme © iAndrew 2016 - Forum software by © MyBB