MODX :: Adding TinyMCE to the MaxiGallery Manager form

181

________

Anne
Toad-in-Chief
Red Toad Media - Web Design, Louisville KY
Hear me tweet: http://www.twitter.com/redtoadmedia
"Bring on the imperialistic condiments." - Rory Gilmore

redtoad Reply #1, 11 months, 1 week ago

Link to this post#1

Yeah, I know. someone will thunk me for even bringing this up. However this is super easy and I thought I would share.

1. Disable htmlentities in your template. I was using smoothgallery so I went into assets/maxigallery/templates/gallerypicturetpl and took out the :htmlent

it went from

  [+maxigallery.embedtype:is=`smoothgallery`:then=` 
	<div class="imageElement">
	<h3>[+maxigallery.picture.title:htmlent+]</h3>
	<p>[+maxigallery.picture.descr:htmlent+]</p>
	<a href="[+maxigallery.picture_link_url+]" title="[+maxigallery.strings.click_to_zoom+]" class="open"></a>
	<img src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="full" />
	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" />
	</div>
`+]

to

[+maxigallery.embedtype:is=`smoothgallery`:then=` 
	<div class="imageElement">
	<h3>[+maxigallery.picture.title+]</h3>
	<p>[+maxigallery.picture.descr+]</p>
	<a href="[+maxigallery.picture_link_url+]" title="[+maxigallery.strings.click_to_zoom+]" class="open"></a>
	<img src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="full" />
	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" />
	</div>
`+]

then in assets/snipplets/maxigallery/manageoutertpl.html

I pasted this. At the top.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
 dir="ltr">

<head>
<script type="text/javascript" src="assets/plugins/tinymce/jscripts/tiny_mce/tiny_mce.js" ></script >
<script type="text/javascript" >
tinyMCE.init({
        mode : "textareas",
        theme : "advanced",   //(n.b. no trailing comma, this will be critical as you experiment later)

    
        theme_advanced_buttons1 : "bold,italic,underline,link,unlink,removeformat",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true


});
</script >
</head><body>

I also added closing body and html rags at the bottom of the tpl file.

so now my manager looks thusly (screenshot attached below)

this makes it so my happy little business owner can add his own links to his photo captions without knowing html. Yay.

181

________

Anne
Toad-in-Chief
Red Toad Media - Web Design, Louisville KY
Hear me tweet: http://www.twitter.com/redtoadmedia
"Bring on the imperialistic condiments." - Rory Gilmore

redtoad Reply #2, 11 months, 1 week ago

Link to this post#2

and before someone asks me how I have MG configured...

here is my snippet call.

[!MaxiGallery? &view_gallery=`135` &display=`embedded` &embedtype=`smoothgallery` &keep_bigimg=`1` &smoothgallery_id=`7` &smoothgallery_height=`284` &smoothgallery_width=`637` &smoothgallery_delay=`9000` &smoothgallery_showInfopane=`true` &smoothgallery_timed=`true` &smoothgallery_showCarousel=`false` &smoothgallery_embedLinks=`false` &smoothgallery_showArrows=`false` &manage_target=`135` &max_pic_size=`0` !]

&smoothgallery_showinfopane does the caption magic.

181

________

Anne
Toad-in-Chief
Red Toad Media - Web Design, Louisville KY
Hear me tweet: http://www.twitter.com/redtoadmedia
"Bring on the imperialistic condiments." - Rory Gilmore

redtoad Reply #3, 11 months, 1 week ago

Link to this post#3

ouch, one other thing.

in the name of really really really zealous error trapping, the lovely author of this snippet has a place:

if($_REQUEST['modified'.$i]=='yes') {
						// restructured for clarity and extended MF oct2005
						$updateQueryString= "UPDATE ".$mg->pics_tbl." SET ";
						$updateQueryString.= "title='".addslashes($_REQUEST['title'.$i])."'"; //add title content
						if(!$mg->mgconfig['keep_date']) 
							$updateQueryString.=",date=NOW()";
						if($descvalid==1) 
							$updateQueryString.=", descr='".addslashes($_REQUEST['descr'.$i])."'"; //MF add descr content
						if($custposvalid==1 && is_numeric($_REQUEST['pos'.$i]))
							$updateQueryString.=", pos=".$_REQUEST['pos'.$i]; //add pos value
						if ($_REQUEST['hide'.$i]=="yes") {
							$updateQueryString.=", hide='1'";
						} else {
							$updateQueryString.=", hide='0'";
						} 
						$updateQueryString.=" WHERE id='" .$_REQUEST['pic_id'.$i]."'";
						$rs3=$modx->db->query( $updateQueryString );
					}

like that in maxigallery.php

because I want this to -work- I totally hacked it up and added this:

if($_REQUEST['modified'.$i]=='no') {
						// restructured for clarity and extended MF oct2005
						$updateQueryString= "UPDATE ".$mg->pics_tbl." SET ";
						$updateQueryString.= "title='".addslashes($_REQUEST['title'.$i])."'"; //add title content
						if(!$mg->mgconfig['keep_date']) 
							$updateQueryString.=",date=NOW()";
						if($descvalid==1) 
							$updateQueryString.=", descr='".addslashes($_REQUEST['descr'.$i])."'"; //MF add descr content
						if($custposvalid==1 && is_numeric($_REQUEST['pos'.$i]))
							$updateQueryString.=", pos=".$_REQUEST['pos'.$i]; //add pos value
						if ($_REQUEST['hide'.$i]=="yes") {
							$updateQueryString.=", hide='1'";
						} else {
							$updateQueryString.=", hide='0'";
						} 
						$updateQueryString.=" WHERE id='" .$_REQUEST['pic_id'.$i]."'";
						$rs3=$modx->db->query( $updateQueryString );
					}

