Can I do this with a plugin?

7 Posts

marye Reply #1, 18 years ago

Hello,

I want to be able to easily view the image while writing about it in a document, but keep it separate from the content so I can use some of the thumbnail and gallery snippets I’ve found here for modx.

So I added a "view image" toggle button to the image TV, that expands to the image when selected. The code was taken from the modx file manager code, and modified to perform a toggle on an image TV. For this experiment (see images below), I hacked into the tmplvars.inc file.

I noticed the image viewing feature in the file manager section and figured I could "leverage the code". Changes were made to make the image tag unique to the TV (html/javascript/php) and toggle the button (javascript function "viewfile"). Not terribly elegant, but it works.

I’d like to make a plugin for this, or even a new template variable type - something that prevents me from changing the core. But I can’t see how I can do this based on the events that are available in 0.92. Am I missing something basic? Or is this feature (directly viewing the image) already available and I’m just not seeing it?

Many thanks for any help,
M.

Toggle button placement:

Toggled with image viewable:

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 18 years ago

Or you could just post your code here, link to it in the bugtracker, we’ll take a peek at it, and most likely include it in the next release this month.

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

3,250 Posts

MARKSVIRTUALDESK Reply #3, 18 years ago

Actually, I think that idea is great! Being able to see the image you select is perfect!

I vote for this to be in the core. Marye can you provide the code so we can look at it? Thanks.

7 Posts

marye Reply #4, 18 years ago

Quote from: Mark at May 05, 2006, 04:26 AM

Actually, I think that idea is great! Being able to see the image you select is perfect!

I vote for this to be in the core. Marye can you provide the code so we can look at it? Thanks.

Thanks for your response!

I’ll post the code later tonight [EST]. Gotta do a kid thing right now ...

3,975 Posts

Zaigham (aka zi) Reply #5, 18 years ago

Oh! that would be great!

Cant wait to see it live wink

Zaigham R - MODX Professional | Skype | Email | Twitter

Digging the interwebs for #MODX gems and bringing it to you. modx.link

7 Posts

marye Reply #6, 18 years ago

Change is in tmplvars.inc.php in directory /manager/includes:

around line 196, at the end of the script section, after the javascript function "setUrl" replace the following code:

					</script>";
					$ImageManagerLoaded  = true;					
				} 
				$field_html .='<input type="text" id="tv'.$field_name.'" name="tv'.$field_name.'"  value="'.$field_value .'" '.$field_style.' onchange="documentDirty=true;setVariableModified(\''.$field_name.'\');" /> <input type="button" value="'.$_lang['insert'].'" onclick="setVariableModified(\''.$field_name.'\');BrowseServer(\'tv'.$field_name.'\')" />';

				break;

with this new modification:

							/* MEE */
							function viewfile(tagname, url) {
								var fieldname = 'tvi' + tagname;
								
								if ((document.getElementById(fieldname).src==url) || (!url))
								{
									document.getElementById(fieldname).style.border=
										'0px solid #fff';
									document.getElementById(fieldname).src=
										'media/images/_tx_.gif';
								}
								else
								{
									document.getElementById(fieldname).style.border=
										'1px solid #000080';
									document.getElementById(fieldname).src=url;
								}
							}


					</script>";
					$ImageManagerLoaded  = true;					
				} 

/* MEE */
				$field_html .='<input type="text" id="tv'.$field_name.'" name="tv'.$field_name.'"  value="'.$field_value .'" '.$field_style.' onchange="documentDirty=true;setVariableModified(\''.$field_name.'\');" /> <input type="button" value="'.$_lang['insert'].'" onclick="setVariableModified(\''.$field_name.'\');BrowseServer(\'tv'.$field_name.'\');viewfile(\''.$field_name.'\');" />'.
' <span style="cursor:pointer; width:20px;" onClick="viewfile(\''.
$field_name.'\', document.getElementById(\'tv'.$field_name.
'\').value);"><img src="media/images/icons/context_view.gif" border=0 align="absmiddle"></span>'.
'<br /><div align="center" style="margin-top: 2px;"><img src="media/images/_tx_.gif" id="tvi'.$field_name.'" /></div>';

				break;

I resisted adding too much formating. There are two pieces to the code (1) a new function "viewfile" to the javascript section (new html which adds a clickable image icon and a new image field with an id that is named after the TV field, with "tvi" prepended to it. Original code found in files.dynamic.action.php for use in file manager.

Here’s the file reference as a text file:
http://www.newvispub.com/tmplvars.inc.php.txt