Jump to content

Recommended Posts

I'm having some problems with css, include and image paths and wondered what the advice was for the location of following

assets (folder in root)

- scripts

- images

- css

Currently I have it in the root but perhaps it should be located in the default site/assets/ directory which comes with PW?

Reason I ask is because I have a templates folder with a homepage and basic-page template located at site/templates.

Both files are located in exactly the same level but both require different paths for the CSS

Homepage only works with

  <link rel="stylesheet" href="assets/scripts/foundation/css/normalize.css">
  <link rel="stylesheet" href="assets/scripts/foundation/css/foundation.css">
  <link rel="stylesheet" href="assets/scripts/foundation/css/foundation-custom.css">
  <link rel="stylesheet" href="assets/css/styles.css">

Basic page only works if I add "../" before above

  <link rel="stylesheet" href="../assets/scripts/foundation/css/normalize.css">
  <link rel="stylesheet" href="../assets/scripts/foundation/css/foundation.css">
  <link rel="stylesheet" href="../assets/scripts/foundation/css/foundation-custom.css">
  <link rel="stylesheet" href="../assets/css/styles.css">

I should probably make the above into a single include but I'd rather solve this mystery first.

Link to post
Share on other sites
<link rel="stylesheet" href="<?php echo $config->urls->assets; ?>scripts/foundation/css/foundation.css">

Although the convention is to put them under templates/scripts etc, in which case you'd want:

<link rel="stylesheet" href="<?php echo $config->urls->templates; ?>scripts/foundation/css/foundation.css">

This way you will always have the full url to each resource.

You could also just do:

<link rel="stylesheet" href="/site/templates/scripts/foundation/css/foundation.css">

These root relative paths will always work no matter what page you are on.

  • Like 2
Link to post
Share on other sites

You could also just do:

<link rel="stylesheet" href="/site/templates/scripts/foundation/css/foundation.css">

These root relative paths will always work no matter what page you are on.

That would normally be my own setup. In this instance, it doesn't work. Well, it works for the homepage but any sub-pages dont work.

I suspect my issue is one to do with my shared hosting environment

Because the domain name has yet to be setup, I am working on on a "domain reference" where my hosting company names a folder on a server after the name of my site

IE I have my rewrite based set to

RewriteBase /mysite.com/

But my working homepage (until domain is working) is

Link to post
Share on other sites

After setting the RewriteBase, this should work on every page, not just the homepage, as every link gets the /mysite.com/ prepended. ProcessWire doesn't require a specific place, as long as the RewriteBase is set correctly. 

Link to post
Share on other sites

Your HOMEPAGE and BASIC-PAGE should both be in the same directory.

If they are not, I suggest you put them together. In fact, keep ALL YOUR TEMPLATES TOGETHER.

I see you are using Foundation. Here is what it should look like:


Do not "hard code" the path to your foundation.css file:

<link rel="stylesheet" href="assets/scripts/foundation/css/foundation.css">
Instead, move your foundation folder into the templates folder. Link it like this:
<link rel="stylesheet" href="<?php echo $config->urls->templates; ?>foundation/css/foundation.css" />

Keep your homepage and basic-page together next to the foundation folder.

Make the template folder your only WORKING FOLDER. That was everything is contained in one folder, instead of scattered throughout your site.


I hope I explained it well enough for you.

Let us know if we can help you further.

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Guy Incognito
      Have read loads of similar threads but can't find the deifnitive answer. I'm bootstrapping ProcessWire into a Magento installation. Everything is working fine in terms of expected PW API functionality, however I cannot get the paths for images in the site work correctly.
      ProcessWire is installed in a subfolder called 'pw'.
      If I load the PW site directly e.g. visit mainsite.com/pw everything loads fine and all image paths are correct. If I load the parent site in the root folder with the PW bootstrapped page content rendered within it, the image paths don't contain the subfolder and so are broken. So I get
      https://mainsiteexample.com/site/templates/img/test.jpg instead of
      https://mainsiteexample.com/pw/site/templates/img/test.jpg I've tried updating the rewrite base in the .htaccess file but it doesn't seem to make any difference. Have also tried various settings in the config file to no avail. Wondering if rewrite base perhaps isn't working as intended because I'm behind a NGINX/Apache hybrid environment?
    • By Guy Incognito
      I'm trying to make an AJAX call from within a template to a php script within my templates folder, but I'm getting a 404 from all URLs. Is there a proper way to directly address scripts within PW templates? I've read it will work in the site root, but I'd rather keep all the code together if possible.
    • By Peter Knight
      Short explanation
      Is it possible to hide a page from front-end output but keep the ability display it's children?
      Ideally I'm looking for a solution that doesn't involve htaccess or nginx
      So lets say I have a breadcrumb trail of:
      Home > News > Posts > news story 1
      and I want to mask off the folder called Posts so it becomes just
      Home > News > news story 1
      I still want to retrieve the child pages of Posts using selectors etc.
      Long explanation
      I'll give you a use case...
      I start off with a News section and its children are news stories. 
      News (name=news, template=news-container)
      - news post 1 ( template=news-item)
      - news post 2 ( template=news-item)
      - news post 3 ( template=news-item)
      - news post 4 ( template=news-item)
      The structure above lets me use the Add New function because the Parent and Children both have very specific templates and settings.
      Client then tells me that there are News child pages which are not news items.
      Lets say they want to add pages called Public Relations Contacts, Media Enquiries and Events
      They need to be child pages of News but they can't go in the root. They don't need a news-item template and I don't want them to be pulled into any selectors targeting template=news-item or parent=/news/ etc
      What I usually end up doing is putting all the news items inside a hidden folder called Posts and redefining the Family settings to retain the Add New functionality
      News (name=news, template=news)
       - PR Contacts
       - Media Enquiries
       - Events
       - Posts (name=posts, template=news-container)
       - - news post 1 ( template=news-item)
       - - news post 2 ( template=news-item)
       - - news post 3 ( template=news-item)
       - - news post 4 ( template=news-item)
      The problem is that my breadcrumb trail looks like this
      Home > News > Posts > news story 1
      Although it's logical and structurally sound, there's a duplicate there in terms of content. Both News and Posts pages display a list of News items.
      I'm probably not describing this very well but maybe you have the same issue and have a solution?
    • By owzim
      Hope this is the right place for this.
      Following scenario:
      PW is running on my localhost:
      when I insert an image into the textarea the path is like this: "/mysite/site/assets/files/1028/berlin.jpg"
      Then I changed to a development host name, which point to the same directory:
      Then all the inserted images do no work anymore, because obviously "/mysite/site/assets/" does not exists, it then should be "/site/assets/"
      Since the image path is written in this plain form into the db, this kind of inflexible.
      Any solution to this?
      Edit: It sure could be done easily with a .htacces rewrite:
      RewriteRule ^mysite/(.*) $1 but I'd consider this hacky then.
  • Create New...