Page 1 of 1

Howto: Simplify Image Upload

Posted: Mon Aug 05, 2013 1:42 am
by BCooper
Sometimes when you are adding a lot of images such as a step by step procedure you may want to quickly upload images, using a 3rd party plugin to TinyMCE (The text editor for phpMyFAQ) you are able to reduce the clicks and simplify the process. All images will be saved into a directory you specify in step 3. In this howto I am using 'TinyMCE Images Upload' from http://justboil.me with phpMyFAQ 2.8.2.
Upload.PNG
1. Download the 'TinyMCE Images Upload' plugin from http://justboil.me.

2. Copy the jbimages folder from within the zip file to phpmyfaq\admin\editor\plugins.

3. Edit config.php file found in phpmyfaq\admin\editor\plugins\jbimages. Minimally, you should only specify a target directory for your uploads.

4. Edit footer.php found in phpmyfaq\admin.

Add jbimages to plugins (line 83):

Code: Select all

plugins:"jbimages,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,syntaxhl,phpmyfaq",
Now you will need to add the icon for jbimages by adding jbimages to theme_advanced_buttons3 (line 89) at the end of the line. Should look something like this:

Code: Select all

theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,fullscreen,jbimages",
Note: This can be moved around in either theme_advanced_buttons1,theme_advanced_buttons2 or theme_advanced_buttons3 by its position in the list.

Save and you're done!

5. (Optional) Image Tidy Pack - Intercept the contents of an FAQ prior to saving back to the database and perform some tidy actions. This will prefix the image name with the record ID, this will keep your images grouped by record id and keep them unique between articles. This will also save out images pasted into TineMCE from Firefox and also enable/disable compression to reduce the file size of pasted images.

Edit record.save.php found in phpmyfaq\admin.

Add the following before $recordData = array (line 123):

Code: Select all

		// ------- Start Image Tidy Pack -------
		// v1 -  Initial script
		// v1.1 - Added paste from Firefox support
		// v1.2 - Added compression support
		// Still requires a bit of cleaning up
		
		
		// - Modify settings here - 
		$imgPath = "/images/";
		$imgSysPath = $_SERVER['DOCUMENT_ROOT'] . $imgPath;
		$prefix = $recordId."_";
		// Compress pasted images and set PNG or JPG quality (JPG: 0-100, 100=Highest Quality, PNG: 0-9, 0=Highest Quality)
		$compress = True;
		$quality = 90;
		// Compressed output format 'png' or 'jpg'.
		$cFormat = 'jpg';
		// ------------------------
		
		// Set regex query for images to search for, must be in the path specified above. Restrict the allowed characters.
		$regexQuery = '/src="' . preg_quote($imgPath, '/') . '([A-Za-z0-9 -._()]+)"/';
		preg_match_all($regexQuery, $content, $foundImages, PREG_SET_ORDER);
		
		// Loop through all images found
		foreach ($foundImages as $foundImage) {
			
			// Do not proceed if images already is prefixed.
			if (strpos($foundImage[1],"$prefix") !== 0) {
				
				// prefix the new name.			
				$newName = $prefix . $foundImage[1];
				// Rename the file.
				rename($imgSysPath . $foundImage[1], $imgSysPath . $newName);
				// Replace the image name in the contents with the new name.
				$content = str_replace('src="' . $imgPath . $foundImage[1], 'src="' . $imgPath . $newName, $content);
			}

		}
		
		// Set regex query for inline images (e.g. data:image/png), We will save out the images.		
		$regexQuery = '/src="(data:.*?)"/i';
		preg_match_all($regexQuery, $content, $foundImgData, PREG_SET_ORDER);

		// Data types to ext name.
		$types = array(
		'image/jpeg' => 'jpg',
		'image/png' => 'png',
		'image/gif' => 'gif',
		);

		// Loop through each embedded image and save out.
		foreach ($foundImgData as $imgData) {
			
			$src = $imgData[1];
			$semicolon_place = strpos($src, ';');
			$comma_place = strpos($src, ',');
			$type = substr($src,5,$semicolon_place-5);
			$base64_data = substr($src, $comma_place+1);
			$data = base64_decode($base64_data);
			// Create unique name using MD5.
			$md5 = md5($data);
			
			// Are we compressing?
			if($compress)
			{
				// Export image as compressed JPG.
				
				// Get image object.
				switch ($types[$type]) {
				case 'png':
					$image = imagecreatefrompng($src);
					break;
				case 'jpg':
					$image = imagecreatefromjpeg($src);
					break;
				case 'gif':
					$image = imagecreatefromgif($src);
					break;
				}
				
				// Export as prefered format.
				switch ($cFormat) {
				case 'png':
					// Save image.
					imagepng($image, "{$imgSysPath}/{$prefix}{$md5}.png", $quality);
					// Replace the image name in the contents with the new name.
					$content = str_replace($src,"{$imgPath}{$prefix}{$md5}.png",$content);
					break;
				case 'jpg':
					// Save image.
					imagejpeg($image, "{$imgSysPath}/{$prefix}{$md5}.jpg", $quality);
					// Replace the image name in the contents with the new name.
					$content = str_replace($src,"{$imgPath}{$prefix}{$md5}.jpg",$content);
					break;
				}
				
				// Remove image object.
				imagedestroy($image);

			
			} else {
				// Export image as is.
				if (!file_exists($imgSysPath)) {
					mkdir($imgSysPath, 0775);
				}
				$imgSysPath .= "/{$prefix}{$md5}.{$types[$type]}";
				if (!file_exists($imgSysPath)) {
					$handle = fopen($imgSysPath,'w');
					fwrite($handle, $data);
					fclose($handle);
				}
				// Replace the image name in the contents with the new name.
				$content = str_replace($src,"{$imgPath}{$prefix}{$md5}.{$types[$type]}",$content);
			}
			
		}
		// ------- Finish Image Tidy Pack -------
		