which basically just undoes all the zealous and painstaking error trapping that Sparky did. I'm deeply sorry.

I understand that the correct way to fix this is to go and bind the event with ajax so the keyDown registers and toggles the "modified" trigger... and there is an actual tinyMCE function to do that (tinyMCE writes to an iframe and then replaces your textarea, so a keyDown event doesn't register when you use it here), but I tried it and it seems to be fighting Prototype/Scriptaculous. I'm just not that ambitious and it seems to me that it might be okay to send an update query whether there was a keyDown trigger or not?

so I am.

the other small wrinkle.

one other place the pesky :htmlent appeared.... managepicturetpl.html

	<br/>
	<textarea name="[+maxigallery.fieldnames.title+]" rows="2" cols="40" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value='yes'">[+maxigallery.picture.title+]</textarea>
	<br />
	[+maxigallery.strings.description+]:
	<br/>
	<textarea name="[+maxigallery.fieldnames.description+]" rows="4" cols="40" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value='yes'">[+maxigallery.picture.descr+]</textarea>
	<br />

that's what it was after I removed them.

alright, all is working now. If anyone wishes to correct me and give me the right js to fix and bind my form rather than hacking up the if-then statement then you will be my hero, if not then,....oh well.

peace.

149

Nick Hoag
Director / Developer / Co-Owner
http://thefutureforward.com
http://twitter.com/thefutureFWD
http://facebook.com/futureforward

nickff Reply #4, 6 months ago

Link to this post#4

*** SOLVED***
I didn't follow the instructions explicitly - I replaced with your code instead of adding your code. All set now!
*** /SOLVED ***

Hello Red,

Thanks so much for this tutorial! It works really well.

I have noticed one problem though - it seems the "position" field no longer functions when I implement your changes to maxigallery.php.

Any thoughts would be much appreciated!

181

________

Anne
Toad-in-Chief
Red Toad Media - Web Design, Louisville KY
Hear me tweet: http://www.twitter.com/redtoadmedia
"Bring on the imperialistic condiments." - Rory Gilmore

redtoad Reply #5, 5 months, 3 weeks ago

Link to this post#5

um, I have no idea. But I will add it to my list of to-do's and if I have a chance I will test it on the set up where I did this. He hasnt complained so it might be fine on mine and if so we can track down the difference.

149

Nick Hoag
Director / Developer / Co-Owner
http://thefutureforward.com
http://twitter.com/thefutureFWD
http://facebook.com/futureforward

nickff Reply #6, 5 months, 3 weeks ago

Link to this post#6

I actually figured out the issue (you can see my *SOLVED* comment above). Thanks!

181

________

Anne
Toad-in-Chief
Red Toad Media - Web Design, Louisville KY
Hear me tweet: http://www.twitter.com/redtoadmedia
"Bring on the imperialistic condiments." - Rory Gilmore

redtoad Reply #7, 5 months, 3 weeks ago

Link to this post#7

lol, okay, sorry. Glad you have it working!

149

Nick Hoag
Director / Developer / Co-Owner
http://thefutureforward.com
http://twitter.com/thefutureFWD
http://facebook.com/futureforward

nickff Reply #8, 5 months, 3 weeks ago

Link to this post#8

Definitely! Thanks again for this great little tutorial. Such a help with most clients!

181

________

Anne
Toad-in-Chief
Red Toad Media - Web Design, Louisville KY
Hear me tweet: http://www.twitter.com/redtoadmedia
"Bring on the imperialistic condiments." - Rory Gilmore

redtoad Reply #9, 2 months, 3 weeks ago

Link to this post#9

ATTENTION...apparently if you want to be able to hide/order photos after adding this modification, you have to change the code referenced above a different way. Gracias to Rodney, my programmer/partner for this catch and fix.

so above I referenced a chunk of code....(if requestES ...yada yada) and it should be this instead:

if($_REQUEST['modified'.$i]=='yes') {

                        // restructured for clarity and extended MF oct2005

                        $updateQueryString= "UPDATE ".$mg->pics_tbl." SET ";

                        $updateQueryString.= "title='".addslashes($_REQUEST['title'.$i])."'"; //add title content

                        if(!$mg->mgconfig['keep_date']) 

                            $updateQueryString.=",date=NOW()";

                        //if($descvalid==1) 

                            $updateQueryString.=", descr='".addslashes($_REQUEST['descr'.$i])."'"; //MF add descr content

                        if($custposvalid==1 && is_numeric($_REQUEST['pos'.$i]))

                            $updateQueryString.=", pos=".$_REQUEST['pos'.$i]; //add pos value

                        if ($_REQUEST['hide'.$i]=="yes") {

                            $updateQueryString.=", hide='1'";

                        } else {

                            $updateQueryString.=", hide='0'";

                        } 

                        $updateQueryString.=" WHERE id='" .$_REQUEST['pic_id'.$i]."'";

                        $rs3=$modx->db->query( $updateQueryString );

                    }

Adding TinyMCE to the MaxiGallery Manager form#

redtoad Reply #1, 11 months, 1 week ago

redtoad Reply #2, 11 months, 1 week ago

redtoad Reply #3, 11 months, 1 week ago

nickff Reply #4, 6 months ago

redtoad Reply #5, 5 months, 3 weeks ago

nickff Reply #6, 5 months, 3 weeks ago

redtoad Reply #7, 5 months, 3 weeks ago

nickff Reply #8, 5 months, 3 weeks ago

redtoad Reply #9, 2 months, 3 weeks ago