php path to image

[HiFiKabin]

The following are in a JS file as part of my April Fools (Bugs In The Machine) Extension

Code: Select all

imageSprite: "./ext/hifikabin/aprilfools/styles/prosilver/theme/images/fly-sprite.png",

Code: Select all

imageSprite: "./ext/hifikabin/aprilfools/styles/prosilver/theme/images/spider-sprite.png",

These paths should be generated in PHP to allow compatibility with other styles.[/list]

The validation failed with the above comment. How do I correct it? I have searched with no luck.

TiA

[Mike-on-Tour]

Just declare in your PHP script something like:

Code: Select all

	$this->template->assign_vars([
		'HIFIKABIN_APRILFOOLS_PNG_PATH'	=> $this->phpbb_root . 'ext/hifikabin/aprilfools/styles/prosilver/themes/images/',
	]);

This template variable you can set up for usage within JS with the following structure within the HTML file that uses the JS script:

Code: Select all

<script>
	let imageSprite = "{{ HIFIKABIN_APRILFOOLS_PNG_PATH|e('js') }}";
</script>

Now you can use this path e.g. for putting an image into a HTML tag with an id within the JS script:

Code: Select all

	$("#my_div_id").html(imageSprite + "fly-sprite.png");

The last code segment would be jQuery which is preferred over vanilla JS by the validators.

[HiFiKabin]

Thanks, I'll have a play with it now

[Mike-on-Tour]

Have fun and please note that I corrected two things.

One other advice: If you use those images with all styles it may be better to just define an image subdirectory within your extension and use that instead of the theme directory since you would have to change the path defined within PHP for the style or you use something like T_PATH (not quite sure about the variable name which should lead to the style)

[HiFiKabin]

please note that I corrected two things.

Noted, thanks

If you use those images with all styles it may be better to just define an image subdirectory within your extension and use that instead of the theme directory

Good point, thanks again

[cabot]

Hello,

Have you tried declaring the images when initialising the functions?

What's more, you don't need overall_header_head_append.html, the overall_footer_body_after.html file is all you need:

Code: Select all

{% if S_INDEX %}
{% INCLUDEJS '@hifikabin_aprilfools/bug-min.js' %}
<script>
	// default fruit fly bug:
	new BugController({
		'imageSprite': '{{ ROOT_PATH }}ext/hifikabin/aprilfools/styles/prosilver/theme/images/fly-sprite.png'
	});

	// default spiders:
	new SpiderController({
		'imageSprite': '{{ ROOT_PATH }}ext/hifikabin/aprilfools/styles/prosilver/theme/images/spider-sprite.png'
	});
</script>
{% endif %}

And in the bug.min.js file, you declare empty variables for the options (x2):

Code: Select all

imageSprite: "",

Perhaps you could also use all/ instead of /prosilver ?

[HiFiKabin]

Have you tried declaring the images when initialising the functions?

I hadn't, but its a much cleaner idea. keeps the extension nice and small as well. Thanks, it works perfectly.

Perhaps you could also use all/ instead of /prosilver ?

I have no idea why I used /prosilver at the time, all/ makes far more sense, thanks again.