4

I have a (javascript) script in my CakePHP plugin which creates an img tag in the current viewed document. The problem is, that every try to provide a valid image source have failed until now. The plugin resides in the plugin directory of the CakePHP library (not the CakePHP app), as we use it for several independent apps which have a lot of commons.

The images are located in /cake/plugins/Corporate/webroot/img.

The (javascript) script is located in /cake/plugins/Corporate/webroot/js.

The relative path from script to image does not work (../img/image.png). The CakePHP routing path (/Corporate/img/image.png) does not work either, independent if I prepend the plugin name or not.

p13n
  • 859
  • 8
  • 31

3 Answers3

2

Use the right path

The right path to get to a webroot asset in the PluginName plugin is of the form:

/plugin_name/path

I.e.:

  • Filepath: App/Plugin/Corporate/webroot/img/image.png
  • Url: /corporate/img/image.png

In early versions of CakePHP asset dispatching was automatic, while in 2.2+ asset dispatching must be explicitly enabled.

The normal way to deal with plugin assets is to not use the asset dispatch filter and to copy (or symlink) the files to the application webroot in the same path as corresponds to the url i.e.:

cd App
cp -R Plugin/Corporate/webroot webroot/corporate

This means that the url requested directly maps to a file in the application webroot folder - there is no php logic invoked in serving these files which amongst other benefits makes serving such assets significantly faster.

Dealing with paths in javascript

If an application is always, always installed as the root of the domain (http://example.com) there is absolutely no complexity - just refer to the relative path to the image:

var imagePath = '/corporate/img/image.png';

If however the root of the application is variable (http://example.com/, http://exmaple.com/sub/folder/, http://localhost/someproject/) - it's necessary to tell the javascript what to consider the root of the application. for example put the following in the layout file:

<head>
    ...
    <script>ROOT = '<?= $this->Html->url('/'); ?>';</script>
</head>
<body>
    <?= $this->fetch('content'); ?>
    ...
</body>

In this way, javascript can refer to the global ROOT anywhere to know what the root url is, like so:

var imagePath = ROOT . 'corporate/img/image.png';

This makes it possible to use the same javascript irrespective of how the application is installed.

Community
  • 1
  • 1
AD7six
  • 63,116
  • 12
  • 91
  • 123
1

you can use this code 

<?php echo $this->Html->image("recipes/6.jpg", array(    "alt" => "Brownies",    'url' => array('controller' => 'recipes', 'action' => 'view', 6))); ?>
Dilip Godhani
  • 2,065
  • 3
  • 18
  • 33
  • I am sorry, I did not express myself clear enough: It is not about embedding an image with the Html Helper of cake but to insert an image by a javascript on the currently viewed document. – p13n Apr 29 '12 at 14:30
  • This answer may be help you http://stackoverflow.com/questions/5451445/how-to-display-image-with-javascript – Dilip Godhani Apr 30 '12 at 06:51
  • Thank you for the hint, but unfortunately it is not the solution. It really is not an issue related to javascript or embedding an image, it is about the path to use for the source image. CakePHP does a lot of (weird) rerouting, and we want to avoid using the absolute URL, as the application runs on multiple hosts... – p13n Apr 30 '12 at 07:26
0

Altough, the question is very old but still I want to answer this for anybody else looking for it

You could use 

<?php 
    echo $this->Html->image( $this->Html->url('/', true).'{plugin_name}/{folder_name}/{asset_name}');
?>

For example,

<?php 
    echo $this->Html->image( $this->Html->url('/', true).'Corporate/img/image.png');
?>

Note here that plugin_name and asset_name are case sensitive.

Saheb
  • 1,392
  • 3
  • 13
  • 33
  • why the weird and complex image route syntax? You can replace `$this->Html->url('/', true)` with the string `/`. There's no mention here of plugin_name being lowercase and underscored (Whereas plugins themselves are CameBacked) - the second example is basically wrong - [see the docs](http://book.cakephp.org/2.0/en/plugins.html#linking-to-assets-in-plugins) for more info. – AD7six Jun 11 '14 at 11:56
  • sorry for this complex and weird syntax. I used this because plugins are supposed to be reused in different applications and if somebody do not define root in his project then the plugin assets would not be loaded – Saheb Jun 12 '14 at 07:37
  • `$this->Html->image('/corporate/img/image.png')` would point at `/corporate/image/image.png` if the app is installed at the root, or `/subfolder/corporate/image/image.png` if the app is installed in `/subfolder/` etc. Basically `Router::url('/');` is _always_ relative to the application's installed root, not the domainname. – AD7six Jun 12 '14 at 08:33
  • ok, got it thanks for clearing up my concepts. actually I was sending my current url to some api in my project which needs the complete url thats why simple /some_path was not working and so i used that router thing. – Saheb Jun 12 '14 at 10:36