BBcode changing image src

Get help developing custom BBCodes or request one.
Post Reply
Zanzazaar
Registered User
Posts: 57
Joined: Fri Jan 15, 2016 2:14 pm

BBcode changing image src

Post by Zanzazaar »

Code: Select all

[AC]{TEXT}[/AC]

Code: Select all

<img class="testclass" id="testimg1" src="/images/gamedatabase/test/disable/11.jpg">
<img class="testclass" id="testimg2" src="/images/gamedatabase/test/disable/22.jpg">
<img class="testclass" id="testimg3" src="/images/gamedatabase/test/disable/33.jpg">
<img class="testclass" id="testimg4" src="/images/gamedatabase/test/disable/44.jpg">
<img class="testclass" id="testimg5" src="/images/gamedatabase/test/disable/55.jpg">

<script>

	var str = document.getElementById("testimg1").src; 
	var res = str.replace("disable", "enable");
	document.getElementById("testimg1").src= res;

</script>
I need with series of images. I want used to enter names of images (id, name anything) in the {TEXT} and bbcode should then change src path for images from disable to enable, so it would change it to other version. User could use different bbcode insite that "AC" if it is needed, but is there a way to create simple way to create something like that? Only way to create something like that that I would be able to do now is to enter that script for every changed image (so changing 20 images would require to create that script 20 times...)
Any ideas how could it be done? I would be happy for even link to something similar etc...
User avatar
AlfredoRamos
Recognised Extension Developer
Posts: 1302
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

Re: BBcode changing image src

Post by AlfredoRamos »

What are you trying to do? What's the goal of that BBCode?

I ask because whatever the problem you are trying to solve, could be done in another way, even without JavaScript.
Zanzazaar wrote: Mon May 24, 2021 9:56 pm is there a way to create simple way to create something like that?
You could create a small extension with a single JS file, with something like:

Code: Select all

let images = document.body.querySelectorAll('.testclass');

images.forEach(function(img) {
	if (!img) {
		return;
	}
	
	img.src = img.src.replace('disable', 'enable');
});
That way would be more efficient since you only include the JS once and it would work on all BBCodes.
Some of my phpBB extensions:
:chart_with_upwards_trend: SEO Metadata | Image Markdown | :shield: hCaptcha
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user | Linux Boards :penguin:
Zanzazaar
Registered User
Posts: 57
Joined: Fri Jan 15, 2016 2:14 pm

Re: BBcode changing image src

Post by Zanzazaar »

Im trying to create bbcode that has saved series of icons. I want the user to change their variant from gray (disable) to colorfull (enable). As for now I am using primitive method... I new create token for every image that I add to the bbcode.

Code: Select all

[AC aaa={SIMPLETEXT1?} bbb={SIMPLETEXT2?} ccc={SIMPLETEXT3?} ddd={SIMPLETEXT4?} eee={SIMPLETEXT5?} fff={SIMPLETEXT6?} ggg={SIMPLETEXT7?} hhh={SIMPLETEXT8?} iii={SIMPLETEXT9?} jjj={SIMPLETEXT10?} kkk={SIMPLETEXT11?} lll={SIMPLETEXT12?} mmm={SIMPLETEXT13?} nnn={SIMPLETEXT14?} ooo={SIMPLETEXT15?} ppp={SIMPLETEXT16?} qqq={SIMPLETEXT17?} rrr={SIMPLETEXT18?} sss={SIMPLETEXT19?} ttt={SIMPLETEXT20?} uuu={SIMPLETEXT21?} vvv={SIMPLETEXT22?} www={SIMPLETEXT23?} xxx={SIMPLETEXT24?} yyy={SIMPLETEXT25?} zzz={SIMPLETEXT26?}]{TEXT}[/AC]

Code: Select all

<img class="testclass" id="testimg1" src="/images/gamedatabase/test/disable{SIMPLETEXT1}/11.jpg" title="Test test test.">
<img class="testclass" id="testimg2" src="/images/gamedatabase/test/disable{SIMPLETEXT2}/22.jpg" title="Test test test. Test test test. Test test test.">
<img class="testclass" id="testimg3" src="/images/gamedatabase/test/disable{SIMPLETEXT3}/33.jpg" title="Test test test. Test test test.">
<img class="testclass" id="testimg4" src="/images/gamedatabase/test/disable{SIMPLETEXT4}/44.jpg" title="Test test test.">
<img class="testclass" id="testimg5" src="/images/gamedatabase/test/disable{SIMPLETEXT5}/55.jpg" title="Test test test.">
<img class="testclass" id="testimg6" src="/images/gamedatabase/test/disable{SIMPLETEXT6}/66.jpg" title="Test test test.">
<img class="testclass" id="testimg7" src="/images/gamedatabase/test/disable{SIMPLETEXT7}/77.jpg" title="Test test test.">
<img class="testclass" id="testimg8" src="/images/gamedatabase/test/disable{SIMPLETEXT8}/88.jpg" title="Test test test.">
<img class="testclass" id="testimg9" src="/images/gamedatabase/test/disable{SIMPLETEXT9}/99.jpg" title="Test test test.">
<img class="testclass" id="testimg10" src="/images/gamedatabase/test/disable{SIMPLETEXT10}/100.jpg" title="Test test test.">
<img class="testclass" id="testimg11" src="/images/gamedatabase/test/disable{SIMPLETEXT11}/111.jpg" title="Test test test.">
<img class="testclass" id="testimg12" src="/images/gamedatabase/test/disable{SIMPLETEXT12}/122.jpg" title="Test test test.">
...
This is sort of primitive method... But it works. Still, if there would be a way to use that bbcode like that:

Code: Select all

[AC]aaa, ccc, nnn, bbb, [/AC]
or

Code: Select all

[AC]
[test]aaa[/test]
[test]ccc[/test]
[test]nnn[/test]
[test]bbb[/test][/AC]
It would be better, but if thing that I am using now is the best method I would only ask, is there a limit for number of tokens in bbcode?
Post Reply

Return to “Custom BBCode Development and Requests”