PHP: Twig: Relative paths for images? - php

Question

Wondering if there is a way to use paths relative to the template storage location in the Twig templating engine.
The scenario is as follows:
I have a Typo3 website where my application resides in fileadmin/myApplication. I am using Twig as a template engine to render multilingual content that is loaded dynamically from JSON files. Some of my template files contain paths to images that, given the nature of Typo3, need to have a src-path of fileadmin/myApplication/img/...
Now, if I want to test a new version of my application, I want to be able to create a directory fileadmin/myApplication2.0 without having to change the paths to my images inside the template files.
There are templating engines (e.g. raintpl, see this link) that translate relative paths to server file paths. Is there an easy way of achieving the same effect in Twig?
e.g.
templates/template.html
img/logo.png
outputs
<img src="fileadmin/myApplication2.0/img/logo.png">
This is how rain.tpl does it:
WYSIWYG - Path replace
This cool feature allows designers to create templates as regular HTML with images and styles with relative paths, RainTPL replaces automatically these paths with the correct server paths.
Absolute paths and paths ending with # will be not changed.
<link href="style.css" type="text/css" rel="stylesheet">
<img src="img/logo.gif">
Output html:
<link href="tpl/style.css" type="text/css" rel="stylesheet">
<img src="tpl/img/logo.gif">
Note: if you set raintpl::$base_url, RainTPL will replace the path with raintpl::$base_url.

Answer 1

The path in the src attribute is a relative URL, not a relative file path to the file system on your server, how you organize your files inside your directories.
The relative URL will be resolved to the base URL of the document the template will be part of / present in. So you can use relative URLs, but you need to know to what they relate to to have them properly working.
In your case a quick solution might be to use
<img src="/img/logo.png">
If your website resides in the web-root.
Another way is to have a template function that takes care to build the (relative) URL according to the requested URL path. Another approach is to hard-encode a <base> href Docs in the overall template.
Another alternative is that you get the output of the rendered templates, parse the links and make them suit.
But the important part is that you need to know about the requested URL path in specific and how your template (blocks) are being used.

Answer 2

With absolute path as Joseph said:
<img src="/img/logo.png">
you can see the images only if your website is on a root url as
http://localhost/
it won't work on
http://localhost/myApp/
so in this case you'll need to create an host for it
http://myApp/
A template is WYSIWYG when you can see how it looks in your browser or in your html editor, so basically any templates that use relative paths.
RainTPL had the awesome idea to replace automatically the relative paths of the templates with the correct server path (relative or absolute), so you can see immediately how your template looks.
Another very good way to use WYSIWYG templates is the <base href="http://localhost/myApp/"> tag, which enables you to use relative paths. Only problem is the cross browsing and the Javascript because is not very clear if works the same in all of them.

Answer 3

<img src="{{ asset('img/my_image.gif') }}" alt="something" />
The asset path will resolve to the /web directory. In my example the full project path for the image would be:
Project/web/img/my_image.gif
You'll need to be using the .twig extension to use this method.