How can I reference image assets in a custom field?

The CMS Questions
1

I see in the docs that you should be able to reference image assets in your custom fields but I can’t figure out how to do it.

In my javascript file, how can I reference an image from within the {fieldname}/assets/images folder?

I’ve you’ve done something like this before I’d love to see an example. Thanks!

http://getkirby.com/docs/panel/custom-form-fields

Screen Shot 2015-07-02 at 4.29.34 PM.png710×838 99.6 KB

2

If your file paths are

site/fields/{fieldname}/assets/js/script.js site/fields/{fieldname}/assets/css/styles.css

this should work:

public static $assets = array(
        'css' => array(
            'styles.css',
        ),
        'js' => array(
            'script.js',
        ),
    );

So just omit the leading path and start from the js/css directory directly. Docu is a bit misleading.
Hope that helps!

3

Have you tried this and confirmed that it works?
In my javascript I am rendering an image tag to the page which looks like this

<img src='icon.jpg'>
If I place icon.jpg in the root of my panel folder the link works.

<img src='../icon.jpg'>
If I place icon.jpg in the root of my kirby installation this link works.

<img src='../site/icon.jpg'>
If I place icon.jpg in the /site root this link fails.

I can see that the .htaccess file in the root folder denies direct access to these files.

# block all files in the site folder from being accessed directly
RewriteRule ^site/(.*) error [R=301,L]

It seems like it would be safe to create a new .htaccess file in site/fields/{fieldname}/assets/ to override this.

# Allow diect access to field assets
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^assets/(.*) [L]

Links to static files now work,
<img src='../site/fields/{fieldname}/assets/images/image.gif'>

Let me know if this seems like the right approach.

Thanks!

4

Oh, sorry, seems like I misread your question. Thought you tried to reference an image from your PHP file in the custom field root, not a javascript file.

I didn’t test the code, but every custom field I’ve installed uses the referencing technique I described, so I figured it should work.

As fas as your img tag goes: I expected your img to work like <img src='icon.jpg'>, assuming that your js in which your referencing it is located inside of /assets/js/ and the image inside of /assets/images.
If this doesn’t work, I’m clueless :smile: