Howto: Simplify Image Upload

All about webserver configurations, PHP and databases.

Moderator: Thorsten

Post Reply
BCooper
Posts: 19
Joined: Mon Jul 01, 2013 10:37 am

Howto: Simplify Image Upload

Post 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 :-)
You do not have the required permissions to view the files attached to this post.
Thorsten
Posts: 15560
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: Howto: Simplify Image Upload

Post by Thorsten »

Hi,

looks cool, thanks for sharing!

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist
Shragel
Posts: 13
Joined: Thu Aug 15, 2013 8:37 pm

Re: Howto: Simplify Image Upload

Post 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.
BCooper
Posts: 19
Joined: Mon Jul 01, 2013 10:37 am

Re: Howto: Simplify Image Upload

Post 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.
Shragel
Posts: 13
Joined: Thu Aug 15, 2013 8:37 pm

Re: Howto: Simplify Image Upload

Post by Shragel »

Yes. Changed it and it working. Compress was off. I turned it on.

Thanks for sharing.
funstuffkg
Posts: 3
Joined: Fri Oct 25, 2013 12:35 pm

Re: Howto: Simplify Image Upload

Post by funstuffkg »

Will this functionality become available in main release of phpmyfaq?
myitfaq
Posts: 7
Joined: Wed Aug 21, 2013 7:22 pm

Re: Howto: Simplify Image Upload

Post 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
coudy
Posts: 19
Joined: Wed Feb 05, 2014 9:14 am

Re: Howto: Simplify Image Upload

Post 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 ?
linkazoid
Posts: 2
Joined: Tue Jun 10, 2014 3:21 pm

Re: Howto: Simplify Image Upload

Post by linkazoid »

Hi,

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

Thanks,

Michael
Post Reply