Problem with CSS, JS, and IMG directory paths

[eluser]sherbo[/eluser]
Hey All,

I'm trying to debug what seems to be common problem.

I created 3 directories in my root directories:

- css
- img
- js

I can reference assets in each of these in my views using:

- <?php echo base_url();?>css/
- <?php echo base_url();?>img/
- <?php echo base_url();?>css/

However, I can't access them using:

- /css/
- /img/
- /js/

I want to avoid calls to <?php echo base_url();?> in my URLs. Is there any reason why my "/" doesn't seem to reference the root app directory?

My .htaccess is as follows:

Options +FollowSymLinks
RewriteEngine on
RewriteCond $1 !^(index\.php|img|css|js|uploads|robots\.txt|favicon\.ico)
RewriteRule ^(.*)$ /~sherban.drulea/web_app/index.php/$1 [L]

cheers,
Sherban

[eluser]Majd Taby[/eluser]
you want to use ./css not just /css

[eluser]John_Betong[/eluser]
Hi Sherbo,

http://ellislab.com/forums/viewthread/63915/

Check out the above link and post #6.

Cheers,

John_Betong
 

[eluser]ryantxr[/eluser]
This one of the annoying things about CI. Creating links to CSS and other assets work differently at runtime than at design time. If you use tools like DreamWeaver and other similar tools, the links have to be different for the design tools than for runtime when actually running through CI.

Take this example:

At run time:

Code:

http://localhost/hookon/index.php/main

The view for this file on the development workstation would be located in hookon/system/application/views.
Assume that this file has a GIF included. If it was a simple html file, the tag would be as follows:

Code:

<img href="../images/nav.gif" />

For the tool's purposes, the images folder would have to be in hookon/system/application/images.

When this gets uploaded and run through CI, the images cannot be located at this spot. The resulting output will not find the file. On the deployment platform, the web server, the images folder would have to be located at hookon/images.

While it is not a huge deal to move the images folder, you can see how this could get more complex if the number of files increases. Additionally, tools like Dreamweaver are very intelligent about including other assets. Furthermore, files can be uploaded to web servers by Dreamweaver, and it maintains the folder structure. There is no way to tell it to automatically move certain files.

So I am wondering how any of you deal with this difference.

[eluser]esra[/eluser]
DreamWeaver would need to know how to convert variables representating paths (embedded in views) to local directories. Strangely, Adobe does support variable replacement in Adobe FrameMaker (their professional documentation solution).

[eluser]John_Betong[/eluser]
[quote author="ryantxr" date="1194244248"]This one of the annoying things about CI. Creating links to CSS and other assets work differently at runtime than at design time. If you use tools like DreamWeaver and other similar tools, the links have to be different for the design tools than for runtime when actually running through CI.
...
...
...
[/quote]

Hi RyanTxr,

The way I get round the changing paths problem is to test for the environment in my index.php and wherever a different path is required then test for the defined variable.

Code:

//index.php
    $myhost = strtolower($_SERVER['SERVER_NAME']);
    define('LOCALHOST', ('localhost' === $myhost));

// controller
   if (LOCALHOST) {
       $data['main_data']  = base_url() .'application/views/_data/';
   }else{
        $data['main_data'] = 'http://mydomain.com/ci_jokes/application/views/_data/';
   }

What I like about this method is that even though the code is slightly bloated, only one set of files is required to maintain for both localhost and online platforms.

Cheers,

John_Betong
 

[eluser]ryantxr[/eluser]

The way I get round the changing paths problem is to test for the environment in my index.php and wherever a different path is required then test for the defined variable.

Code:

//index.php
    $myhost = strtolower($_SERVER['SERVER_NAME']);
    define('LOCALHOST', ('localhost' === $myhost));

// controller
   if (LOCALHOST) {
       $data['main_data']  = base_url() .'application/views/_data/';
   }else{
        $data['main_data'] = 'http://mydomain.com/ci_jokes/application/views/_data/';
   }

 

I appreciate the response. However, in order for DreamWeaver to read the css file or other asset, it has to know the path without having to execute php code. I have experimented and had some success with relocating the assets once deployed. It has to be done with relative paths which has one problem. The browser does not understand that myserver/index.php/main and myserver/indev/php/main/index refer to the same thing. The relative paths of these are different so it looks for the assets in a different place when using relative paths.
That is one of the good things of using raw PHP. The paths do not change at run time.

[eluser]xwero[/eluser]
have you already tried to use the base tag?

Code:

<head>
<base href="http://website.com/">
<link href="../css/style.css">
</head>

[eluser]John_Betong[/eluser]
Hi ryantxr,

I appreciate the response. However, in order for DreamWeaver to read the css file or other asset, it has to know the path without having to execute php code.
...
...
...

In order to get round Dreamweaver's shortcomings I would be tempted to hard-code the default path and test to see if the application is online:

Code:

//index.php
    $myhost = strtolower($_SERVER['SERVER_NAME']);
    define('LOCALHOST', ('localhost' === $myhost));

// controller
   $data['main_data']  = 'hard-coded-default-path-goes-here';
   if (LOCALHOST) {
     // do nothing since the LOCALHOST path has already been hard-coded as the default
   ]else{  
     $data['main_data'] = 'http://mydomain.com/ci_jokes/application/views/_data/';
   }

Cheers,

John_Betong
 

[eluser]Phil Sturgeon[/eluser]
config/config.php:

Code:

if($_SERVER['SERVER_NAME'] == 'localhost'):
    $config['base_url']    = "http://localhost/project/";
else:
    $config['base_url']    = "http://site.com/";
endif;

Much cleaner