Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Edit quicktags to modify output
I’m trying to edit the quicktags from upm_qicktags for the image attribute as bas_img_selector doesn’t work with xhtml or textile, additionally I don’t have a clue on how to use classes within txp image out put. It’s all a bit of a mess in my head.
So I want to modify this:
<pre>{ img = prompt(‘Enter the URL of the image:’,‘http://’);
if (img) { img = ‘<img src=”’ + img + ‘”’;
width = prompt(‘Image width:’,’‘);
if (width) { img += ‘ width=”’ + width + ‘”’; }
height = prompt(‘Image height:’,’‘);
if (height) { img += ‘ height=”’ + height + ‘”’; }
alt = prompt(‘Alternate text for non-visual browsers:’,’‘);
if (alt) { img += ‘ alt=”’ + alt + ‘”’; }
title = prompt(‘Image Tooltip:’,’‘);
if (title) { img += ‘ title=”’ + title + ‘”’; }
if (xhtml == ‘yes’) { img += ‘ />’; }
else { myValue += ‘>’; }
edInsertContent(myField, img);
}
}
</pre>
The procedure is:
link to image
width of image
height of image
alt text
title text
I want to change this to:
link to image
link to the thumbnail
class text (inout would be left or right)
alt text
title text
Could someone help me do this? The final output would be something like:
<pre> <a href=“http://linktomainimage”><img src=“http://linkto thumbnail” class=“left” alt=“alt title” title=“tootip title” /></a></pre>
Do I need to have height and width if I call the thumbnail? Additionally can I add for the image to be brought up in a popup window? Hopefull this is valid.
Thanks in advance
Offline
Re: Edit quicktags to modify output
This should get you started.
I have not tested this nor have I checked all the brackets and everything, I took what you posted and modified it, but it seemed pretty straight forward and it should give you an idea of how to extend it.
You could extend this to set a ‘rel’ attribute that you could use to create popups if you wanted to.
<pre>
{
img = prompt(‘Enter the URL of the image:’,‘http://’);
if (img) { img = ‘<a href=”’ + img + ‘”>’; }
thumb = prompt(‘Enter the URL of the thumbnail:’,‘http://’);
if (thumb) { img = ‘<img src=”’ + thumb + ‘”’;}
width = prompt(‘Image width:’,’‘);
if (width) { img += ‘ width=”’ + width + ‘”’; }
height = prompt(‘Image height:’,’‘);
if (height) { img += ‘ height=”’ + height + ‘”’; }
class = prompt(‘CSS class:’,’‘);
if (class) { img += ‘ class=”’ + class + ‘”’; }
alt = prompt(‘Alternate text for non-visual browsers:’,’‘);
if (alt) { img += ‘ alt=”’ + alt + ‘”’; }
title = prompt(‘Image Tooltip:’,’‘);
if (title) { img += ‘ title=”’ + title + ‘”’; }
if (xhtml == ‘yes’) { img += ‘ />’; }
else { myValue += ‘>’; }
edInsertContent(myField, img); } }
</pre>
Shoving is the answer – pusher robot
Offline
Re: Edit quicktags to modify output
thanks for the help is there a guide on how to edit quicktags in TXP? I;m used to just editing the quicktag.js and it working, but this additional work is unfamiliar :)
Cheers again for the mod.
EDIT: It disabled the plugin as the instructions state not to modify it, but I’ll try and get someone to fix it, the errors I got were:
Error: class is a reserved identifier
Source File: http://www.sekhu.net/txpattern/textpattern/upm_quicktags/lib/quicktags.js
Line: 595
Source Code:
class = prompt(‘Image position (enter left or right only:’,’‘);
Error: edButtons is not defined
Source File: http://www.sekhu.net/txpattern/textpattern/upm_quicktags/write.js
Line: 12
Error: upm_quicktags_toolbar is not defined
Source File: http://www.sekhu.net/txpattern/textpattern/upm_quicktags/lib/txp.js
Line: 17
Last edited by sekhu (2005-05-19 07:02:21)
Offline
Re: Edit quicktags to modify output
I don’t have access to my installation right here but it erroring out on the class reserved word might have caused it not to load the buttons array and build the toolbar. You basically can edit it the same way you edit regular quicktags but Mary broke out the button config into different includes for different pages. That way you can have different buttons on write, forms and pages. Unfortunately the way quicktags were originally setup images and links are handled in a special way that is specified in the actual quicktags.js in the /lib/ folder. This makes the output of these two elements harder to modify (like when I did the textile config). Try changing the class variable to something like theClass so it doesn’t collide with a reserved word and see if it corrects the problem.
I’ve been working on changing the way quicktags generates links and images so that you could use the same plugin for xhtml, textile,markdown, bbcode whatever you want. Once I get that figured out I’ll submit it to mary.
Shoving is the answer – pusher robot
Offline
#5 2005-05-19 16:04:44
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Edit quicktags to modify output
“is there a guide on how to edit quicktags in TXP? “
The “help” contains all you need to know, or, at least, it should.
Patrick, I was just thinking: what if I simply allowed for custom functions? i.e: supply an empty custom.js file and include it, which you can choose to fill? That way, you can still make use of all the functions I’ve got there, and allows for all kinds of things.
Offline
Re: Edit quicktags to modify output
ok guys my friend said the same thing – he’s a js sort of guy and he is getting bored of helping me out of js fixes :)
so in what instance do I use theClass? Could the output still be class=“x” since I need to apply the class to function with the css?
Cheers
Offline
Re: Edit quicktags to modify output
Sekhu :
Just replace the class variable with theClass like this
<pre>
theClass = prompt(‘CSS class:’,’‘);
if (theClass) { img += ‘ class=”’ + theClass + ‘”’; }
</pre>
mary:
I think the idea of a custom.js is great. It would allow customization without worrying about things changing in future releases. It could also eventually allow plugin authors to plug into it too. My brain is just running now, I don’t really know how this would work but wouldn’t it be awesome if say if all the work from bas_image_selector could be accessed from quicktags without you needing to integrate it. Anyway that would be fairly involved.
The main thing with the way images and links work right now (in quicktags in general) is that it doesn’t use the edbuttons array to build them, just to know to display the buttons. I think it could be setup so it used the tag definitions the same way everything else does. It would just be a matter of passing them down.
I need to find sometime to work on this. I have one mod I want to make to my plugin for a rev 0.2 and I think all the admin thoughts I had should just be bundled in your plugin since there is no reason to have 2 that would do almost the same thing.
Shoving is the answer – pusher robot
Offline
Re: Edit quicktags to modify output
Hmm I must have done something wrong, I’m getting the following errors, additionally the tags won’t display
Error: syntax error
Source File: http://www.sekhu.net/txpattern/textpattern/upm_quicktags/lib/quicktags.js
Line: 614
Source Code:
}
Error: edButtons is not defined
Source File: http://www.sekhu.net/txpattern/textpattern/upm_quicktags/write.js
Line: 12
Error: upm_quicktags_toolbar is not defined
Source File: http://www.sekhu.net/txpattern/textpattern/upm_quicktags/lib/txp.js
Line: 17
With regards to the first error I thought that was fine – is it possible I need to make edits to the other two errors before the first one is resolved?
Thanks
Offline
#9 2005-05-19 18:30:09
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Edit quicktags to modify output
Actually, it would work very well. You could use any, all, or none of the built-in buttons, but you can still hook into the generic functions that power it. You could build your own array and use whatever functions, then you’d just
toolbar.appendChild(element);
Offline
Re: Edit quicktags to modify output
> mary wrote:
> toolbar.appendChild(element);
Didn’t even think of that. That’s perfect.
Shoving is the answer – pusher robot
Offline
Re: Edit quicktags to modify output
@ Mary I just checked the help file. sorry, still finding my way around the obvious. It’s very detailed, but I think a little over my head. As I understand I need to create a new button template, a new image button template and then a link template? In addition to modifying or adding the above changes to the quicktag.js could you explain how I would change the existing, link template for the img button so that it works when click?
// image
edButtons[edButtons.length] = new edButton(‘qt-image’,‘img’,’‘,’‘,‘Image’); // special
I still don’t understand what those errors mean, and I’m hoping that this will prove to be the simple solution I need to add an image, assign it a class, and to link to a thumbnail all in one hit.
Cheers
Last edited by sekhu (2005-05-19 20:01:02)
Offline
#12 2005-05-19 20:48:21
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Edit quicktags to modify output
Patrick: I’ve updated quicktags to include the custom js file.
As I’ve said before: you won’t be able to get quicktags to insert your images without totally reworking the plugin itself, not just the JavaScript.
Now, I will look at seeing if I can make a standalone plugin do what you want, since I think its something that others will want also. I can’t promise anything, but I can try.
Offline