TinyButStrong - the PHP Template Engine
Categories > TBS next version >

What about relative hrefs

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs

By: OverNode
Date: 2007-01-11
Time: 20:34

What about relative hrefs

Hello!
I was wondering about a sort of post_process function that searches a supplies string in the finished HTML juste before the actual echo.

I know this sounds horrible. Let me explain it better.
I have a website with a tpl/ directory and a possiblity of changing the templates very quickly. I edit those templates in Dreamweaver and all the paths to the images, css files, javascript codes are relative to tpl/tpl_name/html.
But the actual usage of this templates is done onthe root of the website, ouside of the directory. All the relative paths are wrong.
I found a previous thread explaining that you just had to replace like this:
//replace this
<img src="../img/design_r8_c3.gif">
//by
<img src="[var.path]/img/design_r8_c3.gif">
That works fine but I can't edit the templates in Dreamweaver anymore and each time, I have to use the Search and replace feature to change the file while editing it.

I then found another thread with someone asking about a similar problem or something about string replace.So I did this(just a quick try):
//function to replace
    function path_update(&$output) {
        global $website_root;
        $output=str_replace("../",$website_root,$output);
    }
...
//and when rendering the page:
    $TPL->Show(TBS_NOTHING);
    path_update($TPL->Source); // Compute the result
    echo $TPL->Source;   

I know, this works perfectly, but what about implementing some sort of function doing this at the end of the "rendering" of the page?

I don't know if many people need this, but the fact that the templates aren't in the same directory/place as the final file, means everyone has to change the href/src paths by a way or another so I thought something like that would be useful.

Hope I will have hoped someone or given a good idea,

OverNode
By: Skrol29
Date: 2007-01-12
Time: 00:47

Re: What about relative hrefs

Hello,

I know this problem, I have it for several sites.
But you can fix the issue by coding a plug-in for that.
The event OnShow is the right place for such a plug-in.
By: OverNode
Date: 2007-01-12
Time: 09:35

Re: What about relative hrefs

Thanks :)
I'll look into that.

TBS rocks!

OverNode
By: Leo
Date: 2007-03-05
Time: 22:42

Re: What about relative hrefs

THAT will be a nice plugin.

(BTW, there's a "How-to write plugins" guide somewhere?)

TX.
By: OverNode
Date: 2007-07-21
Time: 10:36

Re: What about relative hrefs

Yes,
I was searching for such a tutorial/manual somewhere but there is only a begining of explanation near the end of the manual.

I'm quite busy so I haven't really looked into the core of TBS to understand how it works and how to code plug-ins. Plus, I haven\'t yet found a nice method for updating the paths.
I have tried using a global directory for all my templates, so the paths were all simple. But after coding the CSS into the HTML files, the paths were quite messed up. For example:
Path to template: /templates/default/template.html
Path to css: /templates/default/styles/style1.css
Path to some image: /media/images/image1.gif

Code in template.html:
<link href="styles/style1.css" rel="stylesheet" type="text/css" />
<img src="../../media/images/image1.gif">

My function replaces the ../../ by '' (nothing) so that the image is displayed correctly, BUT, the path to the CSS file is not modified.

I will have to make a script that runs just before $TBS->Show() that finds all the href= and src= and then finds where the files are from the root directory and updates the paths. But I'm quite concerned about the power needed by the server to scan the directories and the updating...

I'll see what I can do depending on my time, my understanding of TBS :)

If anyone has any suggestion...

OverNode
By: sheepy
Date: 2007-08-15
Time: 12:09

Re: What about relative hrefs

Yes this can be done and my designers loves the ability to change the template, upload, and see the result without calling me over.

I planed to put it into next version of TBS Plus, but it is under extremely slow development due to a very intensive project that is literally stretching me. For now, here is the (partial) code I am using.  I am also using SSI syntax, which Dreamweaver understands, to include components like header or menu.

conf() is a function that load from my app framework's config, everything else are standard.

  $src = &$tbs->Source;
  // Translate Server Side Include into onload
  if (conf('template', 'ssi_translate') && strpos($src,'<!--#include') !== false) {
    $src = preg_replace('~<!--#include\s+(?:virtual|file)\s*=\s*"?([^"\s\]]+)"?\s*-->~','[onload;file=$1]', $src);
    $tbs->MergeField('onload');
  }
  // Translate custom or image and inc path
  if ($patht = conf('template', 'src_translate'))
    if ($patht === true) {
      // Convert ../path.inc/ and ../path.img/ for url("???"), src="???" and href="???"
      $root = conf('template','translate_to_root') ? conf('path','root') : ''; // Path to replace the '../'
      $osrc = $src;
      $src = preg_replace('~(?<=\W)(url\s*\(|h?src\s*=|href\s*=|background\s*=)\s*([\'"]?)(?:\.\./)+('.conf('path','inc',null,'inc').'|'.conf('path','img',null,'img').')~',
                          '$1$2'.$root.'$3', $src);
    }
By: sheepy
Date: 2007-08-15
Time: 12:53

Re: What about relative hrefs

By the way, the above regx works with any level of template folder, i.e. works with any level of "../../../" - within the template folder I have folders for email, popup, ajax, even sections and sections of sections...
By: mgb
Date: 2007-12-20
Time: 12:10

Re: What about relative hrefs

Late reply I know, but I just stumbled upon this thread now.
A non tbs way to solve this could be with the use of the <base> tag
http://www.w3schools.com/tags/tag_base.asp

ex:
...
<base href="http://test.dk/templates/default/" />  
...
<a href="smile.gif">http://test.dk/templates/default/smile.gif</a>
<a href="/smile.gif">http://test.dk/smile.gif</a>
<a href="http://rudiment.dk/smile.gif">http://rudiment.dk/smile.gif</a>
...

Note: this might not be an elegant solution, but I have used it with success on some projects.