XF 2.1 additional_files with images

[asprin]

I read through the documentation and came across additional_files parameter in the build.json file. That's a terrific option to have. However, having a little difficulty grasping my mind around it.

I understood what it's used for but the "how" part is unclear.

Let's say my addon makes use of an image that is stored under src/addons/myaddon/_files/images/cool.png. The question now arises -

(a) How would I serve it on the page during development? Using <img src="{{ base_url('????') }}" /> what would go in there?
(b) When I pack/build the addon, how do I ensure that the file in src/addons/myaddon/_files/images/cool.png gets copied to <root>/data/myaddon/images/cool.png? My understanding is that under additional_files array, we specify the location of image that we need to copy but not the destination it needs to get copied to.
(c) And when this copying happens, will I need to update my img src attribute since it will be pointing to src/addons/myaddon/_files/images/cool.png?

Hope I'm making sense.

 

[Jeremy P]

(a) How would I serve it on the page during development? Using <img src="{{ base_url('????') }}" /> what would go in there?

A bit cumbersome out of the box, but I tend to use symbolic links to the _files directory.

(b) When I pack/build the addon, how do I ensure that the file in src/addons/myaddon/_files/images/cool.png gets copied to <root>/data/myaddon/images/cool.png? My understanding is that under additional_files array, we specify the location of image that we need to copy but not the destination it needs to get copied to.

You would essentially treat _files as the root directory.

In your build.json:

{
    // ...
    "additional_files": [
        "images/cool.png"
    ],
    // ...
}

https://xenforo.com/docs/dev/development-tools/#building-an-add-on-release

If you have assets, such as JavaScript, which need to be served outside of your add-on directory, you can tell the build process to copy files or directories using the additional_files array within build.json. During development it isn't always feasible to keep files outside of your add-on directory, so if you prefer, you can keep the files in your add-on _files directory instead. When copying the additional files, we will check there first.

(c) And when this copying happens, will I need to update my img src attribute since it will be pointing to src/addons/myaddon/_files/images/cool.png?

You would want to point it to where it gets copied to during building. You can either copy the file to the destination or symlink it for development.

 

[asprin]

A bit cumbersome out of the box, but I tend to use symbolic links to the _files directory.

Not across these symbolic links. Are there are examples to go by?

You would essentially treat _files as the root directory.

That's encouraging. So if I have a file under _files/foo/bar/xyz.png and I mention the same in the additional_files array, XF will mimic the path and put it at <root>/data/foo/bar/xyz.png?

 

[Jeremy P]

Not across these symbolic links. Are there are examples to go by?

It's an operating system feature. On *nix-based operating systems, something like ln -s src/addon/Vendor/AddOn/_files/foo/bar/xyz.png foo/bar/xyz.png. I'm not familiar with what support is like on Windows these days.

That's encouraging. So if I have a file under _files/foo/bar/xyz.png and I mention the same in the additional_files array, XF will mimic the path and put it at <root>/data/foo/bar/xyz.png?

Close, it would put it at foo/bar/xyz.png. If you want it in data/, you'd place it in _files/data/foo/bar/xyz.png.