CodeIgniter Forums
base URL for external stylesheet ? - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: CodeIgniter 4 (https://forum.codeigniter.com/forumdisplay.php?fid=28)
+--- Forum: CodeIgniter 4 Support (https://forum.codeigniter.com/forumdisplay.php?fid=30)
+--- Thread: base URL for external stylesheet ? (/showthread.php?tid=76414)



base URL for external stylesheet ? - kilden - 05-11-2020

Hello,
This is my first message here and I’m a newbie on Codeigniter 4 (and I didn’t know Ci3).
Maybe I don't know a trick to deal with relative path in my stylesheet and I've got this problem :

I did an app on local (on root) and now I'm testing it online in a subfolder (« demo ») on my website. I’ve changed baseURL in config files (App.php and .env like : http://mydomain.com/demo/) and added the function baseURL() on all my hyperlinks. So, everything is ok for testing online, except...


Every URL in my external CSS sheets are wrong and and I can't change them with a php function. ( for exemple background : url('/img/arrow-top.svg'); should be background : url('demo/img/arrow-top.svg') ) Is there a way to fix that (with Ci4, html, htacess ?) without changing my CSS (and re-change them when I put my website on the root ?) 

I've tried to put a base in my header :
<base href="<?php echo base_url(); ?>/" target="_blank">
...but this only affect href on my pages... not the relative path inside my external stylesheet. 

Thank you in advance for any reply.


RE: base URL for external stylesheet ? - kilden - 05-11-2020

hum... I just see that post which indicates there is no perfect solution... just "place the CSS images in at least the same level as the CSS file so that you don't need to go backwards in the path" :

https://stackoverflow.com/questions/3812375/specifying-base-url-for-css


RE: base URL for external stylesheet ? - jreklund - 05-11-2020

You need to design your application to either:
../img/
or
/img/

And with the last option, on your live server set up an subdomain:
http://demo.mydomain.com/

So your assets are loading.


RE: base URL for external stylesheet ? - John_Betong - 05-11-2020

My solution is to assume that index.php is in the base_url() and to create a relative "asset/csse/" sub-folder. Because index.php is always called first then the paths to the CSS files will always be in the sub-folder.


RE: base URL for external stylesheet ? - kilden - 05-11-2020

so, if my original structure is :


Code:
- codeigniter (.env  app  system writable …)
- public
     - assets (css img js)
     - index.php

You would just do :

Code:
- codeigniter (.env  app  system writable …)
- public
     - assets (css img js)
     - demo
          - index.php
...leaving the assets on the root of "public" folder ? I didn't find other solutions :
- Either I leave assets on the root
- or I have to change all URL in my CSS and add "demo/" (even if my baseURL and index.php is "demo/")


RE: base URL for external stylesheet ? - jreklund - 05-12-2020

If you don't want to create a sub-domain, you should leave your assets folder alongside you index.php and create a rewrite rule for it. But that means you need to edit your main domains .htaccess file. Also, that means every request are doubled, for CSS, images and JS.

https://stackoverflow.com/a/19494604
Code:
RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(?:[^/]*/)*([^/.]+\.(?:jpe?g|gif|bmp|png|tiff|css|js))$ /assets/$1 [R=301,L,NC]



RE: base URL for external stylesheet ? - kilden - 05-15-2020

Thank you for your help !
Well I've never used sub-domain... I thought the sub-domain "demo.domain.com" was just an alias to the subfolder domain.com/demo...
But with a subdomain, the .htaccess inside it have only an influence for the subdomain and the CSS works as if it was in the root folder ?

or I should add your rule ?

Code:
RewriteRule ^(?:[^/]*/)*([^/.]+\.(?:jpe?g|gif|bmp|png|tiff|css|js))$ /assets/$1 [R=301,L,NC]

Because I didn't change anything of this htaccess code :

Code:
# Disable directory browsing
Options All -Indexes

# ----------------------------------------------------------------------
# Rewrite engine
# ----------------------------------------------------------------------

# Turning on the rewrite engine is necessary for the following rules and features.
# FollowSymLinks must be enabled for this to work.
<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On

    # If you installed CodeIgniter in a subfolder, you will need to
    # change the following line to match the subfolder you need.
    # http://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
    # RewriteBase /

    # Redirect Trailing Slashes...
    RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Rewrite "www.example.com -> example.com"
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]

    # Checks to see if the user is attempting to access a valid file,
    # such as an image or css document, if this isn't true it sends the
    # request to the front controller, index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]

    # Ensure Authorization header is passed along
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    ErrorDocument 404 index.php
</IfModule>

# Disable server signature start
    ServerSignature Off
# Disable server signature end

I'm a little lost with htacess...


RE: base URL for external stylesheet ? - jreklund - 05-15-2020

Depending on webhost provider, a subdomain may point to your domain.com/demo folder, or it can be a completely different folder. Depending on how you can set-up things.

example.com
/public_html

demo.example.com
/demo.example.com/public

If you can do the second option, specifying your own folder. Point it into the public folder and place your assets folder alongside your index.php. So that you can only specify "url('/assets/img/arrow-top.svg');"