Make any changes to the modify settings section then save and you're done.

This is how it works. It looks for all images that match the image path set in $imgPath (should match setting in step 3) and the ones that have not be prefixed with the record id it will rename e.g. example.jpg -> 7_example.jpg. It will also update the contents of the article prior to saving so the name matches.

Also you are able to paste in images when using Firefox from programs such as Windows Snipping Tool, the problem with this is the whole image is stored within the article and not as a separate file which is not ideal. So I butchered some code from http://jk3.us/2011/10/31/pasting-images-in-tinymce/ to now allow images to save out with compression and with prefixing the record id.
Upload2.PNG
Upload3.PNG
I need to clean the code up but it works, the aim is to simplify getting images into the FAQ. Easier something is to use, the more chance you have of people using it.

-------------------------------------------------
More information on the plugin can be found at http://justboil.me.

Please use at your own risk and make sure to test prior to rolling out. Do not hold me responsible if your data center gets enveloped by fire and incinerates into a gelatinous goo :-)

Re: Howto: Simplify Image Upload

Posted: Sun Aug 11, 2013 8:28 am
by Thorsten
Hi,

looks cool, thanks for sharing!

bye
Thorsten

Re: Howto: Simplify Image Upload

Posted: Mon Aug 19, 2013 4:08 am
by Shragel
Thanks am using it. I use the paste in firefox. When having multiple images only the first gets saved the second and third get erased and show fail by the link verifier.

What can be wrong.

Re: Howto: Simplify Image Upload

Posted: Thu Aug 29, 2013 11:57 pm
by BCooper
Shragel wrote:Thanks am using it. I use the paste in firefox. When having multiple images only the first gets saved the second and third get erased and show fail by the link verifier.

What can be wrong.
Hi Shragel,

Well it appears to be picking up the images out of the file ok, might be an issue saving.

What settings ($compress, $quality & $cFormat) are you using? If you you change the $compress to true/false (whatever is the opposite) does it work?

Cheers.

Re: Howto: Simplify Image Upload

Posted: Thu Sep 12, 2013 4:04 am
by Shragel
Yes. Changed it and it working. Compress was off. I turned it on.

Thanks for sharing.

Re: Howto: Simplify Image Upload

Posted: Fri Oct 25, 2013 12:37 pm
by funstuffkg
Will this functionality become available in main release of phpmyfaq?

Re: Howto: Simplify Image Upload

Posted: Mon Jan 13, 2014 2:44 pm
by myitfaq
Hi,

the picture upload is already existing.
Take a look to this topic:
https://forum.phpmyfaq.de/viewtopic.php?f=3&t=15457

greetings
Kevin

Re: Howto: Simplify Image Upload

Posted: Wed Feb 19, 2014 8:38 am
by coudy
Hi,
thx for howto. It works in FF, but does not work in IE10, IE10 compatibility mode, IE9, IE8, IE7

do you know any workaround how to paste (not upload) screenshot image ?

Re: Howto: Simplify Image Upload

Posted: Wed Jun 11, 2014 8:37 am
by linkazoid
Hi,

Does anyone have any instructions for v2.10? This would make my current task so much easier.

Thanks,

Michael