CODEWITHSUNDEEP
twigslim
rsd123
rsd123

Reputation: 55

why slim requires full directory path for loading external assets(js/css) file

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script  type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
    <script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">


</head>
<body>
    <div class="container">
    hello
    </div>
</body>
</html>

I have to specify full directory path for loading the js and css files (jquery.min.js and bootstrp.min.js and bootstrap.min.css).Here i have (/slim/app/views/animations/) as the directory which contain all the files. if currently i am in the views directory i should use the (animations/whatever the file name) but it is not working in these way. but if i use the full directory path it all works fine. why these is happening can anyone explain.

(slim) is my root directory where i installed slim

Upvotes: 1

Views: 1822

Answers (1)

wp78de
wp78de

Reputation: 18980

Using Relative paths is not how you typically work with Slim. Your assets (JavaScript/CSS/images, etc) should be referenced absolute from your views:

src="/assets/js/myapp.js"

Routed URLs do not map directly to file system based resources because templates should not be accessed by URL publically - they are only served by the controllers.

A common slim file structure looks like this:

app/
public/index.php
templates/
  view.html
assets/
  images/
  js/
  css/

Some add the assets subfolders directly into the public folder. Others have those folders on the root level.

However, in general, public assets (e.g. CSS, JS, images) should be beneath the public document root (accessible to the public).

One thing that could be helpful if you do not like this behavior is to use Slim's basePath variable.

You should be able to set the base URL as a View variable in a slim.before callback in your index.php so that it is available to all routes like this:

$app->hook('slim.before', function () use ($app) {
    $app->view()->appendData(array('baseUrl' => '/base/url/here'));
});

or 

$app->hook('slim.before', function () use ($app) {
    $posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
    $baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
    $app->view()->appendData(array('baseUrl' => $baseUrl ));
});

And then apply it to the references in your HTML tag of the base template file and that's it.

<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />

Or use Uri::getBaseUrl(), e.g.

$basePath = $request->getUri()->getBasePath();

Upvotes: 1

Related Questions