XF 2.1 Easy question. Relative path for image in template modification?

[Brad Padgett]

So I have a simple question but I can't figure out how.

I have an image. It's a light bulb I want to stick in the nav bar to make a light switch (switch from light to dark style with a single click).

My easy question is inside the template modification what relative path can I use?

For example.

My image path:

src/addons/BP/LightSwitch/img/bulb-on.png
src/addons/BP/LightSwitch/img/bulb-off.png

The path to the template mod in the file system is this:

src/addons/BP/LightSwitch/_output/template_modifcations/public/BP_LightSwitch_d201.json

I've tried using the relative path to the template mod in the file system but even that doesn't work. Unless it's possible I was incorrect in my relative path I'm not sure what I'm missing? Is there a special code to insert relative image paths?

I'm going to tag a couple people just in case no one responds. But anyone that knows can help me.

@Sim @S Thomas

 

[TickTackk]

You should store the style assets for an add-on in the styles/default/<vendor>/<addon> directory.

{{ base_url('styles/default/bp/lightswitch/bulb-on.png', true) }}
{{ base_url('styles/default/bp/lightswitch/bulb-off.png', true) }}

 

[Brad Padgett]

You should store the style assets for an add-on in the styles/default/<vendor>/<addon> directory.

{{ base_url(property('styles/default/bp/lightswitch/bulb-on.png'), true) }}
{{ base_url(property('styles/default/bp/lightswitch/bulb-off.png'), true) }}

Thank you. That was extremely helpful. I love how this community is always so helpful. I tried for the longest time thinking a normal relative path would work but could never come to an answer. I really appreciate your help. This will probably help someone else too.

 

[Brad Padgett]

@batpool52! one last question. If I place the image there how could I package it in the add-on?

Would I need to edit the .zip file and place the directory in it after packaging?

 

[TickTackk]

When developing the add-on, put both files in <xf-root>/src/addons/BP/LightSwitch/_files/styles/default/bp/lightswitch directory.

 

[Brad Padgett]

When developing the add-on, put both files in <xf-root>/src/addons/BP/LightSwitch/_files/styles/default/bp/lightswitch directory.

Thank you. Great work. +Like

Kudos for your helpful assistance.

 

[Brad Padgett]

@batpool52! I'm having trouble getting it to work. I've tried exactly as you've said and it does not work. I've tried variations for about an hour and none of it works.

I tried this. I made a directory called _files inside my add-on root folder. I placed the images in _files/styles/default/BP/LightSwitch directory.

I then went to the template mod and added in this:

<img src="{{ base_url(property('styles/default/BP/LightSwitch/bulb-on.png'), true) }}">
<img src="{{ base_url(property('styles/default/BP/LightSwitch/bulb-off.png'), true) }}">

I also tried without the img tag and tried with the code on it's own (that just made the forum home url appear). I'm on localhost if it would matter.

I found this thread https://xenforo.com/community/threa...ay-to-use-an-image-in-an-addon-in-xf2.144652/

So I made a build.json file and added in this:

{
  "additional_files": [
    "styles/default/BP/LightSwitch/bulb-on.png",
    "styles/default/BP/LightSwitch/bulb-off.png"
  ]

}

I don't think the build.json file matters until the add-on is built and then it just copies the directory where _files is based on the given file path but strangely nothing is working.

I tried to add in _files to the start of the file path variation you gave me to see if that would work. But it doesn't. I even made a separate folder named styles/default/BP/LightSwitch under my add-on directory for a temporary set-up to see if it would work at all and to no avail.

Do you or anyone have any idea? Thanks for the help

 

[Brad Padgett]

Do I need to make a style property for it? When I set it as you gave me it was showing the root URL as the image path only. So I took out property() and then it showed the correct URL but would not display as it was not in the file system correctly. I need some more input.

 

[TickTackk]

My bad I forgot there is nothing similar to devjs.js for styles directory. You'll have to use this

You should store the style assets for an add-on in the styles/default/<vendor>/<addon> directory.

{{ base_url('styles/default/bp/lightswitch/bulb-on.png', true) }}
{{ base_url('styles/default/bp/lightswitch/bulb-off.png', true) }}

and then make use of the build.json file add your images to add-on archive.

 

[Brad Padgett]

My bad I forgot there is nothing similar to devjs.js for styles directory. You'll have to use this

and then make use of the build.json file add your images to add-on archive.

That's the exact same code though? I tried it and it does not work. Not trying to be difficult but can you explain why it's not working. Do I need to somehow sync the build.json file. I added the images to _files with the exact path and then used that code and it doesn't work.

 

[TickTackk]

It should work without the _files prefix for file paths.

 

[Brad Padgett]

@batpool52! I've provided a screenshot. Are you saying this only works when building the add-on? I'm trying to find the correct file path while developing as well. Which does not work for me. I tried both with and without _files in the path. When I go to inspect element it's showing the file path as only the base_url and nothing more.

 

[TickTackk]

Fixed the code in the original post

 

[Brad Padgett]

Okay thank you @batpool52! that worked when I added the files directly to the styles/default/BP/MostEverOnline file system. Since this would do the same thing when building the add-on.

Glad we worked this out.